JavascriptHTML5的canvas动画转视频MP4

0

HTML5的canvas动画转视频MP4

html5 canvas MediaRecorder 阅读:224 时间:2020年10月09日

本文主要是研究canvas画布如动画何转为mp4视频并保存在本地。这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的。具体兼容性未知,直接代码加注释说明下实现思路...

第一篇: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录制一个视频

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^