zhgdyun/src/components/videoModule/isc_plugin/video_isc_plugin.js

import './jsencrypt.min.js'
// import {
//   WebControl
// } from './jsWebControl-1.0.0.min.js'

var isChrome = navigator.userAgent.indexOf('Chrome') > -1  // 是否是谷歌 

if (isChrome) {
  // let WebControl = null
  var aa = () => import('./jsWebControl-1.0.0.min.js')
  aa().then(res => {
    console.log(res)
    WebControl = res.WebControl
  })
}
console.log('谷歌' + isChrome)
var oWebControl = null;
var pubKey = '';
var initCount = 0;
var a, b, c, d, types, layouts;
var width, height;
// var _thiss;
// 获取公钥
// 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);
}
// 反初始化
export function unInitObjPlugin() {
  console.log('调用unInitObjPlugin', '5555555');
  //
  if (!oWebControl) {
    return false;
  }
  oWebControl.JS_RequestInterface({
    funcName: "destroyWnd"
  }).then(function (oData) {
    console.log(JSON.stringify(oData ? oData.responseMsg : ''));
    console.log('销毁失败');
  });
  //
  var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
  if (bIE) {
    if (oWebControl != null) {
      oWebControl.JS_Disconnect().then(function () {
        console.log("JS_Disconnect");
      }, function () { });
    }
  } else {
    if (oWebControl != null) {
      oWebControl.JS_DestroyWnd().then(function () {
        console.log("JS_DestroyWnd");
      }, function () { });
      oWebControl.JS_StopService("window").then(function () {
        oWebControl.JS_Disconnect().then(function () {
          console.log("JS_Disconnect");
        }, function () { });
      });
    }
  }
}
//预览视频
export function OpenVideo(cameraIndexCode, streamMode, winIndex = 0) {
  var transMode = +'1'; //传输协议：1、TCP    0、UDP
  var gpuMode = +'0'; //是否启用GPU硬解：1、启用   0、不启用
  console.log(8855544, streamMode)
  oWebControl.JS_RequestInterface({
    funcName: "startPreview",
    argument: JSON.stringify({
      cameraIndexCode: cameraIndexCode,
      streamMode: streamMode == 2 && (winIndex > 4) ? 0 : 1, // 码流类型 0 主码流 1 子码流 (2 主码流 1 子码流)
      transMode: transMode,
      gpuMode: gpuMode,
      wndId: -1,
    })
  }).then(function (oData) {
    console.log(oData.responseMsg.code === 336)
    console.log(JSON.stringify(oData ? oData.responseMsg : ''));

    // if(oData.responseMsg.code === 336){
    //   return 
    // }
    console.log('预览视频失败');
  });
}
// 设置窗口控制回调
function setCallbacks() {
  oWebControl.JS_SetWindowControlCallback({
    cbIntegrationCallBack: cbIntegrationCallBack
  });
}

// 页面缩放比例
function getRatio() {
  let bodyWidth = document.body.clientWidth
  // console.log(window.screen.width)
  let bodyHeight = document.body.clientHeight
  let scaleWidthNum = bodyWidth / 1920
  let scaleHeightNum = bodyHeight / 1080

  let ratio;
  if (scaleWidthNum > scaleHeightNum) {
    ratio = scaleHeightNum
  } else {
    ratio = scaleWidthNum
  }
  return ratio;
}

