canvas转video

最新推荐文章于 2023-03-15 11:06:24 发布

let user = 百晓生

最新推荐文章于 2023-03-15 11:06:24 发布

阅读量373

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/WH_Crx/article/details/127676386

版权

    
	let canvasDom = document.getElementById('main').children[0].children[0] ;//获取到渲染echarts的canvas元素
    var video$ = document.querySelector('video');
    // var stream = canvasDom.captureStream(60);
    const recording = this.record(canvasDom, 10000)
    // 
    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()
        })
      },
       record(canvas, time) {
    var recordedChunks = [];
    return new Promise(function (res, rej) {
        var stream = canvas.captureStream(25 /*fps*/);
        var 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);
        }
    })

思路：
canvas的captureStream属性将其动点捕捉转换为视频帧，声明一个recordedChunks 视频池，将帧放入池 MediaRecorder用录制对象去监听并实现帧入流并根据录制的状态去回调接下来的操作
注意：转载请标明出处，有问题可以直接私聊我