海康Web3.0控件实现摄像头画面内联iframe网页预览

linziping

已于 2022-01-20 13:52:30 修改

阅读量6.2k

点赞数 2

文章标签： html 海康摄像头网页预览 web3.0 webComponents

于 2021-12-16 14:24:28 首次发布

本文链接：https://blog.csdn.net/linziping/article/details/121970334

版权

该教程详细介绍了如何通过安装WebComponents控件和web3.0插件，在网页上以内联iframe方式实现摄像头画面预览。步骤包括安装控件，配置浏览器，创建iframe页面，编写JavaScript脚本进行登录和播放操作，以及在主页面引用iframe并实现多个摄像头预览。整个过程涉及到了Web视频控制、JavaScript编程和摄像头的连接与播放。

摘要由CSDN通过智能技术生成

使用海康web3.0控件实现摄像头画面内联iframe网页预览

1、安装WebComponents.exe、WebComponentsKit.exe控件
注意：安装时，需关闭IE浏览器
2.安装控件后，启动IE浏览器，修改浏览器设置-Internet选项
在这里插入图片描述
3、下载相应版本的web3.0插件(64位/32位)
4、创建iframe.html页面作为显示画面的容器

<body>
    <div id="divPlugin" class="plugin"></div>
</body>
<script type="text/javascript" src="../plugins/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../plugins/sdkWeb3.0/codebase/webVideoCtrl.js"></script> // 引用web3.0插件
<script>
$(function () {
    const oPlugin = {
        iWidth: '100%', // plugin width
        iHeight: '100%' // plugin height
    };
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,// 窗口双击全屏
        iWndowType: 1, // 分屏类型：1- 1*1(单画面)，2- 2*2，3- 3*3，4- 4*4
        cbInitPluginComplete: function () { // 插件初始化完成回调，必须定义
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); // 在 HTML DOM 元素中插入播放插件，参数容器元素id
        }
    });
});
</script>

5、在主页面main.html以内联iframe形式引用iframe.html页面

<div id="video1" class="video-box">
	<!-- 引用内联iframe.html -->
	<iframe src="iframe.html" frameborder="0"></iframe> 
</div>
<div id="video2" class="video-box">
	<!-- 引用内联iframe.html-->
	<iframe src="iframe.html" frameborder="0"></iframe> 
</div>
<!-- 引用插件 -->
<script type="text/javascript" src="../plugins/sdkWeb3.0/codebase/webVideoCtrl.js"></script>

6、在主页面main.html编写编写相关脚本

var g_aIframe = $("iframe"); 
var ips = ['192.168.12.31', '192.168.12.32', '192.168.12.33']; // 3个ip摄像头地址
var ipData = [];
var webVideoCtrl = {
	"192.168.12.31":"",
	"192.168.12.32":"",
	"192.168.12.33":""
};
$(function () {
    // 检查插件是否安装
    let iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您还未安装过WebComponentsKit.exe插件！");
        return;
    }
    // 窗口关闭，停止播放
    $(window).unload(function () {
        $.each(g_aIframe, function (i, oIframe) {
            getWebVideoCtrl(oIframe).I_Stop();
        });
    });
    
    // iframe内联框架加载事件
    var index = 0;
  	$("iframe").load(function(){
        webVideoLoginPlay(ips[index++], this);
	}) 
	
	/*
	 * webVideoLoginPlay方法
	 * 实现webvideo登录及开始预览
	 * 参数： ip地址、oIframe iframe页面元素
	 */
	function webVideoLoginPlay(ip, oIframe){
	    webVideoCtrl[ip] = getWebVideoCtrl(oIframe); // 存储实例化的插件对象
		// 参数
	    var oLiveView = {
	        iProtocol: 1,            // 1:http, 2:https
	        szIP: ip,    // ip地址
	        szPort: "80",   // 端口号
	        szUsername: "admin",     // 摄像机账号
	        szPassword: "123456", // 密码
	        iStreamType: 2,  // 码流类型： 1主码、2子码
	        iChannelID: 1,  // 通道
	        bZeroChannel: false 
	    };
	    
	    // 登录
	    webVideoCtrl[ip].I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
	        success: function (xmlDoc) {
	            // 
	            var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; // 设备标识“ip_port”组成
	            setTimeout(function () {
	            	// 开始预览
	                webVideoCtrl[ip].I_StartRealPlay(szDeviceIdentify || oLiveView.szIP, {
	                    iStreamType: oLiveView.iStreamType,
	                    iChannelID: oLiveView.iChannelID,
	                    bZeroChannel: oLiveView.bZeroChannel
	                });
	            }, 1000);
	        }
	    });
	}
	// 获取实例化的插件对象
	function getWebVideoCtrl(oIframe) {
	    return oIframe.contentWindow.WebVideoCtrl;
	}
}）;

7、显示预览
在这里插入图片描述

linziping

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
海康Web3.0控件实现摄像头画面内联iframe网页预览

使用海康web3.0控件实现摄像头画面内联iframe网页预览1、安装WebComponentsKit.exe控件注意：安装时，需关闭IE浏览器2.安装控件后，启动IE浏览器，修改浏览器设置-Internet选项3、下载相应版本的web3.0插件(64位/32位)4、创建iframe.html页面作为显示画面的容器<body> <div id="divPlugin" class="plugin"></div></body><sc
复制链接

扫一扫