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

前言

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

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

软件：vlc 2.2.6版本。

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

海康威视Web端视频开发 http://www.javashuo.com/article/p-hpeoeajq-kb.html

萤石云摄像头Http接口云台控制开发 http://www.javashuo.com/article/p-hczgwccs-kp.html

 

前期工做：

将视频摄像头和海康威视的硬盘录像机链接在同一网段，并设置好硬盘录像机的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 没有错，能够多尝试几个端口(尽可能往大了试)，看能不能解决问题。若是这个方法不行，能够尝试一下开头的其余方式。

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