背景

最近接到一个需求，前端需要接一段视频流播放，刚接到的时候感觉这不挺简单的吗，立刻祭出我的 video.js 大法，不过当我拿到后端发给我的视频流地址的时候 rtsp://video-stream/god 我有点蒙，不知道此为何物，但是我还是尝试着用 <video srd="rtsp://video-stream/god" /> 挣扎了一下，结果却是不尽如人意，随后我在官方仓库也是得到了认证：

虽然 video.js 虐我千百遍，但是我依然待她如初恋，收藏起来，下次再用吧。那么 Web 端就彻底不能播放 RTSP 了吗？当然不是，Web 端可以播放，并且有很多方案，其中涉及到一些简单的但是收费的，还涉及到一些稍显复杂但是免费的，相信每一个程序员极客骨子里都是白嫖党，本文就不对收费方案进行介绍，给大家介绍几种免费的 Web 播放 RTSP 流的方案，并且最后每一个方案都给大家写了一个完整可运行的示例，大家按需使用。

关于 RTSP 流

比如我们熟知的海康威视以及大华等摄像头、监控设备供应商，他们的设备就是 RTSP 流，如果想要把监控视频接到 Web 端，那么就不可避免要解决这些问题，当然了，很多大厂或者供应商都有自己成熟的方案，但是如果是个人开发者或者小团队他们可能没接触过，遇到此类场景会没有头绪，本文就是基于此来写的，算是自己在开发过程中探索出来的前端可以独立 Cover 完成的。虽然其中会用到后端中转，但是都是很基础现成的 Nodejs 库，大家拿来即用就可。

这里笔者额外插一段垃圾话，网上方案千千万，没有示例早习惯，笔者一贯坚持的理念就是，如果你贴出代码来了，你就必须保证读者能执行，而不是因为环境或者代码不完整而体现自己的逼格，你既然是教学文章，那就要对读者负责。更有甚者给出所谓的方案还故意留问题，让读者付费咨询（我就不提姓名了）。别的我不敢保证，但是如果我提供的代码不能演示，你们在评论区也可以肆无忌惮地骂我，我接受~

解决方案

原理

…

The post Web 播放 RTSP 推流最佳方案实践 first appeared on Lenix Blog.