背景
使用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);
}
}
- 结果展示