海康威视视频监控对接(web3.0控件)

本文介绍了如何在web端利用海康威视的web3.0开发包实现摄像头视频展示,重点在于解决自动配置流程,以满足打开页面即显示监控画面的需求。在Vue项目中,需要在index.html中引入控件JS,并通过window.WebVideoCtrl进行交互。
摘要由CSDN通过智能技术生成

海康威视摄像头在web端视频展示

web3.0开发包 中有demo,有文档,有中英文版,有exe控件。(对浏览器有限制,360能用)

下载运行后看到如下界面

填写自己的设备信息,用户名密码,点击登陆,点击预览按钮,即可实现预览功能。

以上功能需要自己手动点击配置,然而需求中都是打开页面自己看到监控画面,所以一套流程需要自动完成


  • 视频自动登陆获取
  • 视频画面一个接一个依次出现
  • 总10个摄像头,可轮播一次展示4个,隔段时间展示另四个

代码流程

// 设备列表
var deviceListArray = [
	{
		szIP: '172.16.77.100',
		szPort: '80',
		szUsername: 'admin',
		szPassword: '*****'
	},
	{
		szIP: '172.16.77.100',
		szPort: '80',
		szUsername: 'admin',
		szPassword: '*****'
	},
	{
		szIP: '172.16.77.100',
		szPort: '80',
		szUsername: 'admin',
		szPassword: '*****'
	},
	{
		szIP: '172.16.77.100',
		szPort: '80',
		szUsername: 'admin',
		szPassword: '*****'
	},
	{
		szIP: 
  • 4
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值