这是一个创建于 690 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在折腾音视频相关的，本来想搞个网页工具在线转码，视频转 Gif ，音频提取的工具，原本是打算后端处理，然后返回处理结果给前端的，但是想到这玩意涉及的文件如果敏感再加上宽带遭不住，所以就直接玩玩 Wasm这玩意，只能说很牛，这两天写了个在线演示 Demo：
宽带较小，因为首次加载 Wasm 文件的时候比较慢，等加载完成就可以录屏，录像，转码（转 avi ，当然后面可以自定义），录屏转 GIF 。
主要用到的还是ffmpeg编译好的Wasm文件，处理起来很方便，如果了解一些基本ffmpeg命令的话基本上都是实现。
未来，因为ffmpeg的命令基本都支持，那么理论上客户端推流拉流基本上都可以实现，因为后期可以扩展。自己也是WebRTC的重度爱好者，想把这玩意和Wasm结合，从 RTC 到 RTE 过渡，我感觉Wasm在未来一定很有大的飞跃。
如果想要完整代码的话，我在掘金也发了文章，感兴趣的可以自己看看，实现细节文章和源码
第 1 条附言 · 2023-01-14 17:23:43 +08:00
大家体验的时候可以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的过程日志都可以看到
 |
1
suke119 OP  1
呀 没人感兴趣吗 呜呜呜
|
 |
2
Rrrrrr 2023-01-14 15:44:01 +08:00
之前玩了一个 demo ，转个几 M 的东西，都要好久
|
|
4
suke119 OP @Rrrrrr 谷歌的 MediaPipe （人脸分割，行为分析、手势识别、动作识别、物体识别）媒体图像处理的就是用 wasm 的，然后配合 WebGL 实现 GPU 的调度。
|
 |
5
klo424 2023-01-14 16:10:07 +08:00
更感兴趣低延迟的 web 端拉视频流
|
|
6
suke119 OP @klo424 那必然是 WebRTC 拉流了，现在很多的，ZLM 、SRS 等开源的；如果感兴趣的话可以看看我写的掘金小册，我主页有的
|
 |
7
okakuyang 2023-01-14 16:13:49 +08:00
我目前需求迫切的：
jpg 转 avif jpg 转 webp （ chrome 支持，但是其他浏览器不支持） avif 真的很诱惑，但是现有的方案速度都不够理想。 |
|
8
suke119 OP @okakuyang 这个确实是，但是 wasm 毕竟还没长大，成型的 wasm 编译库很少，FFmpeg 原生转换的话都需要重新编译依赖，wasm 我估计也不得行
|
 |
9
enchilada2020 2023-01-14 16:21:54 +08:00 via Android
@okakuyang 本地 node 跑个 sharp 就行了 一行代码的事
|
|
10
suke119 OP @okakuyang 看下这个 https://www.npmjs.com/package/libavif-wasm 现成的 wasm 库，还没试效果
|
|
11
suke119 OP @enchilada2020 服务端处理的方式很多的，但是纯 web 端处理，wasm 更有优势一些撒
|
 |
12
lambdaq 2023-01-14 16:28:48 +08:00
吧 ffmpeg 的 wasm 精简一下。 不必要的功能去掉。
|
 |
14
justin2018 2023-01-14 18:30:53 +08:00
这个库 得加载一段时间 库有点大😁
|
|
15
suke119 OP @justin2018 是的 好在加载一次之后磁盘缓存了，刷新后都是从 disk cache 里加载的🤪
|
 |
16
xiangyuecn 2023-01-14 19:00:59 +08:00
转码兴趣不大，用 js 生成视频比较感兴趣，前段时间还找了好几个库 生成 webm 或 mp4 的，不过都不能添加音轨 没啥多大用处，只能生成无声视频，配合 canvas 画图 还是很屌的
|
|
17
suke119 OP @xiangyuecn ffmpeg.wasm 不就是干这个的撒 原生命令都支持的 视频编辑
|
 |
18
Actrace 2023-01-14 20:57:07 +08:00
之前有设计过这一块的业务，怎么说呢，如果客户不介意的话，挺好的。
不过现实是 B 站之前好像玩过一次，被骂的很惨。 另外 WASM 不能调用 GPU 硬解是个硬伤，效率上还是有待优化。 |
 |
19
xuanyuanaosheng 2023-01-14 21:05:26 +08:00
支持一波！
|
|
20
xiangyuecn 2023-01-14 21:09:21 +08:00
@suke119 #17 也行哈，就是 ffmpeg.wasm 太大了，得想办法去掉没有用到的功能
|
|
21
suke119 OP |
|
22
suke119 OP @Actrace 配合 webgl 可以 谷歌那个 mediapiple 就是的 不清楚具体怎么弄的
|
 |
23
humbass 2023-01-14 23:02:48 +08:00
|
 |
24
Aloento 2023-01-15 01:25:46 +08:00
|
|
25
suke119 OP @Aloento 这个包我也看了下 对于 MEMFS 中文件的管理不太灵活，对 FS 的 API 对接没得 ffmpeg.wasm 灵活
|
|
26
suke119 OP @humbass ffmpeg.wasm 对的 推流暂时还不支持，作者也在探索，感兴趣的话看看这个 https://github.com/davedoesdev/streamana
|
 |
27
ByteCat 2023-01-15 14:16:31 +08:00
ffmpeg.wasm 比原生性能还是差得多，不过可以用来实现一些 js 做不到的事情，还是挺有趣的，我去年就用过这个包。
|
 |
29
littlewing 2023-01-15 14:38:11 +08:00
这个性能和在本地用原生 ffmpeg 的性能相比有差别吗
|
|
30
suke119 OP @littlewing 和本地肯定有差别的，但是比纯 JS 处理同等的事要强的多，官方描述是和接近本地的速度，所以优化的好的话可以接近，但是完美的和本地媲美是不行的
|
|
31
Aloento 2023-01-15 19:08:48 +08:00 via iPhone
@suke119 ffmpeg.wasm 最大的问题是共享内存，浏览器一般不会启用这个功能的，非常头疼而且贼大
|
|
32
suke119 OP @Aloento wasm 公用的 MEMFS 。ffmpeg.wasm 对接的 FS 的基本 API ，按照实际情况判断下啥时候启用，然后用完删除即可，很灵活，就担心不删除然后浏览器直接崩了
|
 |
33
shenhuilin0 2023-01-17 10:12:30 +08:00 via Android
那以后前端是不是能自己播放 rtsp 流了
|
|
34
suke119 OP @shenhuilin0 对的 我也在探索这个 毕竟按照以往的方式 要么直接 websocket 要么 自己搭建流媒体服务端 ，如果后期真的出来 wasm 的 websocket 库+ffmpeg-stream 的 我觉得可行性非常高
|
 |
35
duke807 2023-01-18 23:03:06 +08:00
@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 等大文件，一定能名声大噪 （性能不够可以转小一点分辨率、小一点帧率，或者加一个转码进度条呈现给用户） |
Select Language