Get that error when try to get stream from any HLS source.
I tried to add videojs-contrib-hls lib , but its dont help.
Maybe should i try some other player, and what player will properly work with hls sources?
<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import videojs from 'video.js'
window.videojs = videojs
export default {
components: {
videoPlayer
},
data () {
return {
playerOptions: {
height: '700',
width: '1820',
controls: true,
sourceOrder: true,
hls: true,
sources: [{
// type: "video/mp4",
type: "application/x-mpegURL",
// src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
src: "http://127.0.0.1:8081/live/93UEctBmn/index.m3u8",
withCredentials: false,
}],
autoplay: false,
},
techOrder: ['html5'],
html5: { hls: { withCredentials: false } },
contentData: {}
}
},
mounted() {
this.$store.dispatch("content/getById", this.$route.params.contentId).then(
(res) => {
// this.message = data.message;
// this.snackbar = true;
if(res.data.error){
console.log(res.data.error);
return;
}
this.contentData = Array.isArray(res.data) ? res.data[0] : res.data;
},
(error) => {
// this.message = error.response.data.message || error;
// this.snackbar = true;
console.log(error)
}
);
}
}
</script>
<template>
<div class="content">
<div class="content-player">
<video-player class="vjs-custom-skin videoPlayer" :options="playerOptions" ></video-player>
</div>
<div class="content-info">
<div class="content-info_title">
{{contentData.streamTitle || 'loading'}}
</div>
</div>
<v-divider></v-divider>
<div class="content-author">
<div class="content-author_avatar">
<v-avatar
size="56"
>
<v-img
:src="'https://diploma-rtmp-bucket.s3.eu-central-1.amazonaws.com/'+contentData.author[0]._id || ''"
></v-img>
</v-avatar>
</div>
<div class="content-author_name">
{{contentData.author[0].username || 'undefined username'}}
</div>
</div>
</div>
</template>
Here is my page code. Can it be becouse of some CORS troubles?. I run it player on local machine
I used another player vue-vjs-hls. On this player hls work good, dont now why hls source not works at vue-video-player and video.js. What strange becouse vue-vjs-hls use video.js as core.
Related
I've got a checkbox with filtering, e.g.:
if false => display all data (one endpoint in API)
if true => display only filtered data (another endpoint)
I struggle with sending different requests like this
<template>
<div>
<div style="display: flex;
justify-content: center;">
<div class="col-md-9">
<b-form-checkbox v-model="my__specialization"
value=true
unchecked-value=false
#change="filterOrdersSpec()"
>Show filtered</b-form-checkbox>
<p>{{ my__specialization }}</p>
</div>
</div>
<div v-for="el in APIData" :key="el.id" >
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Orders',
data () {
return {
APIData: [],
my__specialization: false,
}
},
methods: {
filterOrdersSpec() {
if (this.my__specialization) {
axios
.get('/api/v1/filter-orders/specs')
.then(response => {
this.APIData = response.data.results
})
}
else {
axios
.get('/api/v1/orders/get')
.then(response => {
this.APIData = response.data.results
})
}
},
},
created () {
axios
.get('/api/v1/orders/get')
.then(response => {
this.APIData = response.data.results
})
.catch(err => {
console.log(err)
})
},
}
</script>
This construction does filter Data on setting checkbox to TRUE, but when setting FALSE, the request to filter is sent again. The question is - why and how to fix it?
Root cause of the problem : this.my__specialization returning boolean as a string "true"/"false". Hence, if (this.my__specialization) { ... } condition will always return true as it consider the value as string instead of boolean.
Solution : You have to convert the string value into a boolean.
if (this.my__specialization === "true") {
}
Live Demo :
new Vue({
el: '#app',
data() {
return {
APIData: null,
my__specialization: false
}
},
methods: {
filterOrdersSpec() {
this.APIData = (this.my__specialization === "true") ? 'Endpoint 1' : 'Endpoint 2';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<div id="app">
<b-form-checkbox
v-model="my__specialization"
value="true"
unchecked-value="false"
#input="filterOrdersSpec()"
>Show filtered</b-form-checkbox>
<div>my__specialization: <strong>{{ my__specialization }}</strong></div>
<div>APIData: <strong>{{ APIData }}</strong></div>
</div>
I'm using NUXT / Vue along with brightcove video player which has worked for me in the past with very few issues. I noticed today that my videos are playing but have NO SOUND in ie11. The videos work fine in every other browser I tested excpet ie11.
I do not see any errors in ie11 but there is a few warnings that I am not familiar with that I'm hoping have something to do with the no sound and can give me some direction for a solution:
VIDEOJS: WARN: Invalid playlist STREAM-INF detected. Missing BANDWITH attribute
VIDEOJS: WARN: player.dash() is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.hls is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.vhs is deprecated. Use player.tech().vhs instead
<template>
<div id="video-component">
<div class="container--content__full-width-mobile">
<div class="video-headline font--primary font--bold">
<slot name="videoHeadline"></slot>
</div>
<div
class="container--video-player"
:class="{ 'container--video-player__inline': videoInline }"
>
<div ref="playerElement" :id="playerId" class="video-player"></div>
<div v-if="hasTranscript" class="transcript-accordion bg--primary">
<div
class="accordion"
:key="accordion"
v-for="(row, accordion) in accordionRows"
>
<div
class="accordion-title"
v-on:click="
row.open = !row.open;
rotateIcon = !rotateIcon;
"
>
<div class="l-accordion-title">
<p>Reveal Video Transcript</p>
<i
class="fas fa-chevron-down transition-fast"
:class="{ rotateIcon }"
aria-hidden="true"
></i>
</div>
<!-- /.l-accordion-title -->
</div>
<div class="accordion-content" v-if="row.open">
<slot name="videoTranscript"></slot>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import video from "~/mixins/video/videos.js";
export default {
name: "VideoPlaylist",
mixins: [video],
props: {
videoInline: {
type: Boolean,
required: false,
default: false
},
videoId: {
type: String,
required: true
},
hasTranscript: {
type: Boolean,
required: false
},
autoPlay: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
accordionRows: {
videoTranscript: {
open: false
}
},
rotateIcon: false
};
},
computed: {
playerId() {
return `videoPlayer_${this._uid}`;
}
},
mounted() {
this.$nextTick(() => {
this.$brightcovePlayerLoader({
refNode: `#${this.playerId}`,
accountId: "2272822669001",
playerId: "DMcAHJ5QL",
embedId: "default",
videoId: this.videoId,
options: {
aspectRatio: "16:9",
autoplay: this.autoPlay
}
}).then(data => {
console.log(`[VideoPlayer.vue] init player.then data:`);
console.log(data);
});
});
this.stopVideo();
}
};
</script>
Im fetching a feed with fetch, but somehow my vue app does not render it i have tried diffrent things but nothing seems to work for me.
<section id="vue-instagram" class="instagram">
<div class="instagram__col" v-for="item in feed">
<div class="instagram__col__picturebox">
<img v-if="item.media_url.indexOf('.mp4') == -1" v-bind:src="item.media_url"/>
<video v-if="item.media_url.indexOf('.mp4') > 0" loop preload muted controls style="width:100%;">
<source v-bind:src="item.media_url" />
</video>
</div>
<div class="instagram__col__description">
<div class="instagram__col__descroption--icon">
<img src="images/insta.png"/>
</div>
<div class="instagram__col__descroption--text">
{{item.caption.substring(0,90)}}...
<div class="hashtags bold-text">
{{item.caption.substring(item.caption.indexOf('#'), item.caption.length).split(' ').slice(0,5).join(' ')}}
</div>
</div>
</div>
</div>
</section>
var app = new Vue({
el: '#vue-instagram',
data:() => ({
loading: false,
feed: [],
}),
}, created: async () => {
var response = await fetch("URL_TOSERVER", {
method: "POST",
});
var {data} = await response.json();
this.feed = data;
console.log(data);
});
If I call this.feed in chrome it displays the data but if I drill into app.data its empty.
The solution was to extract the call as a method
new Vue({
el: '#vue-instagram',
data: {
loading: false,
feed: [],
},
created: function() {
this.fetchData();
},
methods: {
fetchData: function(){
var self = this;
fetch("http://727.dk.web81.curanetserver.dk/umbraco/api/instagram/index", {
method:"POST"
}).then(function(response){
return response.json();
}).then(function(data){
self.feed = data.data;
});
}
},
computed: {
posts: function() {
return this.feed;
}
}
});
I'm trying to develop a website where i can switch camera from chrome in mobile devices. Current im using vuejs 2 framework and using MediaDevices.getUserMedia() to take image. From here i understand how am i gonna use my code. Individually both of front and back camera working. But where im trying to switch between then its not working. Here is my code:
<template>
<div class="container" id="scanIdCardPage">
<div class="scanIdCardDiv">
<div class="scanCardContainer" v-show="afterTakingPhoto">
<video ref="video" id="video" :style="{width: divWidth}" autoplay></video>
<canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas>
</div>
</div>
</div>
<div class="takePhotoBtnDiv">
<div>
<button type="button" class="btn btn-info" #click="camera('environment')">Back Camera</button>
<button type="button" class="btn btn-info" #click="camera('user')">front Camera</button>
</div>
</div>
</div>
</template>
export default {
data() {
video: {},
front: true
},
methods: {
Camera() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: (this.front? "user" : "environment") }}).then(stream => {
this.video.src = window.URL.createObjectURL(stream);
this.video.play();
});
}
},
changeCamera() {
this.front = !this.front;
}
},
mounted() {
this.Camera();
}
}
Can anyone help me out how do i change the camera? TIA
I got my solution. MediaDevices.getUserMedia() can't directly change video facingMode. First you have to stop the running video stream. And then change the video facingMode. Here is my code:
export default() {
data() {
},
methods: {
camera(face) {
this.stop();
this.gum(face);
},
stop() {
return video.srcObject && video.srcObject.getTracks().map(t => t.stop());
},
gum(face) {
if(face === 'user') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: face}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
if(face === 'environment') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: face}}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
}
},
mounted() {
this.camera('environment');
},
}
On my website you can upload a dog with attributes and images.
Vuejs is the frontend and Laravel the backend.
I am using this vue-dropzone component in my project to upload images.
The problem
I want to upload the images and the attributes of a dog at the same time (when the user clicks the submit button), so that the image files can be linked to the dog's id in the database.
Laravel function to register a new dog (route: 'api/dogs')
public function store(Request $request)
{
$attributes = [
'name' => $request->input('name'),
'type' => $request->input('dogType'),
...
];
$dogId = Dog::insertGetId($attributes);
// Upload files
if ($request->hasFile('files')) {
// getting all files
$files = $request->file('files');
// Count files to be uploaded
$file_count = count($files);
// start count how many uploaded
$uploadcount = 0;
if($uploadcount == $file_count) {
return true;
} else {
FileController::store($request, 0, 0, $dogId, $files, $uploadcount);
}
}
return $dogId;
}
Dropzone component (Formdropzone)
<template>
<div>
<dropzone
:id="this.id"
:url="this.url"
:accepted-file-types='"image/*"'
:use-font-awesome="true"
:preview-template="template"
:auto-process-queue="false" <----
:upload-multiple="true"
:parallel-uploads=100
:max-files=100
#vdropzone-success="showSuccess"
>
</dropzone>
</div>
</template>
<script>
import Dropzone from 'vue2-dropzone'
export default {
props: {
id: {
type: String,
required: true
},
url: {
type: String,
required: true
}
},
components: {
Dropzone
},
methods: {
showSuccess(file) {
console.log('A file was successfully uploaded')
},
template() {
return `
<div class="dz-preview dz-file-preview">
<div class="dz-image" style="width: 200px;height: 200px">
<img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark"><i class="fa fa-check"></i></div>
<div class="dz-error-mark"><i class="fa fa-close"></i></div>
</div>
`;
}
}
}
</script>
Register dog component
<tab-content title="Images">
<div class="form__input__wrapper">
<span class="label">Images (optional)</span>
<formdropzone url="http://domain.local/api/dogs" ref="dogDropzone" id="dogDropzone"></formdropzone>
</div>
</tab-content>
<script>
import Formdropzone from './Formdropzone'
export default {
data() {
return {
dog:{
name: '',
dogType: '',
...
}
}
},
methods: {
publish() {
this.$http.post('api/dogs', this.dog)
.then(response => {
this.$refs.dogDropzone.processQueue() <----
this.$router.push('/feed')
})
}
},
components: {
'formdropzone': Formdropzone
}
</script>
The error message
Uncaught (in promise) TypeError: Cannot read property 'processQueue' of undefined
I would be very thankful for any kind of help!