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

[suke119]

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

https://lav.wangsrbus.cn

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

未来，因为ffmpeg的命令基本都支持，那么理论上客户端推流拉流基本上都可以实现，因为后期可以扩展。自己也是WebRTC的重度爱好者，想把这玩意和Wasm结合，从 RTC 到 RTE 过渡，我感觉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 打错字了 主观意愿