09. 将canvas绘图动画录制为视频

哟哟-

已于 2023-03-15 11:06:44 修改

阅读量697

点赞数

分类专栏：前端进阶文章标签：音视频动画 javascript html vue.js

于 2023-03-15 11:06:24 首次发布

本文链接：https://blog.csdn.net/qq_29517595/article/details/129548326

版权

前端进阶专栏收录该内容

52 篇文章 3 订阅

订阅专栏

背景

使用canvas绘制一个动画，不使用录屏软件，将动画录制为视频

方法

canvas对象所支持的captureStream方法，会返回一个stream对象，可以通过这个stream对象，来创建一个MediaRecorder进行录屏

代码实现

页面标签

	<div class="recorder">
        <canvas id="canvas" width="400" height="400"></canvas>
        <video controls class="vido-node" type="video/mp4"> </video>
    </div>

canvas绘制动画

const draw = (rotation = 0) => {
    const canvas = document.querySelector('canvas') as HTMLCanvasElement
    const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D
    const  { width, height } = canvas;
    (ctx as any).fillStyle = 'red'
    ctx.clearRect(0,0,1000,1000)
    ctx.save()
    ctx.translate(width / 2, height / 2)
    ctx.rotate(rotation)
    ctx.translate(-width / 2, -height / 2)
    ctx.beginPath()
    ctx.rect(200, 200, 200, 200);
    ctx.fill()
    ctx.restore()
}

const update = (t) => {
    draw(t / 500)
    requestAnimationFrame(update)
}
update(0)

实施录屏

class Recorder {

    recorderCanvas(canvas:HTMLCanvasElement) {
        const stream = canvas.captureStream() // 获取stream
        const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' }) // 创建MediaRecorder对象
        
        const data: any[] = [] // 用来记录数据
        
        recorder.ondataavailable = function(event) {
            if(event.data && event.data.size) {
                data.push(event.data)
            }
        }
        recorder.onstop = function() {
            const url = URL.createObjectURL(new Blob(data, { type: 'video/webm'}));
            (document.querySelector('.vido-node') as any).src = url // 将bolbURL写到页面标签上
        }

        recorder.start()

        setTimeout(() => { // 录制10秒
            recorder.stop()
        }, 10000);
    }
}