关于海康威视在chrome 浏览器的问题

最新推荐文章于 2024-12-19 11:07:51 发布

BUG创建者

最新推荐文章于 2024-12-19 11:07:51 发布

阅读量1.9w

点赞数 1

分类专栏：前端 html5 vue 文章标签： chrome vue 海康威视 H5stream Vlc

本文链接：https://blog.csdn.net/wzwzwz555/article/details/108662332

版权

前端同时被 3 个专栏收录

50 篇文章 1 订阅

订阅专栏

vue

31 篇文章 1 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

最近公司接入了海康威视的摄像头开始研究关于海康威视的东西，开始给的32，64 各种版本的插件包，发现在chrome高版本浏览器上无法展示，只能在ie上展示
后面开发人员有给发了无插件的版本看了一下是ngix代理服务器，加c++ 需求直接展示，在网上找关于
H5Stream
通过RTSP协议完成实时传输和显示摄像头画面的功能，海康威视的web控件对高版本Chrome不予支持

然后找到摄像机上面视频流
海康威视IP摄像头rtsp协议地址如下：

rtsp://[username]:[passwd]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream

说明：
username：用户名，例如admin
passwd：密码，例如12345
ip：设备的ip地址，例如192.0.0.64
port：端口号默认554，若为默认可以不写
codec：有h264、MPEG-4、mpeg4这几种
channel：通道号，起始为1
subtype：码流类型，主码流为main,子码流为sub

例如，请求海康IP摄像机通道1的码流，url如下：
主码流：

rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream
rtsp://admin:12345@192.0.0.64:554/MPEG-4/ch1/main/av_stream

子码流：

rtsp://admin:12345@192.0.0.64/mpeg4/ch1/sub/av_stream
rtsp://admin:12345@192.0.0.64/h264/ch1/sub/av_stream

按照上面拼接好自己的视频流如果不放心可以使用vlc 打开VLC播放器，选择打开网络串流（VLC播放器下载地址）
在这里插入图片描述
就可以看见画面了

下载对应的版本 H5stream下载
在这里插入图片描述
下载后打开conf里面的h5ss.conf修改strUrl和你的摄像头的上密码保存

然后再点击h5ss.bat
或者点击h5ss.exe开启我们的服务这里默认的是8080端口

在这里插入图片描述
点击在右侧

剩下的就是将www文件中的demo文件在vue项目中移植过去

          <div class="h5videodiv">
        <video class="h5video" id="h5sVideo1"  autoplay webkit-playsinline playsinline style="width: 909px;height:550px;">
        </video>
        <div class="playpause" id="playpause1" ></div>
    </div>

   createH5Video() {
            let conf1 = {
                videoid: 'h5sVideo1',
                protocol: window.location.protocol,
                host: 'localhost:8080',//window.location.host,
                rootpath: '/',
                token: 'token1',
                hlsver: 'v1',
                session: 'c1782caf-b670-42d8-ba90-2342340ee83'
            }
            this.v1 = H5sPlayerCreate(conf1)
            this.v1.connect()
           },

在这里插入图片描述
感谢 https://www.jianshu.com/p/75aac9258637和https://blog.csdn.net/weixin_41196185/article/details/81111430大佬文章的指引