how to solve problem for video saving time

[viveksatle]

Hello @muaz-khan , Here i have problem, how to solve video saving time problem, i want click on stop and than video are save just second,bcoz we are creating 1 hour video it's taking more time for save/

Thank-you

[viveksatle]

Hello @muaz-khan, Hello muaz, i want 1 hour video record and i wants video save every 20 sec, bcoz 1 hour video so much time for saving. give me any solutions for this.

or can we store blob data of video and audio on direct database.

[viveksatle]

@muaz-khan have you any idea about above query from my side?

[muaz-khan]

Please check MediaStreamRecorder.js:

• https://github.com/streamproc/MediaStreamRecorder

It implements latest MediaRecorder API standards to return intervals based blobs using ondataavailable event and requestData method.

Example: Record audio in chrome and get blob after every two minutes:

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
    audio: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'audio/ogg';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };
    mediaRecorder.start(2 * 60 * 1000); // -------- 2 minutes (260000 milliseconds)
}

function onMediaError(e) {
    console.error('media error', e);
}
</script>

You can even use mediaRecorder.stop to stop recording:

btnStopRecording.onclick = function() {
    mediaRecorder.stop();
};

You can even use ConcatenateBlobs.js to merge/concatenate multiple blobs in single object:

• https://github.com/muaz-khan/ConcatenateBlobs

[viveksatle]

@muaz-khan
there no video recording it's only audio, we want both and every 10-20 sec video save and again start video recording but no popup for allow camera,bcoz i am recording 1-2 hours.

[viveksatle]

@muaz-khan can we store blob data on direct database field?

Reply if you available.

[muaz-khan]

To write to disk:

• https://github.com/muaz-khan/RecordRTC/blob/master/dev/DiskStorage.js

MediaStreamRecorder can not only record audio/video but also gif.

Media capturing or "stopping" is up-to-you. It means that, MediaStreamRecorder isn't caring about how stream is captured; how often it is captured; how quickly it is stopped or who stops it.

It means that, the stream object you'll pass over MediaStreamRecorder constructor will be used until you call stop method.

Please check MediaStreamRecorder docs and demos; and you'll find the solution.

PS. Both RecordRTC and MediaStreamRecorder aren't trying to capture/stop streams themselves. Streams are managed by end-users's codes.

Regarding DiskStorage.js, please check these comments:

• http://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/#comment-1725337481

[viveksatle]

yes, i am checking.Thanks @muaz-khan

[viveksatle]

@muaz-khan

How to save MediaStreamRecorder video or audio on server.

[muaz-khan]

Use FormData & XHR:

• https://github.com/streamproc/MediaStreamRecorder#how-to-upload-recorded-files-using-php

A few other examples that can be modified to work with MediaStreamRecorder:

• https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg
• https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP
• https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs
• https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio

[viveksatle]

Thanks @muaz-khan...it's working

[viveksatle]

Hello muaz, Can we implement audio and video both are one file with 15 secs make audio and video?

[muaz-khan]

You can record both audio/video in single file (in Firefox), where you can set interval to 15*1000 i.e. 15 seconds.

• https://github.com/streamproc/MediaStreamRecorder

<script src="//cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

<script>
var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };
    mediaRecorder.start(15 * 1000); // 15 seconds
}

function onMediaError(e) {
    console.error('media error', e);
}
</script>

[viveksatle]

and chrome?

[muaz-khan]

For chrome, you can use these demos along with MediaStreamRecorder.js:

• https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg

Or server-side demos (use MediaStreamRecorder instead of RecordRTC):

• https://github.com/muaz-khan/RecordRTC

[viveksatle]

hey muaz your script are really help full..but i want both file create every 15 sec. is it possible?

[viveksatle]

hello @muaz-khan, https://www.webrtc-experiment.com/msr/audio-recorder.html audio is creating but i am not getting any sound / voice created audio. what is the problem? Reply must

[viveksatle]

ReferenceError: xhr is not defined

it's error occurs during save video on firefox.Please give me perfect solution muaz

and also reply above question

[viveksatle]

R u there?

[viveksatle]

?

[viveksatle]

Hello @muaz-khan, can u help me?

[viveksatle]

Bhaijan you have any solution?

[muaz-khan]

https://www.webrtc-experiment.com/msr/audio-recorder.html audio is creating but i am not getting any sound / voice created audio. what is the problem?

This seems working for me in Firefox.

hey muaz your script are really help full..but i want both file create every 15 sec. is it possible?

Please try MediaStreamRecorder.js. Blob will be generated after specific interval, and you can push Blob to server using XHR/POST & FormData.

Same demo works both over Both Chrome & Firefox.

[viveksatle]

hello muaz, what is solutions for chrome? i want create both file with mediaStreamRecorder at the same time, can u give me any solution?

[muaz-khan]

var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var audioRecorder = new MediaStreamRecorder(stream);
    var videoRecorder = new MediaStreamRecorder(stream);

    audioRecorder.mimeType = 'audio/wav';
    videoRecorder.mimeType = 'video/webm';

    audioRecorder.ondataavailable = videoRecorder.ondataavailable = function(blob) {
        // POST/PUT "Blob" using FormData/XHR2
        var blobURL = URL.createObjectURL(blob);
        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
    };

    audioRecorder.start(3000);
    videoRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

If you want to get both audio/video blobs in the same ondataavailable request, then it requires a little bit extra modifications. E.g.

