How to Remove Blank Frames in RecordRTC - javascript

I am stuck on some point. Please help me to figure it out.
When any peer connection (In Video Conferencing) is disconnected and I reconnect them, then a blank frame is added in Recording, I am using RecordRTC and testing it in Chrome 74.0
I think it is happening because When Peer Connection is disconnected then the RecordRTC already have the previous connected data Video Elements, And I just want to remove those blank Elements.
I am attaching the screenshot of Recorded Video please help me to figure it out.
Here in this image, you can see we There are 5 Screens, In which 2, 3, 4 are blank,
Because the Peer Connection is closed and reconnected.
So I want these 2 Working Screens(1, 5) [ 1= Local Stream, 5 = Remote Stream] in my blob or we can say which Recording.
Please help me to figure it out this issue.
Thank you

Please use this solution,
We just need to give the condition to drow the first and last element on the canvas.
Update this code in function drawVideosToCanvas() .
var videosLength = videos.length;
if(videosLength > 2){
videosLength = 2;
}
var fullcanvas = false;
var remaining = [];
var length = videos.length;
videos.forEach(function(video,idx) {
if (!video.stream) {
video.stream = {};
}
if (video.stream.fullcanvas) {
fullcanvas = video;
} else {
if(idx==0 || idx == (length-1)){
if(video.stream.active)
remaining.push(video);
}
}
});

Related

Vimeo video, progress and disable fast forward

I am working on a site used for mandatory instruction. We have to make sure the student watches the video and doesn't fast forward. I would also like to remember the progress the student made in the video in case they need to leave then return later to complete watching.
I have used this JS to remove the ability to fast forward. I'm just not sure how to get the code to remember the progress, then start at that point if the student returns later.
var iframe = document.querySelector("iframe");
var player = new Vimeo.Player(iframe);
var timeWatched = 0;
player.on("timeupdate", function(data) {
if (data.seconds - 1 < timeWatched && data.seconds > timeWatched) {
timeWatched = data.seconds;
}
});
player.on("seeked", function(data) {
if (timeWatched < data.seconds) {
player.setCurrentTime(timeWatched);
}
});
Thanks for any help on this.
you can store the current time in database for future use and then pass to the js whenever user views the video

Preload images - 0 bytes in devtools

I have been trying to preload images in pure Javascript following the ideas of Mark Meyer in https://www.photo-mark.com/notes/image-preloading/, which is exactly what I need.
The function I use is:
function preload(index) {
index = index || 0;
if (index < 10) {
preImage[index] = new Image();
preImage[index].onload = function() { preload(index+1) };
preImage[index].src = "img/IMG" + ("0000"+(index+1)).slice(-4)+"A.png";
};
return;
}
I want to preload images IMG0001A.png through to IMG0009A, in that order. preImage is an empty array.
My problem is that when I see the network activity in Chrome devtools, even though I simulate a slow connection and the cache is disabled, the images show a size of 0 bytes, and, of course, they are 'loaded' just too fast. Can anybody tell me what's going on? thanks in advance
Here is a screenshot of devtools:

Audio Buffering Produces 0 TimeRanges Until Fully Loaded

I have an HTML5 audio player and I'm trying to monitor it's buffering progress until it reaches 100% so I can run it.
music = document.querySelector("#music");
progress = document.querySelector("#progress");
music.addEventListener("progress", function(){
var z = (music.buffered.end(0) / music.duration)*100;
progress.value = z;
}, false);
(Where #progress is an HTML <progress> element.)
When I attempt the above code, I get this error.
Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).
This error has been discussed here, but the code I am using is similar to the code used in the answer, and I am still getting the error.
Here's the weird part: I monitored music.buffered.length, and it only reached 1 when the audio was fully loaded, so for some reason I cannot monitor the buffered length of my audio element.
Here's a rather robust JS Bin to show the problem.
Has anyone else run into this problem? Am I doing something completely wrong here?
You can get buffered value in loadeddata listener:
audio.addEventListener ('loadeddata', function () {
if (typeof (this.buffered) !== 'undefined' && this.buffered.length > 0) {
audio.addEventListener ('progress', function () {
var z = (this.buffered.end (0) / this.duration) * 100;
progress.innerText = z;
});
}
});
keep in mind that it inherits this, not music!
Years down the line, I managed to determine the problem. #dandavis was correct. My server was not supplying metadata about audio files, so the browser had no clue how long an audio file was (or even how big the file was in size) until it was completely downloaded. There was no timerange because there was no information about time supplied at all.
If you're having this problem, make sure your server is supplying EVERYTHING about your audio file.
you might want to try and replace this part:
music.addEventListener("progress", function(){
var z = (music.buffered.end(0) / music.duration)*100;
progress.innerText = z;
}, false);
with this part:
if(music.onprogress){
var z = (music.buffered.end(0) / music.duration)*100;
progress.innerText = z;
};

