Canvas録画

canvas_recording.js

(() => {
	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
	);
})();