海康威视WEB插件开发海康监控视频简单浏览功能

用心飞翔
1,889 阅读2分钟

需求：借助海康插件，集成海康监控视频，解决前端rtsp协议没法播放问题，现在插件已经支持高版本浏览器，因为项目是原生js，所以本篇围绕原生js来写，vue的实现请参考文末链接； 准备，厂家需要提供安防平台，因为取流都是从安防平台那里取流，需要部署后的ip,端口号，ak,sk，具体术语请移步官网查阅，监控点信息， 最终实现如下图所示：可根据后台数据灵活切换布局：

image.png

1.下载海康平台提供的插件包，安装插件，仔细阅读开发文档，

image.png

下载第一个，插件默认安装到c盘，不要动 然后运行demo,输入安防平台的 监控点，能正常浏览说明安装插件没问题，

2.开始改造demo,请仔细阅读文档，步骤是初始化->创建插件实例->播放浏览监控点信息, 可以设置一个集合播放多路监控点信息，布局主要是layout字段，

3.改造代码，集成到项目中， `

兴宁市全域旅游大数据分析平台-景区视频监控系统 .playWnd { margin-top:120px; margin-left: 20px; margin-right: 20px; width: 1000px; /*播放容器的宽和高设定*/ height: 800px; border: 1px solid red; } </style> </head> <body> <div class="p pagesv vidobox"> <div class="topb"> <div class="topbtbg"> <div class="topbttxt"><b>兴宁市全域旅游大数据平台</b> </div><a class="returnindex" href="default.html">返回首页</a> <div class="topbt2txt"> <div class="topbt2txt01"><a>客流分析系统</a> </div> <div class="topbt2txt02"><a>数据分析系统</a> </div> </div> </div> <div class="sectpage" style=" position: absolute; left: 25%; top: 3.5rem; right: 25%; bottom: auto; height: 2rem; font-size: 1rem;"> <select class="scetv" id="sectvd" style="height: 1.5rem; margin-top: 18px;"> </select> <div class="scetp"> <span>共<i id="zvnum">0</i>个摄像头,&nbsp;</span> <a class="unexta upp">上一页</a> <span class="vp"></span> <a class="unexta downp">下一页</a> </div> </div> </div> <div class="topmens"> <div class="topbtns"> 
        <a class="btn9 "  href="dest.html"><span class="btn-inner">全域客流分析</span>
        <div class="bgsqr1"></div>
        <div class="bgsqr2"></div>
        <div class="bgsqr3"></div>
        <div class="bgsqr4"></div></a>
        <a class="btn9 " href="index.html">
            <span class="btn-inner">景区客流分析</span>
            <div class="bgsqr1"></div>
            <div class="bgsqr2"></div>
            <div class="bgsqr3"></div>
            <div class="bgsqr4"></div>
        </a>


        <a class="btn9 actv" href="vdo.html">
            <span class="btn-inner">景区视频监控</span>
            <div class="bgsqr1"></div>
            <div class="bgsqr2"></div>
            <div class="bgsqr3"></div>
            <div class="bgsqr4"></div>
        </a></div>
网络舆情分析 
                  <a class="btn9 "  href="chanyeyx.html"><span class="btn-inner">产业运行监测</span>
                <div class="bgsqr1"></div>
                <div class="bgsqr2"></div>
                <div class="bgsqr3"></div>
                <div class="bgsqr4"></div></a>

                                <a class="btn9"  href="yingjizh.html"><span class="btn-inner">应急指挥系统</span>
                <div class="bgsqr1"></div>
                <div class="bgsqr2"></div>
                <div class="bgsqr3"></div>
                <div class="bgsqr4"></div></a>

                                <!-- <a class="btn9"  href="datacenter.html"><span class="btn-inner">数据中心</span>
                <div class="bgsqr1"></div>
                <div class="bgsqr2"></div>
                <div class="bgsqr3"></div>
                <div class="bgsqr4"></div></a>             -->

                </div>
 <div class="clotx">
    <span><b id="CurrentW1">10</b></span>

查看更多 

        </div>
    </div>
</body>
<div class="p datebox"  style="min-width: 25%;display: none;">
    <select class=' sd1' id="seljingqu" style="float: right;">
        <option></option>
    </select>
查询 
	   <div id="playWnd" class="playWnd" style="left: 0px; top: 133px;"></div>
	   <script src="jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
	   <script src="jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
<script src="js/jquerysession.js"></script><script src="js/index.js"></script>
      <script src="js/dateindex.js"></script>


<script language="javascript">

    var tp = 0;
    var tptot = 0;
    var vlist = [];
    var tkns = [];
	//初始化布局，可以根据后台返回的字段做判断，更改布局
	var layout = "2x2"; 
	//初始化监控点集合，播放多路视频需要
	var d1 = [	{	cameraIndexCode: "5678aae10da44ca88dfe7be54d846bcd",	ezvizDirect: 0,	gpuMode: 0,	streamMode: 0,	transMode: 1,	wndId: 1	},	{	cameraIndexCode: "ad3ea9ddf4924150b5d3d6f26219b83f",	ezvizDirect: 0,	gpuMode: 0,	streamMode: 0,	transMode: 1,	wndId: 2	}		  	];

$(document).ready(function() {
      initPlugin()
    $.ajax({
        url: weburl + "travelapi/video/getVideoScenicInfo",
        async: true,
        cache: false,
        dataType : 'json',
        type: 'post',     
        contentType: 'application/json',
        headers: heder,
        /*data: JSON.stringify({
          "password": "admin123",
          "username": "admin",
          "ip":"121.10.160.11",
          "port":"10002",
          "channel":"1",
          "stream":"0",
          "factory":"DH"
        }),*/
        success: function(resp, textStatus) {
            var jsonObj = resp;
             s = eval('(' + jsonObj.msg + ')');
         
			console.log(s)
            for (var i = 0; i < s.length; i++) {
              vlist[i] = {scenicId:s[i].scenicId,name:s[i].scenicName,value:s[i].videonum,zb:s[i].videonum};
            }

            showselectv();
        },
          error: function() {}
    });

     });

    function showselectv(){

        $("#sectvd").empty();
        for(var i=0;i<vlist.length;i++){
            $("#sectvd").append("<option value='"+vlist[i].value+"'>"+vlist[i].name+"</option>");
        }
        $("#sectvd").find("option:contains('"+ vlist[0].name +"')").attr("selected",true);
        tptot = vlist[0].value;
        showpagenub(tptot);

    
    }

    function showpagenub(tn){
        var n=tn;
        tptot = n;
        var p=Math.ceil(n/6);
        tp = p;
        $(".vp").html("");
        $(".vp a").remove();        
        $("#zvnum").html(n);
        if(n>0){
            for(var i=0;i<p;i++){
                $(".vp").append("<a class='pnumsa' >"+(i+1)+"</a>");
            }
            $(".vp a:first-child").addClass("npnum");
            showvds(1);
        }
    };

    $('.vdocnt').on('click',"a", function() {
        //var c1 = $(this).parent().attr("class");
        //var v1 = $(".vx1").attr("class");
        //$(".vx1").attr("class","").addClass(c1);
        //$(this).parent().attr("class","").addClass(v1);
        //alert($(this));
        console.log($(this).parent().html());
        var t = $(this).parent().html();
        $(".allscreen").append(t);
        $(".allscreen").css("display","block");
        $('.allscreen').on('click',"a", function() {
            $(".allscreen").empty();
            $(".allscreen").css("display","none");
        });
        //

    });
    
    $("#sectvd").change(function(e){
		
        var n=$("#sectvd").val();
		var j=$("#sectvd  option:selected").text();
		console.log(j,899999)
		if(j=="逍遥谷"){
			d1=[{
	cameraIndexCode: "5678aae10da44ca88dfe7be54d846bcd",
	ezvizDirect: 0,
	gpuMode: 0,
	streamMode: 0,
	transMode: 1,
	wndId: 1
	},
	{
	cameraIndexCode: "ad3ea9ddf4924150b5d3d6f26219b83f",
	ezvizDirect: 0,
	gpuMode: 0,
	streamMode: 0,
	transMode: 1,
	wndId: 2
	}]
		}
		if(j=="罗屏汉"){
				d1=[{
		cameraIndexCode: "75051698a1014611acf2d941d5379142",
		ezvizDirect: 0,
		gpuMode: 0,
		streamMode: 0,
		transMode: 1,
		wndId: 1
		},
		{
		cameraIndexCode: "e968f30c140a4a40846b37c08da587ce",
		ezvizDirect: 0,
		gpuMode: 0,
		streamMode: 0,
		transMode: 1,
		wndId: 2
		}]
			}
		if(j=="两镇五村"){
				d1=[{
		cameraIndexCode: "6635498509a54a139bb466e91bd795f7",
		ezvizDirect: 0,
		gpuMode: 0,
		streamMode: 0,
		transMode: 1,
		wndId: 1
		},
		{
		cameraIndexCode: "f3af7f8355574abb8524663b6bf0afea",
		ezvizDirect: 0,
		gpuMode: 0,
		streamMode: 0,
		transMode: 1,
		wndId: 2
		}]
			}
			if(j=="刁萃丰"){
					d1=[{
			cameraIndexCode: "6537c95fb7bf403b88d19827e6c6eaa2",
			ezvizDirect: 0,
			gpuMode: 0,
			streamMode: 0,
			transMode: 1,
			wndId: 1
			},
			{
			cameraIndexCode: "d3a8317319da443c9fc3148a38b21269",
			ezvizDirect: 0,
			gpuMode: 0,
			streamMode: 0,
			transMode: 1,
			wndId: 2
			}]
				}
				if(j=="光夏村"){
						d1=[{
				cameraIndexCode: "ad9c3c1427f947a2a1da1f4711c7df2e",
				ezvizDirect: 0,
				gpuMode: 0,
				streamMode: 0,
				transMode: 1,
				wndId: 1
				},
				{
				cameraIndexCode: "ad9c3c1427f947a2a1da1f4711c7df2e",
				ezvizDirect: 0,
				gpuMode: 0,
				streamMode: 0,
				transMode: 1,
				wndId: 2
				}]
					}
					if(j=="神光山"){
							d1=[{
					cameraIndexCode: "8577d646412d4446aaeff1e97d2acc7d",
					ezvizDirect: 0,
					gpuMode: 0,
					streamMode: 0,
					transMode: 1,
					wndId: 1
					},
					{
					cameraIndexCode:"24314e48769e4315a0ecb674d8096aa2",
					ezvizDirect: 0,
					gpuMode: 0,
					streamMode: 0,
					transMode: 1,
					wndId: 2
					},
					{
					cameraIndexCode: "eda9fbfbed3743218584990fc59f0243",
					ezvizDirect: 0,
					gpuMode: 0,
					streamMode: 0,
					transMode: 1,
					wndId: 3
					},
					{
					cameraIndexCode: "1541c2a4b2af47a4909f16324b62717c",
					ezvizDirect: 0,
					gpuMode: 0,
					streamMode: 0,
					transMode: 1,
					wndId: 4
					},
					]
						}
        showpagenub(n);
		initPlugin();
    });

    $('.vp').on('click',"a", function() {           
        var upn = parseInt($(this).html());         
        if(upn>=1 && upn<tp+1){
            $(".vp a.npnum").removeClass("npnum");
            $(".vp a:eq("+ (upn-1) +")").addClass("npnum");
            showvds(upn);
			
        }
    });

    $(".unexta.upp").click(function() {
        var upn = parseInt($(".npnum").html());         
        if(upn>1 && upn<tp+1){
            $(".vp a.npnum").removeClass("npnum");
            $(".vp a:eq("+ (upn-2) +")").addClass("npnum");
            showvds(upn-1);
        }
    });

    $(".unexta.downp").click(function() {
        var upn = parseInt($(".npnum").html());
        if(upn>0 && upn<tp){
            $(".vp a.npnum").removeClass("npnum");
            $(".vp a:eq("+ (upn) +")").addClass("npnum");
            showvds(upn+1);
        }
    });

    function showvds(upn){
        upn= parseInt(upn);
        $(".vdocnt").empty();
        var bnum = (upn-1)*6;
        var t1 = 0 ;
        var jqtname=$("#sectvd").find("option:selected").text();
        $.ajax({
        url: weburl + "travelapi/video/getScenicVideo",
        async: true,
        cache: false,
        dataType : 'json',
        type: 'get',     
        //contentType: 'application/json',
        headers: heder,
        data: {
          "snID": "",
          "snName": jqtname,
          "startPage":upn,
          "offset":"6"
        },
        success: function(resp, textStatus) {
            var jsonObj = resp;
            s = eval('(' + jsonObj.msg + ')');
			console.log(s)
			//根据后台条数布局
            
//             var t=s.length
			// if(t==1){
			// 	layout="1x1"
			// }
			// if(t==2){
			// 	layout="1x2"
			// }
			// if(t==3){
			// 	layout="1+2"
			// }
			// if(t==4){
			// 	layout="2x2"
			// }
			// if(t==5||s==6){
			// 	layout="1+5"
			// }
			// if(t==7||s==8){
			// 	layout="1+7"
			// }
			// if(t>9){
			// 	layout="3x3"
			// }
            for (var i = 0; i < s.length; i++) {
				//根据后台数据请求读取监控点信息
                // d1[i] = {cameraIndexCode: "ad3ea9ddf4924150b5d3d6f26219b83f",
                // ezvizDirect: 0,
                // gpuMode: 0,
                // streamMode: 0,
                // transMode: 1,
                // wndId: i+1
                // };
               

            }
			// 更改数据后再次初始化一下，重新创建插件实例
			initPlugin()
         
		},
          error: function() {}
    });

//视频插件播放逻辑 //声明公用变量 var initCount = 0; var pubKey = ''; // var pubKey1 = '';

//创建预览 function openVideo(){ oWebControl.JS_RequestInterface({ funcName: "startMultiPreviewByCameraIndexCode", argument: { list: d1

  }
  })

}

// 创建播放实例
function initPlugin () {
    oWebControl = new WebControl({
        szPluginContainer: "playWnd",                       // 指定容器id
		iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
		iServicePortEnd: 15909,                             
		szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: function () {                     // 创建WebControl实例成功											
			oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
				dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
			}).then(function () {                           // 启动插件服务成功
				oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
					cbIntegrationCallBack: cbIntegrationCallBack
				});
				
				oWebControl.JS_CreateWnd("playWnd", 1800, 700).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
					init();  // 创建播放实例成功后初始化
				});
			}, function () { // 启动插件服务失败
			});
		},
		cbConnectError: function () { // 创建WebControl实例失败
			oWebControl = null;
			$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
			WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
			initCount ++;
			if (initCount < 3) {                             
				setTimeout(function () {
					initPlugin();
				}, 3000)
			} else {
				$("#playWnd").html("插件启动失败，请检查插件是否安装！");
			}
		},
		cbConnectClose: function (bNormalClose) {            
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true	
			console.log("cbConnectClose");
			oWebControl = null;
		}
	});
}

// 初始化插件2

// 设置窗口控制回调
function setCallbacks() {
    oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: cbIntegrationCallBack
    });
	
}
// function setCallbacks1() {
//     oWebControl1.JS_SetWindowControlCallback({
//         cbIntegrationCallBack1: cbIntegrationCallBack1
//     });
// }

// 推送消息
function cbIntegrationCallBack(oData) {
    // showCBInfo(JSON.stringify(oData.responseMsg));
}
// function cbIntegrationCallBack1(oData) {
//     showCBInfo(JSON.stringify(oData.responseMsg));
// }

//初始化
function init()
{
    getPubKey(function () {
		////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
			//此处变量值请自行修改，根据个人安防平台来，后期可以根据后台集成不同安防平台的监控
        var appkey = "2522222";                           //综合安防管理平台提供的appkey，必填
        var secret = setEncrypt("");   //综合安防管理平台提供的secret，必填
        var ip = "";                           //综合安防管理平台IP地址，必填
        var playMode = 0;                                  //初始播放模式：0-预览，1-回放
        var port = 1443;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
        var snapDir = "D:\\SnapDir";                       //抓图存储路径
        var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
        // var layout = "1x2";                                //playMode指定模式的布局
        var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
		var showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
		var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
		var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
		////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

        oWebControl.JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
                appkey: appkey,                            //API网关提供的appkey
                secret: secret,                            //API网关提供的secret
                ip: ip,                                    //API网关IP地址
                playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
                port: port,                                //端口
                snapDir: snapDir,                          //抓图存储路径
                videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
                layout:layout,                            //布局
                enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
                encryptedFields: encryptedFields,          //加密字段
				showToolbar: showToolbar,                  //是否显示工具栏
				showSmart: showSmart,                      //是否显示智能信息
				buttonIDs: buttonIDs                       //自定义工具条按钮
            })
        }).then(function (oData) {
			oWebControl.JS_Resize(1870, 700);
			 // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
        });
		
		openVideo()
		
    });
}


//获取公钥
function getPubKey (callback) {
    oWebControl.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
            keyLength: 1024
        })
    }).then(function (oData) {
        console.log(oData);
        if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback()
        }
    })

}


//RSA加密
function setEncrypt (value) {
    var encrypt = new JSEncrypt();
    encrypt.setPublicKey(pubKey);
    return encrypt.encrypt(value);
}


// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
 $(window).resize(function () { 
    if (oWebControl != null) {
        oWebControl.JS_Resize(1870, 700);
        setWndCover();
    }
});


// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(function () {
    if (oWebControl != null) {
        oWebControl.JS_Resize(1870, 700);
        setWndCover();
    }
});



// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
    var iWidth = $(window).width();
    var iHeight = $(window).height();
    var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

    var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
    var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
    var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
    var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

    iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
    iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
    iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
    iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

	oWebControl.JS_RepairPartWindow(0, 0, 1001, 600);    // 多1个像素点防止还原后边界缺失一个像素条
    if (iCoverLeft != 0) {
		oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
    }
    if (iCoverTop != 0) {
        oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
    }
    if (iCoverRight != 0) {
        oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
    }
    if (iCoverBottom != 0) {
        oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
    }
}

  
//停止全部预览
$("#stopAllPreview").click(function () {
    oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview"
    });
});
// //停止全部预览
// $("#stopAllPreview").click(function () {
//     oWebControl.JS_RequestInterface({
//         funcName: "stopAllPreview"
//     });
// });

// 标签关闭
$(window).unload(function () {
    if (oWebControl != null){
		oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
        oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
		}, 
		function() {  // 断开与插件服务连接失败
		});
    }
});

里面有其它的代码逻辑，请根据自己的需求需改`

vue的实现原文链接：blog.csdn.net/bosslay/art…

重要的事：一定要多看文档，多看文档，后面其它功能慢慢集成进去，

avatar
文章
阅读
粉丝