我可以用 Javascript 创建视频吗？答案

【问题标题】：Can I create a video with Javascript?我可以用 Javascript 创建视频吗？
【发布时间】：2021-06-10 01:01:42
【问题描述】：

我有一个使用 javascript、html、css 播放动画的网络应用程序。有没有办法可以将其写入视频文件，以便用户无需访问网站即可下载和观看动画？

【问题讨论】：

不，简而言之...
@seesharper MediaRecorder?
@ChrisHappy 哈！生活和学习:)
iOS可以录屏，按钮需要添加到你的dashboardsupport.apple.com/en-us/HT207935
@seesharper 绝对！我也想发表评论，但很好奇。我觉得这个新功能很酷:)

【解决方案1】：

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>
<video autoplay controls download></video>

来源：How to record a canvas element by Alexis Delrieu

注意：在撰写本文时，根据CanIUse.com，只有约 75% 的全球用户可以使用它。

【讨论】：

请记住，并非所有浏览器都支持这一点：Can I use?