01 介绍
最近有个需求需要在浏览器上播放网络摄像机的音视频，由于是用在工业生产环境，所以对低延时要求比较高。
目前最符合低延时要求的是webrtc方案，但由于项目自身原因，暂时无法引入webrtc方案，调研下来ws+hflv, ws+fmp4是比较好的方案，很多开源播放器也支持播放ws+flv,
从低延时的角度选择ws+fmp4可能延迟更低一些，毕竟类似flv.js的MSE方案最终也是要把flv封装的视频数据转换成fmp4格式数据喂给MSE。
后来发现开源的支持ws+fmp4的web播放器很少， 要么将这个功能放在pro版本收费，要么就是不支持ws+fmp4+h265 …..
最后在各种AI工具的加持下，我这个从未写过前端代码的新手，捣鼓出来一个基于MSE+Fmp4+websocket+H264/H265的web播放器。
02 MSE+fMp4+Websocket WEB 播放器
测试连续跑了四五天，目前看效果还可以，延迟基本上在1秒左右， 这里开源出来，希望大家都可以尝试使用，有问题可以反馈，共同优化，记得点赞+star。
github地址：https://github.com/machh/machhPlayer
效果展示：
03 关键特性
- 低延迟播放：延时1s左右， 通过WebSocket接收fMP4片段，直接追加到MSE的 SourceBuffer中，使用 video.buffered设置currentTime实现从缓存片段的播放。
- 编解码支持：原生H.264/H.265（fMP4 格式）
- 技术栈：WebSocket（流传输）、MSE（媒体追加）、HTML5 Video（渲染）
- 实现了简单的重连/退避机制及内存回收机制，
- 支持音频H.264/H.265+AAC
- 对于H.265的解码播放，依赖浏览器MSE原生能力，最新版本的chrome，Edge都可以
04 WEB视频播放相关技术介绍
WebSocket
websocket相关概念技术这里不多讲了，自己了解一下。
HTML5 Video 标签
- HTML5原生的视频播放元素
- 支持基本的视频播放控制（播放、暂停、音量等）
- 原生只支持有限的编码格式（H.264、VP8、VP9等，取决于浏览器）
- 需要完整的容器格式（MP4、WebM等）
HTML5<audio> 和 <video> 标签的限制
- 不支持流
- 不支持 DRM 和加密
- 很难自定义控制, 以及保持跨浏览器的一致性
- 编解码和封装在不同浏览器支持不同
MSE (Media Source Extensions )
MSE 是HTML5中的一项技术是 Chrome、Safari、Edge 等主流浏览器支持的一个新的Web API。MSE 是一个 W3C 标准，允许 JavaScript 动态构建 <video> 和 <audio> 的媒体流。它定义了对象，允许 JavaScript 传输媒体流片段到一个 HTMLMediaElement。
通过使用 MSE你可以动态地修改媒体流而不需要任何插件。
MSE允许开发者通过JavaScript动态地创建、管理媒体流（如视频流），并将其传递给<video>元素进行播放。它为流媒体应用提供了非常强大的功能，尤其是在动态加载大文件或进行自适应流的场景中。
优点：
- 自适应流：MSE支持像HLS、DASH等自适应流协议，可以动态调整视频质量，以适应网络带宽变化。
- 动态拼接流：MSE允许通过JavaScript动态添加媒体数据，这对直播或点播应用非常重要，尤其是在实时传输和按需加载时。
- 灵活性：可以进行媒体流的自定义处理，比如推送自定义的视频帧、拼接多个视频段等
缺点：
- 较复杂的实现：MSE需要开发者通过JavaScript手动管理媒体缓冲和流的加载，需要有一定的底层编码知识。
- 兼容性问题：尽管现代浏览器大多数都支持MSE，但在一些较老的浏览器或平台上，可能需要回退到其他技术。
MSE 的工作原理:
- 创建一个
MediaSource对象。 - 将
MediaSource对象附加到一个<video>或<audio>元素。 - 创建一个
SourceBuffer对象，并将其添加到MediaSource对象。 - 使用
SourceBuffer.appendBuffer()方法将媒体数据片段添加到SourceBuffer中。 - 浏览器会解码并播放添加到
SourceBuffer中的媒体数据
MSE 内部结构
fMP4
MSE 并不能直接播放h264/h265裸流，而是需要使用WebM 或者 fmp4 (fragmented MP4) 等格式
国内使用fMP4比较多。
MP4 是由一系列的 Boxes 组成的。普通的 MP4 的是嵌套结构的，客户端必须要从头加载一个 MP4 文件，才能够完整播放，不能从中间一段开始播放。
而 fMP4 由一系列的片段组成，如果服务器支持 byte-range 请求，那么，这些片段可以独立的进行请求到客户端进行播放，而不需要加载整个文件。
几个常用的分析 MP4 文件的工具。
- gpac，原名mp4box是一个媒体开发框架，源码下有大量的媒体分析工具
- mp4box.js，是 mp4box 的 Javascript 版本
- bento4，一个专门用于 MP4 的分析工具
- mp4parser，在线 MP4 文件分析工具
此外，对于不同的场景，浏览器的音视频技术还有：
Canvas webGL, webGPU，webWork, Wasm, webCodec. webTransport 等解决方案，可以看下图简单了解一下相关的概念名称。
本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/63980.html