Seamless HTML5 Video Loop

I have searched extensively to find a solution to this but have not succeeded.
I have created a 4 second video clip that loops seamlessly in an editor.
However when the clip runs in a page via Safari, Chrome or Firefox there is a small but noticeable pause in the playback from end back to beginning.
I have tried using the loop and preload attributes both together and independently.
I have also tried the following javascript:
loopVid.play();
loopVid.addEventListener("timeupdate", function() {
if (loopVid.currentTime >= 4) {
loopVid.currentTime = 0;
loopVid.play();
}
}
But in all cases the momentary pause remains and spoils the effect.
I'm open to any ideas?
Since this question is a top search result in Google, but doesn't "technically" have an answer yet, I'd like to contribute my solution, which works, but has a drawback. Also, fair warning: my answer uses jQuery.
It seems the slight pause in the video loop is because it takes time for html5 video to seek from one position to another. So it won't help anything to try to tell the video to jump to the beginning when it ends, because the seek will still happen. So here's my idea:
Use javascript to clone the tag, and have the clone sit hidden, paused, and at the beginning. Something like this:
var $video = $("video");
var $clone = $video.clone();
$video.after($clone);
var video = $video[0];
var clone = $clone[0];
clone.hidden = true;
clone.pause();
clone.currentTime = 0;
Yes, I used clone.hidden = true instead of $clone.hide(). Sorry.
Anyway, after this the idea is to detect when the original video ends, and then switch to the clone and play it. That way there is only a change in the DOM as to which video is being shown, but there is actually no seeking that has to happen until after the clone starts playing. So after you hide the original video and play the clone, you seek the original back to the beginning and pause it. And then you add the same functionality to the clone so that it switches to the original video when it's done, etc. Just flip flopping back and forth.
Example:
video.ontimeupdate = function() {
if (video.currentTime >= video.duration - .5) {
clone.play();
video.hidden = true;
clone.hidden = false;
video.pause();
video.currentTime = 0;
}
}
clone.ontimeupdate = function() {
if (clone.currentTime >= clone.duration - .5) {
video.play();
clone.hidden = true;
video.hidden = false;
clone.pause();
clone.currentTime = 0;
}
}
The reason I add the - .5 is because in my experience, currentTime never actually reaches the same value as duration for a video object. It gets pretty close, but never quite there. In my case I can afford to chop half a second off the end, but in your case you might want to tailor that .5 value to be as small as possible while still working.
So here's my entire code that I have on my page:
!function($){
$(document).ready(function() {
$("video").each(function($index) {
var $video = $(this);
var $clone = $video.clone();
$video.after($clone);
var video = $video[0];
var clone = $clone[0];
clone.hidden = true;
clone.pause();
clone.currentTime = 0;
video.ontimeupdate = function() {
if (video.currentTime >= video.duration - .5) {
clone.play();
video.hidden = true;
clone.hidden = false;
video.pause();
video.currentTime = 0;
}
}
clone.ontimeupdate = function() {
if (clone.currentTime >= clone.duration - .5) {
video.play();
clone.hidden = true;
video.hidden = false;
clone.pause();
clone.currentTime = 0;
}
}
});
});
}(jQuery);
I hope this will be useful for somebody. It works really well for my application. The drawback is that .5, so if someone comes up with a better way to detect exactly when the video ends, please comment and I will edit this answer.
I've found that Firefox will stutter while looping if I'm using mp4 or ogv files. I changed the code in my page to try using a webm file first instead, and suddenly the stutter was gone and the video looped seamlessly, or at least close enough that I didn't see an issue. If you haven't given that a shot, it could be worth it to try converting the file to a webm format and loading that instead.

Hybrid app using phoneGap to Record video and split every 10min

I am trying to record video on iPhone using phoneGap mediaCapture API, which records and saves it to media files with in the application perfectly if I want to split the video and save recording every 10 minutes so as develop a dash cam application.
I tried this code which records for 10 minutes and automatically stops but actually I want this happen every time 10min continuously 5 times as i set limit to 5.
$(document).ready(function(){
$("#rec").click(function(){
var captureSuccess = function(mediaFiles)
{
var i, path, len;
for (i = 0,len = mediaFiles.length; i < len; i += 1)
{
path =mediaFiles[i].fullPath; // do something interesting with the file
}
};
// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'CaptureError');
};
// start video capture
navigator.device.capture.captureVideo(captureSuccess, captureError, {
limit:5, duration:600 });
});
});
You should be able to just start another navigator.device.capture.captureVideo(.. ..) in the captureSuccess callback handler
The easiest way would be to put the original one in a function and call that function in the captureSuccess function

Categories

Resources