// 初始化
export function InitObjPlugin(appkey, secret, ip, port, type, videoData, layout) {
  console.log(videoData)
  a = appkey
  b = secret
  c = ip
  d = port
  types = type
  layouts = layout
  // 
  oWebControl = new WebControl({
    szPluginContainer: "playWnd", //指定容器id
    iServicePortStart: 15900,
    iServicePortEnd: 15909,
    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
    cbConnectSuccess: function () {
      setCallbacks();
      oWebControl.JS_StartService("window", {
        dllPath: "./VideoPluginConnect.dll"
        //dllPath: "./DllForTest-Win32.dll"
      }).then(function () {
        // if (type) {
        //   var a = document.getElementById('videoBoxContainer')
        //   width = a.offsetWidth - 10
        //   height = a.offsetHeight - 60
        // } else {
        // console.log(document.getElementById('videoOverview').offsetWidth,document.getElementById('videoOverview').offsetHeight)
        var bottomHeight = 0
        // if(window.location.href.indexOf('/project/')!=-1){
        //   bottomHeight = 60
        // }
        width = document.getElementById('videoOverview').offsetWidth
        height = document.getElementById('videoOverview').offsetHeight - bottomHeight
        let ratio = 1
        // console.log(JSON.parse(localStorage.getItem('systemInfo')).zoomType)
        if (enabledProjectV2 != 1) {
          if (localStorage.getItem('systemInfo') && JSON.parse(localStorage.getItem('systemInfo')).zoomType != 1) {
            ratio = getRatio()
          }
        }
        console.log(ratio)
        width = width * ratio
        height = height * ratio
        // width = 500
        // height = 500
        // console.dir(document.getElementById('videoOverview'))
        console.log(width, height)
        // }
        window.$timeId = null;
        if (window.localStorage.getItem('isIframe')) {
          if (window.localStorage.getItem('isIframe') == '1') {
            // width = 796
            // height = 672
            width = width * 0.66
            height = height * 0.98
          }
          console.log(window.localStorage.getItem('isIframe'))
        }
        // 0.766667
        console.log(12)
        window.onresize = function () {
          width = document.getElementById('videoOverview').offsetWidth
          height = document.getElementById('videoOverview').offsetHeight - bottomHeight
          let ratio = 1
          // if(enabledProjectV2!=1){
          //   ratio = getRatio()
          // }
          width = width * ratio
          height = height * ratio
          clearTimeout(window.$timeId);
          window.$timeId = setTimeout(() => {
            var a = document.getElementById('videoBoxContainer') || document.querySelector('.videocBox')
            if (a) {
              width = a.offsetWidth
              height = a.offsetHeight - 80
            }
            if (oWebControl != null) {
              oWebControl.JS_Resize(width, height);
              // setWndCover();
            }
          }, 10);
        }
        oWebControl.JS_CreateWnd("playWnd", width, height, {
          bEmbed: false,
          cbSetDocTitle: function (uuid) {
            oWebControl._pendBg = false;
            window.parent.postMessage({
              action: 'updateTitle',
              msg: '子页面通知父页面修改title',
              info: uuid
            }, '\*');    // '\*'表示跨域参数，请结合自身业务合理设置
          }
        }).then(function () {
          console.log("JS_CreateWnd success");
          // ;

          init(videoData)
        });
      }, function () {

      });
    },
    cbConnectError: function () {
      console.log("cbConnectError");
      oWebControl = null;
      console.log("插件未启动，正在尝试启动，请稍候...");
      WebControl.JS_WakeUp("VideoWebPlugin://");
      initCount++;
      console.log(initCount)
      if (initCount < 3) {
        setTimeout(function () {
          InitObjPlugin(a, b, c, d, types);
        }, 3000)
      } else {
        console.log("插件启动失败，请检查插件是否安装！");
        if (confirm("检测到视频插件未安装，是否下载视频插件?")) {
          // window.location.href = "http://139.159.136.114:8081/itbgp/file/b092b773-ca5a-479d-b5bc-1ed84d46e762.exe"
          // window.location.href = "/video/VideoWebPlugin.exe"
          window.location.href = "http://101.43.164.214:11111/image/VideoWebPlugin.rar"
          // window.location.href = "https://jk.cscec1b1.com:5138/image/VideoWebPlugin.exe"
        }
        // _thiss.$confirm('检测到视频插件未安装，是否下载视频插件?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   window.location.href="http://139.217.224.209:8080/itbgp/file/VideoWebPlugin.exe"
        // }).catch(() => {
        //   _thiss.$message({
        //     type: 'info',
        //     message: '已取消下载'
        //   });
        // });
      }
    },
    cbConnectClose: function () {
      console.log("cbConnectClose");
      oWebControl = null;
    }
  });

}
//初始化
export function init(videoData) {
  console.log(222222222222, videoData)
  getPubKey(function () {
    ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
    // var appkey = "20880397"; //综合安防管理平台提供的appkey，必填
    // var secret = setEncrypt("WhyICfLp0NAalGjRa8Hx"); //综合安防管理平台提供的secret，必填

    var appkey = a; //综合安防管理平台提供的appkey，必填
    var secret = setEncrypt(b); //综合安防管理平台提供的secret，必填
    var ip = c; //综合安防管理平台IP地址，必填
    var playMode = 0; //初始播放模式：0-预览，1-回放
    var port = parseInt(d); //综合安防管理平台端口，若启用HTTPS协议，默认443
    var snapDir = "D:\\SnapDir"; //抓图存储路径
    var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
    var layout = layouts; //playMode指定模式的布局
    // var layout = "2x2"; //playMode指定模式的布局
    var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0
    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) {
      console.log(width, height, oWebControl)
      console.log('COMPANY++++++++++++++',COMPANY)
      console.log(window.localStorage.getItem('isIframe'))

        if (COMPANY=='xingxuan') {
          oWebControl.oDocOffset.top = 94;
          oWebControl.oDocOffset.left = 280;
        }
        

      oWebControl.JS_Resize(width, height);
      // console.log('OpenVideo')
      for (let i = 0; i < videoData.length; i++) {
        if (i < 24 && videoData.length >= i) {
          // setTimeout(()=>{
          OpenVideo(videoData[i].serialNumber, videoData[i].defaultStreamType, i + 1)
          // },1000)

        }
      }
      // oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
    });
  });
}
//判断有没有初始化插件
export function isLoadPlugin(devList, layout) {
  console.log('isLoadPlugin', oWebControl, devList)
  if (oWebControl) {
    devList.forEach(element => {
      setTimeout(() => {
        OpenVideo(element.serialNumber,element.defaultStreamType)
      }, 500)

    });
  } else {
    if(!devList[0]?.outip){
      InitObjPlugin(
        devList[0].appId,
        devList[0].appSecret,
        devList[0].account,
        devList[0].port || devList[0].password,
        false,
        devList,
        layout
      );
    }else{
      InitObjPlugin(
        devList[0].appId,
        devList[0].appSecret,
        devList[0].outip,
        devList[0].outport,
        false,
        devList,
        layout
      );
    }
   
  }
}
// 推送消息
function cbIntegrationCallBack(oData) {
  console.log(JSON.stringify(oData.responseMsg));
}
//获取公钥
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()
    }
  })
}

