内网web页面集成海康威视网络摄像头

需求：公司内网的交换机（非海康威视平台），直接用网线将摄像头接入进来，然后将监控的画面实时的显示在内网web页面上。

海康威视开放平台音视频集成标准协议对接

https://open.hikvision.com/docs/docId?productId=612781c8ec4acb28e0e1c0c3&curNodeId=2e231666a7854dc4a2dc29b9ed06782a#a26e0c06

看上去RTSP的功能最多，所以我就先用这个

根据文档中的开发指南，我就先下载rtsp协议取流的开源套件libvlc

https://www.videolan.org/vlc/libvlc.html

打开这个页面就慌了，完全看不懂了，因为也没有接触过这类东西，然后我先Google翻译下看看啥意思，没有太懂，我就先下载了一个播放器看看能不能显示我的监控画面，然后在看看怎么继续开发吧

VLC安装成功

如果播放我的监控画面呢，继续上网搜索，慢慢的一步步的来吧

1. 媒体->打开网络串流

2. 输入监控ip地址

输入网络URL

3.输入网络摄像头的账号密码

4.成功啦

然而呢，并没有什么软用啊，我要在网页中显示监控

又在网上搜索了半天发现高版本Google浏览器不支持RTSP，所以在分析一下选择哪个协议

Http-flv不支持IE

HLS 延迟高

RTMP需要使用Flash

所以我选择Http-flv看看，不支持IE就不用IE，影响不大

继续继续，查看文档中的http-flv开发指南

下载地址：https://github.com/bilibili/flv.js

我发现居然是B站开源的666666

我一看还要安装npm，好吧，下载node：https://nodejs.org/zh-cn/

node的安装就不多说了

安装成功！

第二天继续战斗

下载后，安装

打开官方的demo，打不开报了很多错误

一个个的解决

首先这个flv格式的视频文件是不存在，我找个flv视频文件，w3school有个mp4

的小视频

https://www.w3school.com.cn/i/movie.mp4

将其转化为flv的格式的文件，网上有找了个flv

https://convertio.co/zh/video-converter/

换成新的视频文件路径和名称

然后再刷新一下页面看看会不会报错了，果然，没有这么的容易，继续报错

[TransmuxingController] > DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame

这个问题，我是真的搜索了很久，才找了解决的方法，在这个开源项目的issues下找到的，直接给你们贴个地址

https://github.com/Bilibili/flv.js/issues/65

仅支持H264+AAC，也就说你在视频转flv格式的时候呢，要将编解码器选一下，选择H264的

转格式的时候点击这个设置

选择H264

再次刷新页面就加载成功了

成功加载。。。

我是要实时显示监控画面，看了下海康的文档，好像也没有什么解决方法，上面都要对接什么安全平台，然后就在想VLC不是可以播放RTSP呢吗，我能不能有什么办法，将rtsp转成flv的不就可以播放了吗，上网搜索，看了很多，大多数的解决方案是nginx+ffmpeg,真的是越搞越复杂了

1、Windows 安装nginx

https://nginx.org/en/download.html

直接下载，因为我电脑上装过apache，所以我要改个端口

修改nginx.conf配置文件

改端口

看到这个页面就可以了

2、windows安装ffmpeg

下载地址：https://github.com/BtbN/FFmpeg-Builds/releases（网络有点慢）

选择合适的版本

Windows我就选的这个

下载好，直接就可以使用了，可以加个环境变量，方便一点

查看版本   ffmpeg -version

在命令模式下播放一下摄像头rtsp数据看下

命令：ffplay rtsp://账号:密码@IP地址:554/h264/ch1/main/av_stream

打开了

打开了，但是并不是在网页中显示的，需要在网页中显示需要将数据推到nginx上去，继续搜索，结果是还要安装nginx-http-flv-module，关键是我是Windows系统，要编译这个模块，真的好麻烦，出了一个坑，又掉进了另一个更大的坑。

先看下官方的构建nginx的文档，把该下载的工具先下载下来

官方文档：https://nginx.org/en/docs/howto_build_on_win32.html

visualstudio：https://visualstudio.microsoft.com/zh-hans/downloads/

msys2(windows 软件分发与构建平台)：https://www.msys2.org/

openssl：http://distfiles.macports.org/openssl/

zlib：http://zlib.net/

pcre：https://github.com/PhilipHazel/pcre2/releases

nginx-http-flv-module：https://github.com/winshining/nginx-http-flv-module

nginx：http://hg.nginx.org/nginx

找到合适的版本下载

根据官方文档一步步的来

auto/configure \    --with-cc=cl \    --with-debug \    --prefix= \    --conf-path=conf/nginx.conf \    --pid-path=logs/nginx.pid \    --http-log-path=logs/access.log \    --error-log-path=logs/error.log \    --sbin-path=nginx.exe \    --http-client-body-temp-path=temp/client_body_temp \    --http-proxy-temp-path=temp/proxy_temp \    --http-fastcgi-temp-path=temp/fastcgi_temp \    --http-scgi-temp-path=temp/scgi_temp \    --http-uwsgi-temp-path=temp/uwsgi_temp \    --with-cc-opt=-DFD_SETSIZE=1024 \    --with-pcre=objs/lib/pcre-8.44 \    --with-zlib=objs/lib/zlib-1.2.11 \    --with-openssl=objs/lib/openssl-1.1.1l \    --with-openssl-opt=no-asm \    --with-http_ssl_module

注意这里的要和你下载的一致

使用VS命令行执行下面的命令

nmake -f objs/Makefile

报错：

This perl implementation doesn&＃39;t produce Windows like paths (with backward

slash directory separators).  Please use an implementation that matches your

building platform.

不要使用msys2自带的perl，重新下载并配置正确的环境变量

perl下载地址：https://strawberryperl.com/

成功了

把这个复制出来就可以用了

nginx的环境变量重新配置一下，因为之前安装过nginx，改端口等等，回到原点了。

下面配置nginx

rtmp {server {listen 1935;application live {live on;}application hls {live on;hls on;hls_path temp/hls;hls_fragment 8s;}}
}

使用命令：ffmpeg -i "rtsp://账号:密码@192.168.1.64:554/ch1/sub/av_stream" -vcodec h264 -f flv -an "rtmp://localhost:1935/live/1000"

成功

VLC打开：http://localhost:8080/live?port=1935&app=live&stream=1000

没有问题，

然后就可以使用flv.js

访问了

但是延迟说实话真的是有点高，5s以上，需要优化一下，大家有什么优化的思路，可以留言讨论一下，谢谢！