我想将 HTML5 canvas 中的动画转换为可以上传到 YouTube 的视频文件。是否有任何类型的屏幕捕获 API 或其他东西可以让我以编程方式执行此操作?
最佳答案
回到2020
使用 MediaRecorder 解决了它应用程序接口(interface)。它的构建正是为了做到这一点。
这是一个记录 X 毫秒 Canvas 视频的解决方案 您可以使用按钮 UI 来扩展它以启动、暂停、恢复、停止、生成 URL。
function record(canvas, time) {
var recordedChunks = [];
return new Promise(function (res, rej) {
var stream = canvas.captureStream(25 /*fps*/);
mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm; codecs=vp9"
});
//ondataavailable will fire in interval of `time || 4000 ms`
mediaRecorder.start(time || 4000);
mediaRecorder.ondataavailable = function (event) {
recordedChunks.push(event.data);
// after stop `dataavilable` event run one more time
if (mediaRecorder.state === 'recording') {
mediaRecorder.stop();
}
}
mediaRecorder.onstop = function (event) {
var blob = new Blob(recordedChunks, {type: "video/webm" });
var url = URL.createObjectURL(blob);
res(url);
}
})
}
使用方法:
const recording = record(canvas, 10000)
// play it on another video element
var video$ = document.createElement('video')
document.body.appendChild(video$)
recording.then(url => video$.setAttribute('src', url) )
// download it
var link$ = document.createElement('a')
link$.setAttribute('download','recordingVideo')
recording.then(url => {
link$.setAttribute('href', url)
link$.click()
})
关于html - 将 HTML5 Canvas 序列转换为视频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19235286/