艰难的摄像头视频web页面播放之路

海康摄像机可以提供rtsp协议，所以第一步就是考虑直接通过浏览器播放，最初找到《谷歌浏览器Chrome播放rtsp视频流解决方案》连接地址：https://yq.aliyun.com/articles/243466，兴奋不已，测试一下得到以下结果：（此处用的谷歌浏览器）

image

最后在《在Chrome上通过vlc插件播放rtsp和rtmp视频》（地址：https://my.oschina.net/u/1018014/blog/1540179） 知道Chrome只有41版本以前才支持VLC插件，我当前用的浏览器版本是版本 83.0.4103.97，已经彻底断了使用vlc插件这条路了。

那就再试试VXG插件https://www.videoexpertsgroup.com/

运行VXGdemo 得到了以下提示

PNaCl modules can only be used on the open web (non-app/extension) when the PNaCl Origin Trial is enabled

PNaCl 是(Portable Native Client)

最后查到了这篇文章：PNaCl 再见，WebAssembly 你好！，原来PNaCl也被抛弃了。

在https://github.com/1441796624/VXG.Chrome-RTSP-Player项目中看到如下一段话

Google Inc. has permanently banned NPAPI for Chrome browser making legacy media plugins including VLC nonfunctional. VXG Chrome RTSP Player is based on Google’s Native Client (NaCl) and Portable Native Client (PNaCl) architecture.

没想到VXG步了VLC的后尘，再次放弃VXG！

再次找到使用B站（bilibili）开源的flv.js的例子https://github.com/LorinHan/flvjs_test

看似好简单，后端node express，前端vue

安装ffmpeg，参考文档https://blog.csdn.net/u013314786/article/details/89682800
解压
xz -d ffmpeg-4.3-i686-static.tar.xz
tar -xvf ffmpeg-4.3-i686-static.tar
npm离线安装

下载安装包：dnf install --downloadonly --downloaddir=/root/video npm

在下载的安装包目录下执行命令：rpm -Uvh ***.rpm进行npm安装

安装路径

image

https://github.com/LorinHan/flvjs_test中提到要安装依赖包，执行以下命令：
npm install express express-ws fluent-ffmpeg websocket-stream -S -D

image

但实际执行node index.js的时候发现还是缺包，然后就是一个个包的补充，最后下载的包如下

image

此时再执行node index.js,express监听起来了。

image

index.js需要修改的地方，ffmpeg的地址

ffmpeg.setFfmpegPath("/root/video/ffmpeg-4.3-i686-static/ffmpeg");

app.listen(8888);端口可以根据需要调整。

这部分整理好了以后剩下要做的工作就是采用vue搭建前端环境。

因为对vue不是很熟悉就直接采用https://juejin.im/post/5a7c18d36fb9a0633e51c458文档中的内容搭建一个最简单的环境。

首先执行vue init webpack videoProject初始化一个项目

然后就是下载flv.js，执行：npm install flv.js -S -D

下载完成后，为了尽快看到效果我是直接把flv.js/src目录下的内容直接拷贝到我初始化的项目videoProject的src目录下。将以下代码直接拷贝到App.vue文件中

将rtsp: "rtsp://admin:[email protected]:554/h264/ch1/main/av_stream"修改为对应自己要播放的摄像头的rtsp地址，如果密码中有特殊字符时需要转义，如里面包含+号需要转义为%2B。
然后运行：PORT=8090 npm run dev。运行我的videoProject。此处报了两个错误：Expected indentation of 2 spaces but found 4和extra semicolon

对应的解决办法：打开项目中的config目录下的index.js文件

image

将useEslint的值改成false

image

修改.eslintrc.js文件，增加"indent": ["off", 2],

image

image

参考文档：

https://blog.csdn.net/zyj0209/article/details/89307987

https://blog.csdn.net/qq_37591637/article/details/100508162

万事具备，就差运行看效果了，走起！

执行 node index.js，起后端服务

前端执行PORT=8090 npm run dev。运行前端项目

image

访问http://localhost:8091，视频出现

image

终于搞定了一个简单的web页面播放方式！