Canvas の録画方法

Canvas を何かを作ったらSNSに載せたくなる。

ということで、Canvasでのムービー録画のコードを確認しました。

録画はできたのですが、ガタガタしてます。。

ガタガタの改善策はおいおい確認します。

画面をクリック後、録画開始し 9 秒間録画して停止するプログラムです。

↓ canvas_recording

	(() => {
	window.addEventListener(
	'load',
	() => {
	let canvas = document.querySelector('canvas');
	let ctx = canvas.getContext('2d');

	let x = canvas.width / 2;
	let v = -1;

	loop();

	function loop() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	ctx.beginPath();
	ctx.arc(x, canvas.height / 2, 30, 0, Math.PI * 2, false);
	ctx.fillStyle = 'red';
	ctx.fill();

	x = x + 10 * v;

	if (x < 0 \|\| x > canvas.width) {
	v = v * -1;
	}

	requestAnimationFrame(loop);
	}

	canvas.addEventListener('click', rokuga, false);

	function rokuga() {
	let stream = canvas.captureStream(25);
	let recordedChunks = [];

	console.log(stream);

	let options = { mimeType: 'video/webm; codecs=vp9' };
	mediaRecorder = new MediaRecorder(stream, options);

	mediaRecorder.ondataavailable = handleDataAvailable;
	mediaRecorder.start();

	function handleDataAvailable(e) {
	console.log('data-available');
	if (e.data.size > 0) {
	recordedChunks.push(e.data);
	console.log(recordedChunks);
	download();
	} else {
	console.log('error');
	}
	}

	function download() {
	let blob = new Blob(recordedChunks, {
	type: 'video/webm',
	});
	let url = URL.createObjectURL(blob);
	let a = document.createElement('a');
	document.body.appendChild(a);
	a.style = 'display:none';
	a.href = url;
	a.download = 'test.webm';
	a.click();
	window.URL.revokeObjectURL(url);
	}

	setTimeout((e) => {
	console.log('stopping');
	mediaRecorder.stop();
	}, 9000);
	}
	},
	false
	);
	})();

いろんなサイトを調べて作ったので、何がなんだかわかっていない部分もありますが、とりあえず良しとします。

RSP