webrtc_video_blob_record

/* Customized code to allow WebRTC record on existing page or HTML5 video blob download (based on https://github.com/webrtc/samples/blob/409d5631f38f2bdc4dafb5275d1bc77738fbb1ba/src/content/getusermedia/record/js/main.js)
 * Recording will start when executing this script and you will have to execute manually startDownload() function when needed in web console with or without stopRecording()
 * Recording should ideally start before playing video manually and in case controls are hidden, you can record from the start with a command like document.getElementsByTagName("video")[0].currentTime = 0
 * By default, the script targets the first video element document.getElementsByTagName("video")[0] but you can change the code if needed.
 */

// If there is an error due to DRM, capture the stream by executing the following 2 lines before playing / loading the video:
var video = document.getElementsByTagName("video")[0];
var stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();

var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
var mediaRecorder;
var recordedBlobs;
var sourceBuffer;

function startDownload() {
    var blob = new Blob(recordedBlobs, {type: 'video/webm'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
}

function handleSourceOpen(event) {
    console.log('MediaSource opened');
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
    console.log('Source buffer: ', sourceBuffer);
}

function handleDataAvailable(event) {
    console.log('handleDataAvailable', event);
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

function startRecording() {
    recordedBlobs = [];

    /* Setting high quality options since Firefox was recording in low quality:
    https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
    "If bits per second values are not specified for video and/or audio, the default adopted for video is 2.5Mbps or 10 Mbps, depending on the browser.
    The audio default is adaptive, depending upon the sample rate and the number of channels." */
    var options = {
      audioBitsPerSecond: 128000,
      videoBitsPerSecond: 10000000,
      mimeType: "video/webm",
    };

    try {
        mediaRecorder = new MediaRecorder(stream, options);
    } catch (e) {
        console.error('Exception while creating MediaRecorder:', e);
        return;
    }

    mediaRecorder.onstop = (event) => {
        console.log('Recorder stopped: ', event);
        console.log('Recorded Blobs: ', recordedBlobs);
    };
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(1000); // collect 1000ms of data (to be able to download every second even if recording is not stopped)
    console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
    mediaRecorder.stop();
}

startRecording();