// 滚动条scroll
// window.onscroll = function () {
//   if (oWebControl != null) {
//     width = document.getElementById('videoOverview').offsetWidth
//     height = document.getElementById('videoOverview').offsetHeight - 0
//     oWebControl.JS_Resize(width, height);
//     // setWndCover();
//   }
// }

// 监听滚动条 - 滚动摄像头列表会照成抖动(去除
// window.addEventListener('scroll', () => {
//   // console.log('滚动条')
//   if(oWebControl != null){
//     width = document.getElementById('videoOverview').offsetWidth-20
//     height = document.getElementById('videoOverview').offsetHeight-18
//     oWebControl.JS_Resize(width, height );
//   }
//   },true);
// 监听窗口
// window.addEventListener('resize', () => {
//   console.log('窗口')
//   if(oWebControl != null){
//     width = document.getElementById('videoOverview').offsetWidth-38
//     height = document.getElementById('videoOverview').offsetHeight-20
//     oWebControl.JS_Resize(width, height );
//   }
//   },true);

//窗口关闭时销毁插件
window.onunload = function () {
  if (oWebControl != null) {
    oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
    oWebControl.JS_Disconnect().then(function () { }, function () { });
  }
}
export function resizeFn(val) {
  if (oWebControl) {
    width = document.getElementById('videoOverview').offsetWidth
    height = document.getElementById('videoOverview').offsetHeight - 0
    if (val && val == 1) {
      oWebControl.JS_Resize(width / 2 + 20, height - 215);
    } else {
      oWebControl.JS_Resize(width, height);
    }

    // setWndCover();
  }

}
// 设置窗口遮挡
function setWndCover() {
  console.log('setWndCover')
  var iWidth = document.body.clientWidth;
  var iHeight = document.body.clientHeight;
  var oDivRect = document.getElementById('playWnd').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 > width) ? width : iCoverLeft;
  iCoverTop = (iCoverTop > height) ? height : iCoverTop;
  iCoverRight = (iCoverRight > width) ? width : iCoverRight;
  iCoverBottom = (iCoverBottom > height) ? height : iCoverBottom;

  if (iLastCoverLeft != iCoverLeft) {
    console.log("iCoverLeft: " + iCoverLeft);
    iLastCoverLeft = iCoverLeft;
    oWebControl.JS_SetWndCover("left", iCoverLeft);
  }
  if (iLastCoverTop != iCoverTop) {
    console.log("iCoverTop: " + iCoverTop);
    iLastCoverTop = iCoverTop;
    oWebControl.JS_SetWndCover("top", iCoverTop);
  }
  if (iLastCoverRight != iCoverRight) {
    console.log("iCoverRight: " + iCoverRight);
    iLastCoverRight = iCoverRight;
    oWebControl.JS_SetWndCover("right", iCoverRight);
  }
  if (iLastCoverBottom != iCoverBottom) {
    console.log("iCoverBottom: " + iCoverBottom);
    iLastCoverBottom = iCoverBottom;
    oWebControl.JS_SetWndCover("bottom", iCoverBottom);
  }
}
//隐藏插件窗口
export function hidePluginWindow() {
  // console.log(123)
  // console.log('hidePluginWindow')
  oWebControl.JS_HideWnd()
  // oWebControl.JS_RequestInterface({
  //   funcName: "hideWnd"
  // }).then(function(data){
  //   console.log('hidePluginWindow',data)
  // })
}
//显示插件窗口
export function showPluginWindow() {
  // console.log(112)
  // console.log('showPluginWindow')
  oWebControl.JS_ShowWnd()
  // oWebControl.JS_RequestInterface({
  //   funcName: "showWnd"
  // }).then(function(data){
  //   console.log('showPluginWindow',data)
  // })
}
export function setOffset(l, t) {
  WebControl.JS_SetDocOffset({
    left: l,
    top: t
  })
  console.log(l, t, "===============================")
}

export function setWidthAndHeight(width, height) {
  oWebControl.JS_Resize(width, height);

}
// JS_CuttingPartWindow
export function cuttingPartWindow(iLeft, iTop, iWidth, iHeight) {
  oWebControl.JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight)
}
// 关闭所有视频
export function closeAllVideo() {
  oWebControl.JS_RequestInterface({
    funcName: "stopAllPreview"
  });
}
// 获取当前布局
export const getCurrentLayout = async () => {
  const data = await oWebControl.JS_RequestInterface({
    funcName: "getLayout"
  });
  return data;
}