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

31 篇文章 1 订阅
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大佬文章的指引

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值