Canvas录制为webm视频文件

最新推荐文章于 2023-11-07 11:01:09 发布

GarenWang

最新推荐文章于 2023-11-07 11:01:09 发布

阅读量582

点赞数

分类专栏：前端 JavaScript 文章标签： Canvas MediaRecorder 视频录制 webm HTML5

本文链接：https://blog.csdn.net/weixin_37695006/article/details/112958665

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

这段代码可以将Canvas录制为webm视频文件

var canvas = document.getElementById("mycanvas");
var stream = canvas.captureStream();
var recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

console.log("开始录制");
const data = [];
recorder.ondataavailable = function (event) {
    if (event.data && event.data.size) {
        data.push(event.data);
    }
};
recorder.onstop = () => {
	//结束录制时下载视频
    const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
    var element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', "");
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
};

//录制开始
recorder.start();

//5秒后录制结束
setTimeout(() => {
    recorder.stop();
    console.log("结束录制");
}, 5000);