浏览器原生播放 rtsp(h264, h265),flv, hls 的解决方案, 有哪些可以参考?
thinkershare · 2021-12-03 13:33:57 +08:00 · 4690 次点击这是一个创建于 1120 天前的主题，其中的信息可能已经有所发展或是发生改变。
我对音视频完全是个外行, 现在接手了一个政府项目, 需要在浏览器上原生播放海康和大华的视频, 后端提供的流协议有 hls, flv, rtsp, 有 H264 和 H265,两种编码, 需要在浏览器上实现(不能用插件), 可以指定比较新的 Chrome,Edge 浏览器, 我在 GitHub 上找了一圈, 发现各个项目都是实验性的, 想要咨询一些, 做这块的大佬, 使用 WebAssembly 在编译 FFmpeg, 然后全部的工作都在浏览器端解决的方案是否可行?(目前大概还有 2 个月时间, 延迟 3s 以内, 暂时不考虑移动端, 后面可能需要考虑微信小程序)
补充: 我需要优先考虑纯前端方案, 即不修改后端, 不再后端部署其它流媒体服务器, 如果这条路实在行不通, 再考虑后端解决方案
 |
1
CallMeReznov 2021-12-03 13:36:11 +08:00  2
|
 |
2
FakerLeung 2021-12-03 13:52:05 +08:00
flv.js ？
|
 |
3
wunonglin 2021-12-03 14:10:56 +08:00
hls 都会有延迟，只有 flv, rtsp 才能做到低延迟，试试 flv.js ？不然也找不到相关支持 flv, rtsp 的了
|
 |
4
thinkershare OP flv.js 和 hls.js 都不支持 H265
|
 |
5
mxT52CRuqR6o5 2021-12-03 14:21:39 +08:00
前端用 rtsp 就得上 flash 了
|
|
6
mxT52CRuqR6o5 2021-12-03 14:24:12 +08:00
h265 浏览器能不能原生播放得看浏览器&硬件了
|
 |
7
registerrr 2021-12-03 14:30:11 +08:00 1
https://www.zzsin.com/h265webjs.html
这个看看能不能满足你 |
 |
8
wkmike 2021-12-03 15:11:16 +08:00 1
我在 Electron 实现过类似的低延迟直播需求，Web Worker 内起线程收发数据后调用 ffmpeg C++ Addon 解码，回传 YUV 到页面用 canvas 绘制。
WebAssembly 应该也是能实现的，音视频开发可以看看雷神的入门教程 https://blog.csdn.net/leixiaohua1020/article/details/42181571 另外现在监控应该都支持对 Web 友好的 WebRTC 呀，如果设备不支持的话可以让后端中转 WebRTC ，比如 srs 。 |
 |
9
siguretto 2021-12-03 15:27:25 +08:00 1
流媒体的转码方案更加成熟方便。如果以后不维护，可以硬着头皮整一套纯前端方案，但是你也说了以后考虑微信小程序。
纯前端方案，只考虑兼容 hevc 的话，@registerrr 的方案不错。但是你还要兼容 rtsp ，就算费劲心思做出了整合方案，如果客户端的硬解 /系统不支持，或者源视频码率过高，都会出大大小小的问题。 |
 |
10
solar 2021-12-03 15:34:00 +08:00
@mxT52CRuqR6o5 现代浏览器默认不支持 Flash 了，Chrome 更是彻底禁用了，连手动开启的选项都没了。
|
|
11
mxT52CRuqR6o5 2021-12-03 15:42:58 +08:00
@solar 楼主说可以指定浏览器，那指定个国产浏览器就行了
|
|
12
thinkershare OP 浏览器不是问题, 可以指定非常新的浏览器, 但不能指定 IE 这种, 甚至可以只兼容最新版本的浏览器, 我现在考虑的实现方式是使用 WebAssembly, WebWork, 然后 Canvas, 硬画, 我研究了下 Bilibili 的播放器实现, 似乎 H265 也是这样用 wasm 做的, 我们的用户量很小, 并发不会超过 100 个, 客户的客户端很强到, 可以理解为高配工作站(因为要上大屏), H264 检测到 hls.js 和 flv.js 都可以, 延迟暂时还不是一个强需求, 但 H265 必须支持, 因为所有摄像头的预览和监控的编码都是 H265, 只有极少部分是 H264, 客户不愿意改码流, 海康的人也不愿意担责, 所以只能想办法解 H265
|
|
13
siguretto 2021-12-03 16:08:13 +08:00
那干脆自己封装客户端，electron+ffmpeg+mpvlib ，直接编译出执行文件给客户
|
|
14
thinkershare OP @siguretto 这个方案行不通(商务上行不通), 没办法, 最初的时候我就是这样考虑的, 这个方案我之前用过, 现在是商业合同卡死了必须是 B/S 架构, 但我们合同中有说到, 需要使用最新浏览器, 因为我们需要现代浏览器提供的高级 API, WebGL, WebSocket, WebLock 等. 我正在研究一个 GitHub 的项目, 找了个海康和大华的摄像头, 周末试一下, 看能不能跑通
|
 |
