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 = [];

	try {
		mediaRecorder = new MediaRecorder(stream);
	} 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();

Still working with Firefox 138.0.1, however the script doesn't honor a different codec. When changing
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
to
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
The file downloaded is still encoded as vp8. I also tried avc1 as that is the source codec, but it still results in vp8 encoded file.

Also Changing the filename from test.webm to download.webm works, but changing the video container and extension from webm to mp4 doesn't . When you are prompted to the save file it is always ".webm"