前端使用海康WEB播放器插件，播放摄像头监控视频 |
您所在的位置：网站首页 › 海康摄像头要下载什么app › 前端使用海康WEB播放器插件，播放摄像头监控视频 |
前端使用海康WEB播放器插件，播放摄像头监控视频
|
基于海康的WEB播放器插件，实现海康摄像头播放功能
之前的文章中有过前端播放直播或者监控视频，用过两个播放器，一个是前面有教程的cyberplayer百度智能云提供的WEB播放器，实现了功能，后来又用了EasyPlayer播放器也实现了，为啥要换呢，因为百度的播放器不支持H265编码格式，只能播H264的，EasyPlayer官方说明支持H265编码。现在用的海康官方的WEB播放器插件，这个就不是播流了，传每个摄像头的IndexCode播放监控, 海康的插件下载地址https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10 先看下实现的效果： 重点代码： var oWebControl = null;// 插件对象 var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器 var pubKey = ''; var initCount = 0; var ele = document.getElementById('playWnd');//父元素宽 var widtH = ele.offsetWidth; var off = document.getElementById('setHeight');//爷元素高 var heighT = off.offsetHeight; console.log(ele.offsetWidth) console.log(off.offsetHeight) function UpdateMultiPlayValue() { var sel = document.getElementById("isMultiPlay"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v) { document.getElementById("multiPlayWndIds").style.display = "";//显示 } else { document.getElementById("multiPlayWndIds").style.display = "none";//隐藏 } } function UpdateStopPlayValue() { var sel = document.getElementById("stopMode"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v) { document.getElementById("multiStopPlayWndIds").style.display = "";//显示 } else { document.getElementById("multiStopPlayWndIds").style.display = "none";//隐藏 } } function UpdateValue() { var sel = document.getElementById("isHttps"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (0 == v) { document.getElementById("port").value = 80; } else { document.getElementById("port").value = 443; } } function UpdatePlayTypeValue() { var sel = document.getElementById("PlayType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (2 == v) { //获取布局，并显示标签和窗口选择下拉框 document.getElementById("PreviewWndId").style.display = "";//显示 oWebControl.JS_RequestInterface({ funcName: "getLayout" }).then(function (oData) { //分析窗口数 //{"errorCode":0,"errorModule":0,"responseMsg":{"code":0,"data":"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n"},"sequence":"93298475-03d0-49c9-bc3a-a94ec696f983","uuid":"{c76078b4-4f19-4198-b68d-83df1d3d71a9}"} //"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n" var Data = JSON.stringify(oData.responseMsg.data); //"{ \"layout\": \"2x2\", \"wndNum\": 4}" Data = Data.replace(/\\n/g, ""); //"{ "layout": "2x2", "wndNum": 4}" Data = Data.replace(/\\/g, ""); //{ "layout": "2x2", "wndNum": 4}" Data = Data.replace(/\"{/g, "{"); //{ "layout": "2x2", "wndNum": 4}" Data = Data.replace(/}\"/g, "}"); var DataNum = JSON.parse(Data).wndNum; createSelectOption(DataNum); }); } else { //隐藏标签和窗口选择下拉框 document.getElementById("PreviewWndId").style.display = "none";//隐藏 } } function createSelectOption(wndNum) { var _html = ""; //先清空之后再添加 $("#playWndId").empty(); for (var _i = 0; _i < wndNum; _i++) { _html = _html + "" + (_i + 1) + ""; } $("#playWndId").append(_html); } function UpdateSnapTypeValue() { var sel = document.getElementById("SnapType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v) { //获取布局，并显示标签和窗口选择下拉框 document.getElementById("SnapShotWndId").style.display = "";//显示 oWebControl.JS_RequestInterface({ funcName: "getLayout" }).then(function (oData) { //分析窗口数 var Data = JSON.stringify(oData.responseMsg.data); Data = Data.replace(/\\n/g, ""); Data = Data.replace(/\\/g, ""); Data = Data.replace(/\"{/g, "{"); Data = Data.replace(/}\"/g, "}"); var DataNum = JSON.parse(Data).wndNum; createSnapSelectOption(DataNum); }); } else { //隐藏标签和窗口选择下拉框 document.getElementById("SnapShotWndId").style.display = "none";//隐藏 } } function createSnapSelectOption(wndNum) { var _html = ""; //先清空之后再添加 $("#SnapWndId").empty(); for (var _i = 0; _i < wndNum; _i++) { _html = _html + "" + (_i + 1) + ""; } $("#SnapWndId").append(_html); } function UpdateSetOSDTypeValue() { var sel = document.getElementById("SetOSDType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v) { //获取布局，并显示标签和窗口选择下拉框 document.getElementById("SetOSDWndId").style.display = "";//显示 oWebControl.JS_RequestInterface({ funcName: "getLayout" }).then(function (oData) { //分析窗口数 var Data = JSON.stringify(oData.responseMsg.data); Data = Data.replace(/\\n/g, ""); Data = Data.replace(/\\/g, ""); Data = Data.replace(/\"{/g, "{"); Data = Data.replace(/}\"/g, "}"); var DataNum = JSON.parse(Data).wndNum; createSetOSDSelectOption(DataNum); }); } else { //隐藏标签和窗口选择下拉框 document.getElementById("SetOSDWndId").style.display = "none";//隐藏 } } function createSetOSDSelectOption(wndNum) { var _html = ""; //先清空之后再添加 $("#osdWndId").empty(); for (var _i = 0; _i < wndNum; _i++) { _html = _html + "" + (_i + 1) + ""; } $("#osdWndId").append(_html); } // 标签关闭 $(window).unload(function () { if (oWebControl != null) { oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 oWebControl.JS_Disconnect().then(function () { }, function () { }); } }); // 窗口resize $(window).resize(function () { if (oWebControl != null) { oWebControl.JS_Resize(widtH, heighT); setWndCover(); } }); // 滚动条scroll $(window).scroll(function () { if (oWebControl != null) { oWebControl.JS_Resize(widtH, heighT); 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 > 800) ? 800 : iCoverLeft; iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop; iCoverRight = (iCoverRight > 800) ? 800 : iCoverRight; iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom; oWebControl.JS_RepairPartWindow(0, 0, 801, 400); // 多1个像素点防止还原后边界缺失一个像素条 if (iCoverLeft != 0) { oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 400); } if (iCoverTop != 0) { oWebControl.JS_CuttingPartWindow(0, 0, 801, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 } if (iCoverRight != 0) { oWebControl.JS_CuttingPartWindow(800 - iCoverRight, 0, iCoverRight, 400); } if (iCoverBottom != 0) { oWebControl.JS_CuttingPartWindow(0, 400 - iCoverBottom, 800, iCoverBottom); } } // 初始化插件 function initPlugin() { oWebControl = new WebControl({ szPluginContainer: "playWnd", iServicePortStart: 15900, iServicePortEnd: 15909, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid cbConnectSuccess: function () { initCount = 0; setCallbacks(); oWebControl.JS_StartService("window", { dllPath: "./VideoPluginConnect.dll" }).then(function () { oWebControl.JS_CreateWnd("playWnd", 800, 400).then(function () { console.log("JS_CreateWnd success"); }); }, function () { }); }, cbConnectError: function () { console.log("cbConnectError"); oWebControl = null; $("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); WebControl.JS_WakeUp("VideoWebPlugin://"); 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; } }); } initPlugin(); // 获取公钥 function getPubKey(callback) { // pubKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC6nxNdtHShP1QHDxlsaNU4+XM+mXVJw5MC2X6Dj5ND5Ce+Pj4Pu1PsXFEvpfmErO5phqh+rTa7fGXqT/anF3jogG734+mIO7XP9Dcb9nPE7Yw4/VLXk0NT/Fh3NZjF3OhZa+aGgNcRIZx7f2YHIondw+oZtEWKAnnsStOSNkDcxwIDAQAB"; // 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() } }) } // 设置窗口控制回调 function setCallbacks() { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: cbIntegrationCallBack }); } // 推送消息 function cbIntegrationCallBack(oData) { showCBInfo(JSON.stringify(oData.responseMsg)); } // RSA加密 function setEncrypt(value) { var encrypt = new JSEncrypt(); encrypt.setPublicKey(pubKey); return encrypt.encrypt(value); } // 初始化 $("#init").click(function () { console.log('初始化') getPubKey(function () { var appkey = 'xxxxxxx';//必要参数，从海康平台拿 var secret = setEncrypt('xxxxxxxx');//必要参数，从海康平台拿 var ip = '你的ip'; var szPort = $("#port").val();//端口433 var snapDir = $("#snapDir").val();//参数都在下面有html代码 var videoDir = $("#videoDir").val(); var layout = $("#layout").val(); var encryptedFields = ['secret']; var szShowToolbar = $("#isShowToolbar").val(); var szShowSmart = $("#isShowSmart").val(); var btIds = $("#btId").val(); var rectTimes = $("#reconnectTimes").val(); var rectDuration = $("#duration").val(); var sel = document.getElementById("langu |
跟之前的文章里的样子效果一样，就是下面的播放监控换成海康提供的插件，播放流畅了许多，也不卡顿了。也可全屏四宫格和放大单独一个， 引入必要JS文件，插件JS【本文地址】
今日新闻 |
推荐新闻 |