Streams : Locally record Stream

Here is a description of the different steps to record a stream locally on the device.

Create your stream

Check our tutorial on Select Media if you need details about media selection and stream creation

Start recording :

Check our Stream API reference to startRecord and MediaRecorderOptions for optional possibilities

        localStream.startRecord().then(function () {
            console.log("Recording started");
        }).catch(function (error) {
            // error
            console.error('startRecord failed :', error);
        });
    

For instance, if you need to record using VP9, use the following option :

        var options = {mimeType: 'video/webm;codecs=vp9'};
        localStream.startRecord(options).then(function () {
            console.log("Recording started");
        }).catch(function (error) {
            // error
            console.error('startRecord failed :', error);
        });
    

Stop recording :

Check our Stream API reference to stopRecord

        console.log("stopRecording");
        localStream.stopRecord().then(function (recordedVideoBuff) {
            console.log("Recording stopped");
            recordedVideoBuffer = recordedVideoBuff
            console.log("recordedVideoBuffer :", recordedVideoBuffer);
        }).catch(function (error) {
            // error
            console.error('stopRecording failed :', error);
        });
    

Pause recording :

Check our Stream API reference to pauseRecord

        console.log("pauseRecording");
        localStream.pauseRecord().then(function () {
            console.log("Recording paused");
        }).catch(function (error) {
            // error
            console.error('pauseRecord failed :', error);
        });
    

Resume recording :

Check our Stream API reference to resumeRecord

        console.log("resumeRecording");
        localStream.resumeRecord().then(function () {
            console.log("Recording resumed");
        }).catch(function (error) {
            // error
            console.error('resumeRecord failed :', error);
        });
    

Play recording :

To play your recorded file :

        if (recordedVideoBuffer !== null) {
            var recordedVideo = document.querySelector('video#recordedVideo');
            recordedVideo.src = window.URL.createObjectURL(recordedVideoBuffer);
            recordedVideo.play();
        } else {
            console.log("no recorded video ready");
        }
    

Downlaod recording :

To download your recorded file :

        // Click on download button
        $('#download').on('click', function () {
            console.log("download");
            if (recordedVideoBuffer !== null) {
                var url = window.URL.createObjectURL(recordedVideoBuffer);
                var a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = 'record_ApiRTC.webm';
                document.body.appendChild(a);
                a.click();
                setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
                }, 100);
            } else {
                console.log("no recorded video ready");
            }
        });
    

Live Demo