html5转换成mp4,HTML5的canvas动画转视频MP4

这是第三篇，主要是canvas画布上的流如何转为mp4视频并保存在本地

这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的。具体兼容性未知,直接代码加注释说明下实现思路const chunks = new Set() // 先准备个容器保存canvas来的图像流

let videoUrl = null

let mediaRecord = null

function createRecord() {

const mediaStream = document.querySelector('#textCanvas').captureStream(48) // 获取画布canvasElement并设置帧频率(FPS)

mediaRecord = new MediaRecorder(mediaStream, {   // 核心API，可以录制canvas, audio, video代码下方提供文档链接

videoBitsPerSecond: 8500000

})

mediaRecord.ondataavailable = (e) => { // 接收数据

chunks.add(e.data)

}

mediaRecord.start(100)  // 开始录屏,参数为抓取间隔100毫秒

}

createRecord()  // 开始录制时调用该方法

function download() {    // 录制结束时调用该方法停止录制，并生成下载链接，下载

mediaRecord.stop() // 结束录屏

const videoBlob = new Blob(chunks, { 'type': 'video/mp4' })   // 创建视频文件

videoUrl = window.URL.createObjectURL(videoBlob)    // 创建对象链接

var a = document.createElement('a')

a.href = videoUrl

a.download = 'record-canvas.mp4'

a.style.display = 'none'

document.body.appendChild(a)

a.click()

}