Wasm 无服务端音视频转码工具

[suke119]

最近在折腾音视频相关的，本来想搞个网页工具在线转码，视频转 Gif ，音频提取的工具，原本是打算后端处理，然后返回处理结果给前端的，但是想到这玩意涉及的文件如果敏感再加上宽带遭不住，所以就直接玩玩 Wasm这玩意，只能说很牛，这两天写了个在线演示 Demo：

https://lav.wangsrbus.cn

宽带较小，因为首次加载 Wasm 文件的时候比较慢，等加载完成就可以录屏，录像，转码（转 avi ，当然后面可以自定义），录屏转 GIF 。 主要用到的还是ffmpeg编译好的Wasm文件，处理起来很方便，如果了解一些基本ffmpeg命令的话基本上都是实现。

未来，因为ffmpeg的命令基本都支持，那么理论上客户端推流拉流基本上都可以实现，因为后期可以扩展。自己也是WebRTC的重度爱好者，想把这玩意和Wasm结合，从 RTC 到 RTE 过渡，我感觉Wasm在未来一定很有大的飞跃。

如果想要完整代码的话，我在掘金也发了文章，感兴趣的可以自己看看，实现细节文章和源码

大家体验的时候可以F12，打开控制台实时打印的参数，如果出现下面的则说明初始化完成（注意 ffmpeg loaded,第一次加载较慢）。

[info] use ffmpeg.wasm v0.11.6
createFFmpeg.js:43 [info] load ffmpeg-core
createFFmpeg.js:43 [info] loading ffmpeg-core
createFFmpeg.js:43 [info] ffmpeg-core loaded
WasmFfmpeg.vue:157 ffmpeg loaded

---

其他转码，转GIF的过程日志都可以看到

[suke119]

呀 没人感兴趣吗 呜呜呜

[Rrrrrr]

之前玩了一个 demo ，转个几 M 的东西，都要好久

[suke119]

@Rrrrrr 和本地 CPU 性能挂钩的，还有转码参数设置，未来感觉更多的编译库出来会越来越好玩。

[suke119]

@Rrrrrr 谷歌的 MediaPipe （人脸分割，行为分析、手势识别、动作识别、物体识别）媒体图像处理的就是用 wasm 的，然后配合 WebGL 实现 GPU 的调度。

[v2er4241]

更感兴趣低延迟的 web 端拉视频流

[suke119]

@klo424 那必然是 WebRTC 拉流了，现在很多的，ZLM 、SRS 等开源的；如果感兴趣的话可以看看我写的掘金小册，我主页有的

[okakuyang]

我目前需求迫切的：
jpg 转 avif
jpg 转 webp （ chrome 支持，但是其他浏览器不支持）

avif 真的很诱惑，但是现有的方案速度都不够理想。

[suke119]

@okakuyang 这个确实是，但是 wasm 毕竟还没长大，成型的 wasm 编译库很少，FFmpeg 原生转换的话都需要重新编译依赖，wasm 我估计也不得行

[KMpAn8Obw1QhPoEP]

@okakuyang 本地 node 跑个 sharp 就行了 一行代码的事

[suke119]

@okakuyang 看下这个 https://www.npmjs.com/package/libavif-wasm 现成的 wasm 库，还没试效果

[suke119]

@enchilada2020 服务端处理的方式很多的，但是纯 web 端处理，wasm 更有优势一些撒

[tf2]

吧 ffmpeg 的 wasm 精简一下。 不必要的功能去掉。

[suke119]

