我有一个使用 javascript、html、css 播放动画的网络应用程序。有没有一种方法可以将其录制到视频文件中,以便用户无需访问网站即可下载和观看动画?
最佳答案
是的,使用 Canvas和 MediaRecorder .
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
function draw (){
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
chunks = [];
var videoURL = URL.createObjectURL(blob);
video.src = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);
<canvas width="200" height="200"></canvas>
<p>Wait for 5 seconds...</p>
<video autoplay controls download></video>
来源:How to record a canvas element by Alexis Delrieu
注意:在撰写本文时,根据 CanIUse.com,全局约 95% 的用户可以使用 MediaRecorder .
https://stackoverflow.com/questions/66592646/