| 前端使用海康WEB播放器插件，播放摄像头监控视频 | 您所在的位置：网站首页 › 海康威视摄像头网页版下载插件不能预览 › 前端使用海康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("language"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; var language = "zh_CN"; if (1 == v) { language = "en_US"; } appkey = appkey.replace(/(^\s*)/g, ""); appkey = appkey.replace(/(\s*$)/g, ""); secret = secret.replace(/(^\s*)/g, ""); secret = secret.replace(/(\s*$)/g, ""); ip = ip.replace(/(^\s*)/g, ""); ip = ip.replace(/(\s*$)/g, ""); szPort = szPort.replace(/(^\s*)/g, ""); szPort = szPort.replace(/(\s*$)/g, ""); snapDir = snapDir.replace(/(^\s*)/g, ""); snapDir = snapDir.replace(/(\s*$)/g, ""); videoDir = videoDir.replace(/(^\s*)/g, ""); videoDir = videoDir.replace(/(\s*$)/g, ""); var port = parseInt(szPort); var showSmart = parseInt(szShowSmart); var showToolbar = parseInt(szShowToolbar); var enableHttps = parseInt($("#isHttps").val()); var reconnectTimes = parseInt(rectTimes); if (isNaN(reconnectTimes)) { reconnectTimes = 0; } var duration = parseInt(rectDuration); $(".encryptedFields").each(function (index, item) { var $item = $(item); if ($item.prop('checked')) { var value = $item.val(); if (value !== 'secret') { encryptedFields.push(value); } // secret固定加密，其它根据用户勾选加密 if (value == 'ip') { ip = setEncrypt(ip) } if (value == 'appkey') { appkey = setEncrypt(appkey) } if (value == 'snapDir') { snapDir = setEncrypt(snapDir) } if (value == 'videoDir') { videoDir = setEncrypt(videoDir) } if (value == 'layout') { layout = setEncrypt(layout) } } }) encryptedFields = encryptedFields.join(","); if (!appkey) { showCBInfo("appkey不能为空！", 'error'); return } // if (!$("#secret").val()) { // showCBInfo("secret不能为空！", 'error'); // return // } if (!ip) { showCBInfo("ip不能为空！", 'error'); return } // if (!$("#port").val()) { // showCBInfo("端口不能为空！", 'error'); // return // } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) { // showCBInfo("端口填写有误！", 'error'); // return // } console.log({ appkey: appkey, secret: secret, ip: ip, playMode: 0, // 预览 port: port, snapDir: snapDir, videoDir: videoDir, layout: layout, enableHTTPS: enableHttps, showToolbar: showToolbar, showSmart: showSmart, buttonIDs: btIds, language: language, encryptedFields: encryptedFields }) oWebControl.JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, secret: secret, ip: ip, playMode: 0, // 预览 port: port, snapDir: snapDir, videoDir: videoDir, layout: layout, enableHTTPS: enableHttps, showToolbar: showToolbar, showSmart: showSmart, buttonIDs: btIds, encryptedFields: encryptedFields, language: language, reconnectTimes: reconnectTimes, reconnectDuration: duration }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); UpdatePlayTypeValue(); UpdateSnapTypeValue(); UpdateSetOSDTypeValue(); oWebControl.JS_Resize(widtH, heighT); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 }); }) }) setTimeout(() => {//1秒触发初始化事件 $('#init').triggerHandler("click");//执行初始化点击事件 }, 1000); //选择 $('#choice').on('click', function () { console.log($('#encodeDevice').val())//点图上坐标点出现的列表，选择一个地方的摄像头，拿到IndexCode console.log('触发初始化更改') getPubKey(function () { var appkey = 'xxxxx'; var secret = setEncrypt('xxxxx'); var ip = 'xxxxx'; var szPort = $("#port").val(); var snapDir = $("#snapDir").val(); var videoDir = $("#videoDir").val(); var layout = '1x1'; 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("language"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; var language = "zh_CN"; if (1 == v) { language = "en_US"; } appkey = appkey.replace(/(^\s*)/g, ""); appkey = appkey.replace(/(\s*$)/g, ""); secret = secret.replace(/(^\s*)/g, ""); secret = secret.replace(/(\s*$)/g, ""); ip = ip.replace(/(^\s*)/g, ""); ip = ip.replace(/(\s*$)/g, ""); szPort = szPort.replace(/(^\s*)/g, ""); szPort = szPort.replace(/(\s*$)/g, ""); snapDir = snapDir.replace(/(^\s*)/g, ""); snapDir = snapDir.replace(/(\s*$)/g, ""); videoDir = videoDir.replace(/(^\s*)/g, ""); videoDir = videoDir.replace(/(\s*$)/g, ""); var port = parseInt(szPort); var showSmart = parseInt(szShowSmart); var showToolbar = parseInt(szShowToolbar); var enableHttps = parseInt($("#isHttps").val()); var reconnectTimes = parseInt(rectTimes); if (isNaN(reconnectTimes)) { reconnectTimes = 0; } var duration = parseInt(rectDuration); $(".encryptedFields").each(function (index, item) { var $item = $(item); if ($item.prop('checked')) { var value = $item.val(); if (value !== 'secret') { encryptedFields.push(value); } // secret固定加密，其它根据用户勾选加密 if (value == 'ip') { ip = setEncrypt(ip) } if (value == 'appkey') { appkey = setEncrypt(appkey) } if (value == 'snapDir') { snapDir = setEncrypt(snapDir) } if (value == 'videoDir') { videoDir = setEncrypt(videoDir) } if (value == 'layout') { layout = setEncrypt(layout) } } }) encryptedFields = encryptedFields.join(","); if (!appkey) { showCBInfo("appkey不能为空！", 'error'); return } // if (!$("#secret").val()) { // showCBInfo("secret不能为空！", 'error'); // return // } if (!ip) { showCBInfo("ip不能为空！", 'error'); return } // if (!$("#port").val()) { // showCBInfo("端口不能为空！", 'error'); // return // } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) { // showCBInfo("端口填写有误！", 'error'); // return // } console.log({ appkey: appkey, secret: secret, ip: ip, playMode: 0, // 预览 port: port, snapDir: snapDir, videoDir: videoDir, layout: layout, enableHTTPS: enableHttps, showToolbar: showToolbar, showSmart: showSmart, buttonIDs: btIds, language: language, encryptedFields: encryptedFields }) oWebControl.JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, secret: secret, ip: ip, playMode: 0, // 预览 port: port, snapDir: snapDir, videoDir: videoDir, layout: layout, enableHTTPS: enableHttps, showToolbar: showToolbar, showSmart: showSmart, buttonIDs: btIds, encryptedFields: encryptedFields, language: language, reconnectTimes: reconnectTimes, reconnectDuration: duration }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); UpdatePlayTypeValue(); UpdateSnapTypeValue(); UpdateSetOSDTypeValue(); oWebControl.JS_Resize(widtH, heighT); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 }); }) console.log('触发切换事件--') var cameraIndexCode = $('#encodeDevice').val();// $("#cameraIndexCode ").val() var streamMode = +$("#streamMode").val(); var transMode = +$("#transMode").val(); var gpuMode = +$("#gpuMode").val(); var wndId = -1; //默认为空闲窗口预览 var isDirectEzviz = +$("#isDirectEzviz").val(); cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); var sel = document.getElementById("PlayType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (2 == v)//指定窗口预览 { wndId = parseInt($("#playWndId option:selected").val(), 10); } else if (1 == v) //选中窗口预览 { wndId = 0; } if (!cameraIndexCode) { showCBInfo("监控点编号不能为空！", 'error'); return } // var sel = document.getElementById("isMultiPlay"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; //var v = 1;//1是批量播放 1,2，3,4 四个格子 if (1 == v) { var ids = $("#wndIds").val(); ids = ids.replace(/(^\s*)/g, ""); if (!ids) { showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error'); return } var tmp = ids.split(/[,]/g); var dataArr = []; for (var i = 0; i < tmp.length; i++) { dataArr.push({ cameraIndexCode: cameraIndexCode, streamMode: streamMode, transMode: transMode, gpuMode: gpuMode, wndId: parseInt(tmp[i]), ezvizDirect: isDirectEzviz }); } var tmpAgr = { "list": dataArr }; oWebControl.JS_RequestInterface({ funcName: "startMultiPreviewByCameraIndexCode", argument: JSON.stringify(tmpAgr) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } else { oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: cameraIndexCode, streamMode: streamMode, transMode: transMode, gpuMode: gpuMode, wndId: wndId, ezvizDirect: isDirectEzviz }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } }) //设置当前布局 $("#SetLayout").click(function () { var layout = $("#setlayout").val(); oWebControl.JS_RequestInterface({ funcName: "setLayout", argument: JSON.stringify({ layout: layout }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); UpdatePlayTypeValue(); UpdateSnapTypeValue(); UpdateSetOSDTypeValue(); }); }) //获取当前布局 $("#GetLayout").click(function () { oWebControl.JS_RequestInterface({ funcName: "getLayout" }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); UpdatePlayTypeValue(); UpdateSnapTypeValue(); UpdateSetOSDTypeValue(); }); }) //抓图 $("#SnapPic").click(function () { var snapName = $("#snapName").val(); var wndId = 0; //选中窗口抓图 snapName = snapName.replace(/(^\s*)/g, ""); snapName = snapName.replace(/(\s*$)/g, ""); var sel = document.getElementById("SnapType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v)//指定窗口抓图 { wndId = parseInt($("#SnapWndId option:selected").val(), 10); } else if (0 == v) //选中窗口抓图 { wndId = 0; } oWebControl.JS_RequestInterface({ funcName: "snapShot", argument: JSON.stringify({ name: snapName, wndId: wndId }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); }) // 视频预览 var indeCodes = [{//初始化后 播放的四个视频Indexcode src: '4c6fd044c31f4748b60095350f7ceb21', }, { src: 'd301a7d40c2943509de15dd61950d0d6', }, { src: '8e220d368d33435283f914351ed6c423', }, { src: '7fbbcd46ce41478d9d99ccff29bbf478', }] $("#startPreview").click(function () { for (let k = 0; k < indeCodes.length; k++) {//循环播放四个 console.log('触发事件--', k) var cameraIndexCode = indeCodes[k].src; var streamMode = +$("#streamMode").val(); var transMode = +$("#transMode").val(); var gpuMode = +$("#gpuMode").val(); var wndId = -1; //默认为空闲窗口预览 var isDirectEzviz = +$("#isDirectEzviz").val(); cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); var sel = document.getElementById("PlayType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (2 == v)//指定窗口预览 { wndId = parseInt($("#playWndId option:selected").val(), 10); } else if (1 == v) //选中窗口预览 { wndId = 0; } if (!cameraIndexCode) { showCBInfo("监控点编号不能为空！", 'error'); return } // var sel = document.getElementById("isMultiPlay"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; //var v = 1; if (1 == v) { var ids = $("#wndIds").val(); ids = ids.replace(/(^\s*)/g, ""); if (!ids) { showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error'); return } var tmp = ids.split(/[,]/g); var dataArr = []; for (var i = 0; i < tmp.length; i++) { dataArr.push({ cameraIndexCode: cameraIndexCode, streamMode: streamMode, transMode: transMode, gpuMode: gpuMode, wndId: parseInt(tmp[i]), ezvizDirect: isDirectEzviz }); } var tmpAgr = { "list": dataArr }; oWebControl.JS_RequestInterface({ funcName: "startMultiPreviewByCameraIndexCode", argument: JSON.stringify(tmpAgr) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } else { oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: cameraIndexCode, streamMode: streamMode, transMode: transMode, gpuMode: gpuMode, wndId: wndId, ezvizDirect: isDirectEzviz }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } } }) //返回重新初始化 $('#myBiaoZhu').on('click', function () { console.log('重新初始化') $('#init').triggerHandler("click"); console.log('重新加载视频') $('#startPreview').triggerHandler("click") }) setTimeout(() => {//进入页面1秒后初始化播放器插件，2秒触发视频点击事件，播放四个监控视频 $('#startPreview').triggerHandler("click") }, 2000); //字符叠加 $("#setOSDText").click(function () { if (!$("#Xsite").val()) { showCBInfo("起点X坐标不能为空！", 'error'); return } if (!$("#Ysite").val()) { showCBInfo("起点Y坐标不能为空！", 'error'); return } if (!$("#RColor").val()) { showCBInfo("字体RGB颜色R分量不能为空！", 'error'); return } if (!$("#GColor").val()) { showCBInfo("字体RGB颜色G分量不能为空！", 'error'); return } if (!$("#BColor").val()) { showCBInfo("字体RGB颜色B分量不能为空！", 'error'); return } if (!$("#fontSize").val()) { showCBInfo("字号不能为空！", 'error'); return } var text = $("#OSDText").val(); var x = +$("#Xsite").val(); var y = +$("#Ysite").val(); var fs = +$("#fontSize").val(); var ColorR = parseInt($("#RColor").val()); var ColorG = parseInt($("#GColor").val()); var ColorB = parseInt($("#BColor").val()); var Color = 65536 * ColorB + 256 * ColorG + ColorR; var wndId = 0; var at = +$("#alignType").val(); var isBold = +$("#isBold").val(); var sel = document.getElementById("SetOSDType"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v)//指定窗口字符叠加 { wndId = parseInt($("#osdWndId option:selected").val(), 10); } else //空闲窗口字符叠加 { wndId = 0; } oWebControl.JS_RequestInterface({ funcName: "drawOSD", argument: JSON.stringify({ text: text, x: x, y: y, color: Color, fontSize: fs, alignType: at, bold: isBold, wndId: wndId }) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); }) // 停止预览 $("#stopPreview").click(function () { var sel = document.getElementById("stopMode"); var selectedId = sel.selectedIndex; var v = sel.options[selectedId].value; if (1 == v) { // 批量停止 var ids = $("#stopWndIds").val(); ids = ids.replace(/(^\s*)/g, ""); if (!ids) { showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error'); return } var tmp = ids.split(/[,]/g); var dataArr = []; for (var i = 0; i < tmp.length; i++) { dataArr.push({ wndId: parseInt(tmp[i]) }); } var tmpAgr = { "list": dataArr }; oWebControl.JS_RequestInterface({ funcName: "stopMultiPlay", argument: JSON.stringify(tmpAgr) }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } else { // 停止全部 oWebControl.JS_RequestInterface({ funcName: "stopAllPreview" }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } }) // 反初始化 function uninit() { oWebControl.JS_RequestInterface({ funcName: "uninit" }).then(function (oData) { showCBInfo(JSON.stringify(oData ? oData.responseMsg : '')); }); } $("#uninit").click(uninit) // 显示回调信息 function showCBInfo(szInfo, type) { if (type === 'error') { szInfo = "" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + ""; } else { szInfo = "" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + ""; } $("#cbInfo").html(szInfo + $("#cbInfo").html()); } $("#clear").click(function () { $("#cbInfo").html(''); }) // 格式化时间 function dateFormat(oDate, fmt) { var o = { "M+": oDate.getMonth() + 1, //月份 "d+": oDate.getDate(), //日 "h+": oDate.getHours(), //小时 "m+": oDate.getMinutes(), //分 "s+": oDate.getSeconds(), //秒 "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度 "S": oDate.getMilliseconds()//毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } function textbox(obj, min, max) { obj.value = obj.value.replace(/[^\d]/g, ''); if (parseInt(obj.value) == obj.value && parseInt(obj.value) >= min && parseInt(obj.value) max) { obj.value = max; } } }这些是他demo里控制播放器的，我没删就留着了，大家要用的时候先下载播放器，然后里面有demo改着做一做。 合作方Appkey: 合作方Secret: 平台IP地址: 启用HTTPS协议 启用 平台端口: 抓图存储路径: 录像存储路径: 窗口布局: 1x1 2x2 3x3 4x4 5x5 1x2 1x4 4x6 1+2 1+5 1+7 1+8 1+9 1+12 1+16 4+9 1+1+12 3+4 显示工具栏 隐藏 显示 显示智能信息 隐藏 显示 重连次数: 重连间隔: 1 2 3 4 5 6 7 8 9 10 多语言 中文 英文 工具条按钮ID集: 加密字段: secret appkey ip 抓图路径 录像路径 布局 ;;;;;;;;;;;;初始化 ;;;;;;;;;;;;反初始化 ;;; 布局： 设置布局: 1x1 2x2 3x3 4x4 5x5 1x2 1x4 4x6 1+2 1+5 1+7 1+8 1+9 1+12 1+16 4+9 1+1+12 3+4 ;;;;;;;;;;;; 设置布局 ;;;;;;;;;;;; 获取布局 ;;; 预览： 预览模式： 空闲窗口预览 选中窗口预览 指定窗口预览 窗口ID： 监控点编号： 主子码流标识： 主码流 子码流 传输协议： TCP UDP 是否启用GPU硬解： 不启用 启用 是否直连萤石预览： 不启用 启用 是否批量播放： 不启用 启用 窗口ID集： ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 停止预览： 停止预览模式： 停止全部预览 批量停止预览 窗口ID集： ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 停止预览 ;;; 抓图： 抓图模式： 选中窗口抓图 指定窗口抓图 窗口ID： ;; 图片绝对路径名称： ;;;;;;;;;;;; 预览抓图 字符串叠加： 叠加模式： 选中窗口字符串叠加 指定窗口字符串叠加 窗口ID： 起点X坐标： 起点Y坐标： 字体RGB颜色： 字号： 字符串对齐方式： 居左对齐 居中对齐 居右对齐 字符串是否加粗： 不加粗 加粗 待叠加字符串： ;;;;;;;;;;;; 字符串叠加 返回值信息 清空最后放下所有效果图： 初始化 |
跟之前的文章里的样子效果一样，就是下面的播放监控换成海康提供的插件，播放流畅了许多，也不卡顿了。也可全屏四宫格和放大单独一个， 引入必要JS文件，插件JS
选择一个坐标点 
选择成功后，红框里的监控跟换，这个黄色的框，点击哪个监控就回选择到哪个，然后替换也是替换黄框里 
就是个这么效果，欢迎留言讨论【本文地址】
公司简介
联系我们