@lambdaq 后面发展壮大了 会出来很多这个库的，期待中(❁´◡`❁)

[justin2018]

这个库 得加载一段时间 库有点大😁

[suke119]

@justin2018 是的 好在加载一次之后磁盘缓存了，刷新后都是从 disk cache 里加载的🤪

[xiangyuecn]

转码兴趣不大，用 js 生成视频比较感兴趣，前段时间还找了好几个库 生成 webm 或 mp4 的，不过都不能添加音轨 没啥多大用处，只能生成无声视频，配合 canvas 画图 还是很屌的

[suke119]

@xiangyuecn ffmpeg.wasm 不就是干这个的撒 原生命令都支持的 视频编辑

[Actrace]

之前有设计过这一块的业务，怎么说呢，如果客户不介意的话，挺好的。
不过现实是 B 站之前好像玩过一次，被骂的很惨。

另外 WASM 不能调用 GPU 硬解是个硬伤，效率上还是有待优化。

[xuanyuanaosheng]

支持一波！

[xiangyuecn]

@suke119 #17 也行哈，就是 ffmpeg.wasm 太大了，得想办法去掉没有用到的功能

[suke119]

@xuanyuanaosheng 😘

[suke119]

@Actrace 配合 webgl 可以 谷歌那个 mediapiple 就是的 不清楚具体怎么弄的

[humbass]

@suke119 刚好也在搞这小玩意。 发现 assembly 的版本没法推拉流，只能处理文件。

楼主留个联系，或者+我 wx: ZGFsaS1jaGVu

[Aloento]

https://www.npmjs.com/package/ffmpeg4js

[suke119]

@Aloento 这个包我也看了下 对于 MEMFS 中文件的管理不太灵活，对 FS 的 API 对接没得 ffmpeg.wasm 灵活

[suke119]

@humbass ffmpeg.wasm 对的 推流暂时还不支持，作者也在探索，感兴趣的话看看这个 https://github.com/davedoesdev/streamana

[ByteCat]

ffmpeg.wasm 比原生性能还是差得多，不过可以用来实现一些 js 做不到的事情，还是挺有趣的，我去年就用过这个包。

[suke119]

@ByteCat 是的 ，期待后面这个的发展

[littlewing]

这个性能和在本地用原生 ffmpeg 的性能相比有差别吗

[suke119]

@littlewing 和本地肯定有差别的，但是比纯 JS 处理同等的事要强的多，官方描述是和接近本地的速度，所以优化的好的话可以接近，但是完美的和本地媲美是不行的

[Aloento]

@suke119 ffmpeg.wasm 最大的问题是共享内存，浏览器一般不会启用这个功能的，非常头疼而且贼大

[suke119]

@Aloento wasm 公用的 MEMFS 。ffmpeg.wasm 对接的 FS 的基本 API ，按照实际情况判断下啥时候启用，然后用完删除即可，很灵活，就担心不删除然后浏览器直接崩了

[shenhuilin0]

那以后前端是不是能自己播放 rtsp 流了

[suke119]

@shenhuilin0 对的 我也在探索这个 毕竟按照以往的方式 要么直接 websocket 要么 自己搭建流媒体服务端 ，如果后期真的出来 wasm 的 websocket 库+ffmpeg-stream 的 我觉得可行性非常高

[duke807]

@suke119

給 OP 您提一个建议：

目前比较火的最新的视频编码 AV1 只有 ios 不支持，建议您写一个 polyfill ，可以简单的让 ios 浏览器支持 av1 编码的 webm 视频播放（配套音频编码是 opus ）

AV1 视频关键帧是 AVIF 图片编码格式，目前已经全平台支持，ios 是最后支持的，ios 支持之前，网上有 polyfill 让 ios 支持 AVIF 图片： https://github.com/Kagami/avif.js

ios 之所以支持 AVIF 其中也应该有该 polyfill 的功劳

楼主若实现我说的 av1 视频的 polyfill ，做到易用，用户加一行 <script src="xxx"> 就可以，非 ios 系统不加载 wasm 等大文件，一定能名声大噪
（性能不够可以转小一点分辨率、小一点帧率，或者加一个转码进度条呈现给用户）

[suke119]

@duke807 主要是转码这个需要刻意的等待，如果非主观医院转码，在不同的用户体验中 估计马上秒退，就算是低帧率低分辨率，如果遇到视频长一点的，在提示转码🀄️的时候说不定就离开网页了。

[suke119]

@duke807 打错字了 主观意愿