I am working with a video stream with embedded subtitles, and found that I can fetch the embedded textTrack data on the onLoad prop:
<Video
source={{uri: currentStream}}
onLoad={videoLoad}
/>
...
const onLoad = (e) => {
console.log(e);
}
But since it's a stream the programmes and subtitles change, so I need to find a way to periodically fetch the textTrack data so I can keep it updated, but I can't find any method for this. Better yet, if there is a way to detect this change so I don't need to poll for it would be great!
Any help appreciated
Related
I'm working on this app that does not always hold the video content on the device.
The Video will be downloaded, and then a path to the video will be on json objects that need to be inputed into a require. (or thats how I do it right now)
This is the code for the video:
import jsonFileExercise from '../../../assets/controller/data/getNextExerciseBySectionId.json'
var videoPath = jsonFileExercise.content.path
return (
<Video
source={require(videoPath)}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
//shouldPlay
useNativeControls
isLooping
style={styles.backgroundVideo}
/>
)
This is the JSON file
{
"exerciseId": 1,
"content": {
"type": "video",
"path": "../video/content/testvideo2.mp4"
}
}
I want to be able to change the path in the JSON file and then load a different video.
Does anyone know a better way of having Dynamic Video that is loaded from storage?
Another problem is going to be using images from asyncStorage, but the ideal solution would be something that uses both images from AsyncStorage and updating images dynamically.
Similar posts: React Native: require() with Dynamic String?
But it did not show a solution for the issue.
I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.
My RTC session was started with text only. And video is added by user when needed (renegotiation)
navigator.getUserMedia({ video: true, audio: false }, function (myStream) {
localVideo[0].srcObject = myStream;
myConn.addStream(myStream);
}, function (error) {
console.log(error);
});
When user do not need the video session anymore, I remove using:
var tracks = localVideo[0].srcObject.getTracks();
tracks.forEach(function (t) {
t.stop();
});
myConn.removeStream(localVideo[0].srcObject);
localVideo[0].srcObject = null;
Everything is working fine, until I try to add the video again I noticed that the createOffer() request size is getting larger and larger.
Seems to me that WebRTC didn't forget about the previous stream, and is adding to the offer again and again. Or maybe my way of removing a video stream / track is wrong?
This is a known issue see this thread on the W3C list.
The best way to get around this is to use replaceTrack and is suggested in the thread.
Note: It is still possible to prevent the list of transceivers from growing
by *manually* recycling them using transceiver.sender.replaceTrack() and
transceiver.direction, but that still wastes resources on transceivers
currently not used, and implies you probably shouldn't use
transceiver.stop() in most cases.
Also see the "Unified Plan" Transition Guide
I regularly download images as blob and show them in the html or download the to the HD. Most of the time they show correctly. But sometimes they are loaded for 50% or with weird background colours. Like these examples (last one is normal).
Here is how I download the images. I use the aurelia-fetch-client in the aurelia framework for this.
Html:
<div css="background-image: url(${ imageUrl })"></div>
Javascript:
const blob = await this.client.fetch(`${this.endpoint}/attachments/${this.attachment.name}`,
{
method: 'GET'
}).then((x) => x.blob());
this.imageUrl = URL.createObjectURL(blob);
Any idea what is causing this? It happens randomly to images that I show in the webbrowser or download to the HD. Any help is appreciated.
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});