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()

}

html5转换成mp4视频,HTML5的canvas动画转视频MP4相关推荐

Canvas动画转视频-前段框架whammy
Canvas动画转视频-前段框架whammy whammy是在前端将canvas动画转视频,它的github地址为:https://github.com/antimatter15/whammy 由于英 ...
html5转换成mp4,html5 – AVI到MP4 – ffmpeg转换
我正在运行一台debian 7.5机器,在 these instructions之后安装了ffmpeg-2.2 问题我正在尝试在浏览器中显示mp4视频.原始文件具有AVI容器格式.我可以成功地将它转 ...
如何将mp4转换成gif？教你一招实现视频转gif高清转换
GIF动图就是我们平时常用的表情包,与mp4视频不同的地方是gif更加小而精,因此在网上gif格式也非常流行,那么我们自己能不能将mp4转换成gif呢?当然是可以的,只需要使用视频转GIF工具就能 ...
mp4格式怎么转换成gif格式？简单3步完成视频制作gif
mp4格式怎么转换成gif格式?在平时观看视频的时候,如果视频中有一段画面非常精彩,想把这段镜头制作成gif动图添加到我们的表情包里,这时候应该怎么实现mp4转gif呢?今天就来给大家推荐一款视频转g ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
html5打包成flash,将HTML5转换为Flash(示例代码)
我正在广泛使用impress.js来创建大量的HTML5演示文稿.这些演示文稿需要在触摸屏信息亭上显示.不幸的是,处理信息亭的供应商表示只能在这些信息亭上显示Flash内容. 是否有解决办法(更改供应 ...
html5 打包成adk,Cors Html5 Jquery / SoundManager wierdness
所以我在使用soundcloud api和html 5音频播放器时遇到了一些问题. 主要目标是仅使用html5访问所有公开的soundcloud音乐. 我使用以下内容. //C# api call r ...
html5改成块状标签,HTML5基本网页结构以及标签的改变
一.HTML5崭新的页面布局: 1.传统的HTML页面布局: 2.HTML5布局: 3.HTML5布局使用的标签: (1)header元素:header元素表示页面总的一个内容区块或者整个页面的标题: ...
html5 mp4转换ogv格式,如何将mp4视频转换成ogv高清视频呢
原标题:如何将mp4视频转换成ogv高清视频呢 OGV格式的视频文件属于高清无损格式的视频文件,画面清晰度很高,观看体验感好,因此现在的视频网站中下载的视频文件大多数是MP4格式的,正因为是高清视频, ...

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

html5转换成mp4视频,HTML5的canvas动画转视频MP4相关推荐

最新文章

热门文章