rtsp 的海康威视的视频流如何在网页上显示，网上找的方法试了好多没一个成功的，前端用的 vue

没办法，原生不支持。
所有代码级的解决方案都是围魏救赵，体验都是这样那样的问题，无法在项目上应用：播放失败、卡顿、延迟、cpu 卡死、样式难以控制……
真正想玩 h5 原生，都是通过中间加一层流媒体服务转成 web 标准支持的方式进行播放。

@fengyenobug 18 个视频同时播放，实际上这个问题比较复杂，
正规办法，你需要有一个视频流合流的 server ，ffmpeg 把 18 个流合成一个，然后输出 hls 什么的浏览器就可以播放了。
简单办法，找个电脑下载 obs ，创建 18 个虚拟 view ，合并后推送出去。

感觉你就想随便 github 上下载一个东西解决问题，其实这个问题没那么容易。

https://yyixx.com/docs/media/rtsp_wasm
你要想简单的就做到,那我劝你放弃吧,老老实实走转码,做到你还要改很多玩意,假如你想深入研究,可以参考上面写的,这个是在美团无人车时候搞得低延时拉流方案

@tcper 合流的话，样式就定死了，每一个摄像头的状态和文字是可能会变化的，样式间隔会根据客户端稍许变化，合流做不到这些，只能把 18 个视频合到一起成一个视频。目前有 64 个摄像头在线，不需要 obs 虚拟推流的，解决方案确实找了很多，之前也使用过服务端分段截取转成 MP4 和同 iframe 套官方 sdk 实现过效果都不怎么好

https://github.com/bluenviron/mediamtx 用的这个，搞个服务端 rtsp 转 hls low latency ，摄像头一般 h264 不需要重编码，所以服务端就是网络带宽压力。
客户端同时 18 路全高清压力会比较大，建议 18 路的时候只显示子码率，可以 ISAPI 批量给摄像机配置一个合适的子码率。

@tcper 而且某个摄像头掉线的话，我们需要显示掉线的图填补当前摄像头的黑屏状态，卡顿加载也要展示加载中的图，合流达不到 leader 的需求

要么用 zlmediakit 或者 srs 部署流媒体服务器，要么使用第三方云平台的直播服务（走拉流）。zlmediakit 、srs 支持 flv, 对应的播放器是 flv.js, 延迟要比 hls 好很多, 另外海康自己的 h5 播放器(新版本)也是走 websocket 的。

不想写代码就把摄像头的 rtsp 接入 hass ；想写代码就移植 hass 的实现。
hass 的 rtsp 展示有两种实现方式：
1. 用 ffmpeg 转 hls
2. 转成 webrtc

go2rtc

合并画面直接用 NVR 的零通道去配置，不需要自己拼接每个通道

https://jessibuca.com/player-pro.html
试试看这个 支持 flv h.265 编码的直播流

不要用 flv 已经淘汰全是魔改没必要用，hls 延迟高，用 mediamtx 或者 ZLMediaKit 将 rtsp 协议转换成 fmp4 over websocket 或者 wetrtc

转 WebRTC ，如果是做监控，别的切片协议基本就别研究了，万一领导和 rtsp 一对比，发现延迟差那么一点，想优化就很难了。

搭个 srs ，在海康后台配置 RTMP 推送，这样可以直接得到 flv 或者 hls 的播放地址。

如果摄像头视频流和展示网页在同一个局域网里面，可以写个 opencv 的后端处理直接一帧一帧展示就好了，这个我以前写过，用 opencv videocapture 读取出来，然后 imencode 成图像格式，发给前端，前端不断接受就可以了。
https://pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page/

opencv 官方支持四种语言，c/c++/python/java, opencv.js 我没怎么尝试过，可以试试

https://medium.com/@amit25173/opencv-with-javascript-ff14a93296ff

我们当时是用的海康官方播放插件，去他们官网下载的

我看了海康后台,是通过 websocket 来传输的,canvas 播放。
可能有这方面文档。
***
我推荐你用 gb28181 平台,我公司用的是 easygbs,cpu 消耗贼低。


但是 easygbs 要收费,500 块永久。
当然你也可以选择其他平台,比如萤石,如果一直播放,可能更贵。

如果是自己做转码,不注意的话,就浪费几百倍性能。(别解码再编码那些傻 x 操作就行)
不过我想这应该很简单,问 ai 打开 rtsp,转为 http_flv 。

正巧搞过。
这种项目目都有 NVR 。那么可以用 官方 sdk ，就是调调 API ，流转码海康自己都做了
基本兼容所有浏览器
https://partners.hikvision.com/tools/tooldetail?id=599912306030739456

如果没有那就用 easygbs ，比较稳定，gb28181 支持全。

下策是自己搞一个 rtsp 转 rtmp/hls 的服务，用开源的搭建。nginx 有反代 rtmp 和 hls 的插件，有的需要编译一下
效果 hls 好于 rtmp ，rtmp 就不建议用了