第一篇：HTML5视频转字符动画

第二篇：字符画进阶实现

这是第三篇，主要是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()
}

MDN文档参考：MediaRecorder

知乎文章：给Canvas录制一个视频

• 
  访客 2021-07-01 10:51:41

  下载以后不能打开视频文件