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

Hey! Is this script still working? I cant get it to work. Is there a guide or a readme I can refer to?

@DeadFrostt Hi, yes it is still working, I tested it with latest Firefox 135.0.1 64-bit Linux version from Mozilla deb repository. Instructions are at the beginning of the script and in the comment https://gist.github.com/baptx/8a1549d91996a37378faca159b3adc17?permalink_comment_id=4726941#gistcomment-4726941.