海康威视 本地化 摄像头播放问题

这是出差遇见的一个问题，因为之前没有接触过，浪费了几天时间在这个上面，所以特别记录一下。
首先就是别想着自己手写一个，当然你是巨佬那当我没说。我以后有机会再说吧。总之就是技术不够，插件来凑。
现在摄像头获取到的都是rtsp的视频流。之前了解到的方案基本就是转流。转rtmp，转flv, 转m3u8。。。。。。
几种格式中，rtmp就别想了，直接放弃。rtmp的播放都需要flash插件，因为flash有安全漏洞，容易被黑客利用。在2020年，浏览器都对flash都弃用了。虽然国内还有小部分浏览器支持，但是基本无法推广使用的。
而m3u8的实现效果也是巨差，卡顿，延迟高，我也是用了一些插件去实现easyPlayer, hls, video.js等插件，基本跑了一遍，效果都不好，最后得出结论原因不在前端。通过vls插件查询到后端是264的格式，相对于现在新出的265格式上效果差了50%左右。改成265后效果依然不理想。
最后的方案就是不转，直接rtsp上，采用的方案jsmpeg.js + ffmpeg + websocket + java。效果提升显著，延迟0.5s, 显示清晰（通过控制输出），主要是前后端工作量都小，☺

1. 运行前准备

启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文

2. 安装依赖包

在项目根目录终端中运行 npm i 安装后端所需依赖包

3. 修改代码

rtsp-video-node 中的代码无需更改，node服务默认端口为8088，如出现端口占用，更改 ==app.js 中的 app.listen(8088, () => {})
rtsp-video-canvas 中修改 rtspData.url 为可用的rtsp地址，修改rtspData.port ==为没有被占用的端口给websocket。

1. 后端代码
   
   前端代码
   

2. 启动

在项目根目录终端中运行 node app.js 启动node服务
在浏览器中打开 index.html

5. 效果

延时在500ms左右
FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果（辅码流每个ffmpeg进程占用3%的CPU），demo中有运行shell脚本的代码用于杀掉无用的FFmpeg进程，未测试效果。

想要直接的demo,可以到参考文献去找。

参考文献：在web中播放rtsp视频方案对比