WebRTC and video blob record (compatible with DRM and any videos like Facebook / Instagram stories)

webrtc_video_blob_record.js

/* 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();

@dreamflasher I updated the script by configuring the video bitrate to 10 Mbps like documented on https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder.
This allows recording in higher quality. I tested with Firefox 152 for the FIFA world cup since there was an ad I wanted to record.

@lthrhx If you want to try recording as mp4, you also need to configure it in the options parameter of MediaRecorder (which was not used in the previous versions of my script).
But I was not able to create a working mp4 recording with Firefox. And the webm recording is always in vp8. It seems to be a web browser limitation but recording in webm vp8 should be fine now that I updated the script to use a higher bitrate.