var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var audioRecorder = new MediaStreamRecorder(stream);
    var videoRecorder = new MediaStreamRecorder(stream);

    audioRecorder.mimeType = 'audio/wav';
    videoRecorder.mimeType = 'video/webm';

    var audioBlobs = [];
    var videoBlobs = [];

    audioRecorder.ondataavailable = function(blob) {
        audioBlobs.push(blob);

        if (audioBlobs.length == videoBlobs.length) {
            var audioBlob = audioBlobs[audioBlobs.length];
            var videoBlob = videoBlobs[videoBlobs.length];
            // do XHR here
        }

    };

    videoRecorder.ondataavailable = function(blob) {
        videoBlobs.push(blob);

        if (audioBlobs.length == videoBlobs.length) {
            var audioBlob = audioBlobs[audioBlobs.length];
            var videoBlob = videoBlobs[videoBlobs.length];
            // do XHR here
        }
    };

    audioRecorder.start(3000);
    videoRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

[viveksatle]

   document.querySelector('#start-recording').onclick = function() {
            this.disabled = true;
           navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
        };

        document.querySelector('#stop-recording').onclick = function() {
            this.disabled = true;
            mediaRecorder.stop();
        };

        var mediaConstraints = {
audio: true,
video: true

}; //navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) { var audioRecorder = new MediaStreamRecorder(stream); var videoRecorder = new MediaStreamRecorder(stream);

audioRecorder.mimeType = 'audio/wav';
videoRecorder.mimeType = 'video/webm';

var audioBlobs = [];
var videoBlobs = [];

audioRecorder.ondataavailable = function(blob) {
    audioBlobs.push(blob);

    if (audioBlobs.length == videoBlobs.length) {
        var audioBlob = audioBlobs[audioBlobs.length];
        var videoBlob = videoBlobs[videoBlobs.length];
        // do XHR here
    }

};
            videoRecorder.ondataavailable = function(blob) {
    videoBlobs.push(blob);

    if (audioBlobs.length == videoBlobs.length) {
        var audioBlob = audioBlobs[audioBlobs.length];
        var videoBlob = videoBlobs[videoBlobs.length];
        // do XHR here
    }
};

            var timeInterval = document.querySelector('#time-interval').value;
            if(timeInterval) timeInterval = parseInt(timeInterval);
            else timeInterval = 5 * 1000;

             // get blob after specific time interval
            // mediaRecorder.start(timeInterval);
             audioRecorder.start(timeInterval);
videoRecorder.start(timeInterval);

            document.querySelector('#stop-recording').disabled = false;
        }

       function onMediaError(e) {
console.error('media error', e);

}

        var videosContainer = document.getElementById('videos-container');
        var index = 1;

        // below function via: http://goo.gl/B3ae8c
        function bytesToSize(bytes) {
           var k = 1000;
           var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
           if (bytes === 0) return '0 Bytes';
           var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)),10);
           return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        }

        // below function via: http://goo.gl/6QNDcI
        function getTimeLength(milliseconds) {
            var data = new Date(milliseconds);
            return data.getUTCHours()+" hours, "+data.getUTCMinutes()+" minutes and "+data.getUTCSeconds()+" second(s)";
        }

        window.onbeforeunload = function() {
            document.querySelector('#start-recording').disabled = false;
        };

[viveksatle]

Hello bhaijan, i got error with this code.

[viveksatle]

plz reply me if u can possible.

[viveksatle]

Hello Muaz, when i start recording get some noise which is very irritating.so i want remove thus noise, when recording start. Please give me any solution. thanks

[PradeepKumar786]

hello @muaz-khan

could u please show me a demo that record and play video every 20 seconds in new window once we click record button.

I want to record and save video every 20 seconds.

[venkatraj1992]

hello @muaz-khan How can we use timeslice and ondataavailable when we are recording screen+audio. Right now i am using setinterval to save recording on every 20 seconds but it taking lot of memory and browser throwing out not enough memory exception. My code as below

captureScreen(function (screen) { keepStreamActive(screen); var blob;

        screen.width = window.screen.width;
        screen.height = window.screen.height;
        screen.fullcanvas = true;

        capturedScreen_record = screen;
        allstreams.push(screen);
        streamCaptured_record = allstreams;
        recorder = RecordRTC(allstreams, {
            type: 'video',
            mimeType: 'video/webm\;codecs=vp9',  
            bufferSize: 0
        });            

        recorder.startRecording();

        //save recording every 20 seconds 
        RecordInterval = setInterval(function () {            
            recorder.stopRecording(function () {
                 blob = recorder.getBlob();
            });                
            recorder.clearRecordedData();
            recorder.startRecording();
            PostBlob(blob);
            console.log("Recording saved")               
        }, total_recordMinutes);          
}); 

Is it possible to use timeslice and ondataavailable on recording screen aswell? Please help me

[muaz-khan]

@venkatraj1992 Please check this:

• https://www.webrtc-experiment.com/RecordRTC/simple-demos/ondataavailable.html

[venkatraj1992]

Thanks @muaz-khan...

[ahtshama]

Hi @muaz-khan, i am using MediaStreamRecorder in my web application, i am able to record the audio/video in the Chrome and firefox browsers, also i can record the audio on the safari browser but not able to record the video in the safari. Also i am not able to record audio/video in the internet explorer and edge browsers. Please suggest what might be the issue.