使用海康威视设备在Web端显示实时视频

前言

目前做的项目，需要Web端显示实时视频数据。本次项目使用的是海康威视的摄像头进行实时监控。

硬件：萤石的摄像头(海康威视旗下的)，海康威视的硬盘录像机。

软件：vlc 2.2.6版本。

Web端和移动端接入萤石云平台的视频数据​ https://blog.csdn.net/qq_38289815/article/details/92615824

海康威视Web端视频开发 https://blog.csdn.net/qq_38289815/article/details/92428396

萤石云摄像头Http接口云台控制开发 https://blog.csdn.net/qq_38289815/article/details/94288310

 

前期工作：

将视频摄像头和海康威视的硬盘录像机连接在同一网段，并设置好硬盘录像机的IP地址和端口号。摄像头要通过通道管理设置通道号，IP通道地址等。

下载 vlc ：

地址：http://download.videolan.org/vlc/2.2.6/win64/

 

安装好vlc后进行如下操作

(1)打开媒体中的流

(2)在网络中设置RTSP并选择串流

参数如下：

(3)点击下一个后在新目标选择HTTP并点击添加

(4)设置端口和路径

(5)选择Video - Theor + Vorbis (OGG)

(6)选择流所有通量流，最后点击流结束设置

 

没有报错时，可以打开网络串流后点击播放。如果报错了，需要检查相应的参数有没有填写对，也有可能是端口被占用的情况。

 

正常显示图像

 

完成上述工作后，在Web端复制如下代码：

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://[账号]:[密码]@[设备IP地址]/MPEG-4/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>
<video src="http://[本机IP地址]:[端口]/testVideo" width="600" height="450" autoplay="autoplay"  loop="loop"></video>

统一回复一下各位遇到问题的小伙伴，这个方法是我之前尝试过的，现在身边已经没有相应的设备和环境了，想复现比较难。如果遇到 vlc 播放器有视频数据而网页没有显示，则应该检查 IP、端口号、vlc版本问题和硬盘录像机的设置。若本机 IP 没有错，可以多尝试几个端口(尽量往大了试)，看能不能解决问题。如果这个方法不行，可以尝试一下开头的其他方式。

注意：摄像头和硬盘录像机不在同一网段可能导致无法显示图像。