15
kirile 2021-12-03 17:18:09 +08:00 1
我觉得萤石云这种挺好, 用户不多的话, 费用应该也不会特别高, 省掉了后端. 之前有试过 go 调用 ffmpeg 解码的方案 gin-rtsp (不稳定, 容易放着放着白屏, 需要重启), 也有试过一个纯 go 的解码方案 RTSPtoWebRTC (不支持 hevc). 不过如果纯内网的话, 我记得海康的媒体服务器(或者录像机)是可以提供 websocket 返回视频流播放的(就是官网的无插件 H5 播放方案)
|
|
16
thinkershare OP @kirile 我有 2 个监控平台(海康和大华), 卡在了大华的 H265 上, WebSocket 大华木有, 而且他们的视频全是 HEVC 的, 所以头痛
|
 |
17
liberize 2021-12-03 19:13:08 +08:00 via Android
同行啊，我公司的无插件播放器就是我写的
|
|
18
liberize 2021-12-03 19:16:38 +08:00 via Android
h265 硬解需要浏览器支持，要么用 edge 加 windows 商店的插件，要么自己魔改 chrome 。
|
|
19
liberize 2021-12-03 19:21:00 +08:00 via Android 1
我是自己做了 2 个播放器，一个和 flv.js 原理类似，用 mse 调浏览器原生解码，支持 265 ，另一个是和 WasmVideoPlayer 类似，用 wasm 软解。目前主要用前者配合自己魔改的 chrome 使用。后者性能不太行，即使替换了 ffmpeg 解码器为支持 simd 的 libhevc 。
|
|
20
liberize 2021-12-03 19:25:51 +08:00 via Android
浏览器只支持 http/websocket/webrtc ，flv 和 hls 是基于 http 的，可以直接播放，rtsp 必须要转换
|
|
21
mxT52CRuqR6o5 2021-12-03 19:32:54 +08:00
|
|
22
kirile 2021-12-03 21:08:45 +08:00
@thinkershare 要同时兼容两个还是走服务端解码比较好, 魔改浏览器什么的, 如果他们突然哪天想在另外的没装魔改的或者插件的电脑上想看视频就又要解释一通, 然后他们只会说"我的电脑配置可高了" /doge
|
|
23
thinkershare OP @liberize rtsp 是没戏,我刚刚才搞明白, flv 和 hls 的延迟是必然的, 所以问题基本无解. 我先用 wasml 用 ffmpeg 做个软解 HEVC 的凑合一下, 检测到 H264 就直接使用 hls.js, 先做个凑合的方案, 可以加个微信或者其它联系方式交流下心得吗? 有偿咨询也可以的
|
 |
24
kokutou 2021-12-03 22:06:56 +08:00 1
wasm 找一个能用的,测试他们客户机电脑上装最新 firefox 和 chrome 能跑就行了...
如果实在怕的话,找 2-3 个能用的, 随时切. 大屏就是监控嘛... 很有可能配的那种性能很差, 纯就是支持很多输出口的显卡 硬解别想了, 大概率卡不支持 cpu 可以要求他们配高点. 你要考虑里面采购的电脑是个什么德行... 多跟客户沟通实际播放的电脑配置... 能在采购前提要求就赶紧提... |
|
25
thinkershare OP @kokutou 电脑性能很好, 不是啥问题, 不管是硬件还是显卡
|
 |
26
lopssh 2021-12-04 05:37:13 +08:00
hls 都会有延迟，只有 flv, rtsp 才能做到低延迟，试试 flv.js ？不然也找不到相关支持 flv, rtsp 的了
|
 |
27
whi147 2021-12-20 19:21:17 +08:00 via iPhone
纯前端又要硬件加速，我前段时间实现了在浏览器嵌入 c++进程，然后愉快的用 ffmpeg 了
|
|
28
whi147 2021-12-20 19:32:00 +08:00 via iPhone
我现在在找一种服务端转码的方案，实现手机端播放
|
Select Language