TAG
JavaScript
Result
Run
License
<canvas id="mycanvas"></canvas> <video id="myplayer" autoplay controls></video>
window.addEventListener("load", function() { const $elCanvas = document.getElementById("mycanvas"); const $elPlayer = document.getElementById("myplayer"); const $context = $elCanvas.getContext("2d"); let timer, count = 10; function draw() { $context.clearRect(0, 0, $elCanvas.width, $elCanvas.height); $context.font = "50px serif"; $context.fillText(count, 100, 100); } timer = window.setInterval(() => { draw(); count--; if(count < 0) { window.clearInterval(timer); } }, 1000); const $captureStream = $elCanvas.captureStream(30); const $mediaRecorder = new MediaRecorder($captureStream); let aFrame = []; $mediaRecorder.addEventListener("dataavailable", e => { aFrame.push(e.data); }); $mediaRecorder.addEventListener("stop", e => { const $blob = new Blob(aFrame, { "type" : "video/mp4" }); const $videoURL = URL.createObjectURL($blob); $elPlayer.src = $videoURL; $elPlayer.play(); aFrame = []; }); $mediaRecorder.start(); setTimeout(() => { $mediaRecorder.stop(); }, 1000 * 12); });
Console
expand_less
License
License
by DevDic
Close