Newer
Older
securityFront / static / webCtrl / demo-easy.html
TAN YUE on 25 Jan 2021 3 KB 20210124 视频播放页微调
<!doctype html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
  </head>
  <style>
    body {
      margin: 0px;
    }
  </style>
  <body>
    <div>
      <div id="divPlugin" class="plugin"></div>
    </div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script src="codebase/webVideoCtrl.js"></script>
  <script>

    const oLiveView = {
      iProtocol: 1,            // protocol 1:http, 2:https
      szIP: "192.168.1.65",    // protocol ip
      szPort: "80",            // protocol port
      szUsername: "admin",     // device username
      szPassword: "abcd1234", // device password
      iStreamType: 1,          // stream 1:main stream  2:sub-stream  3:third stream  4:transcode stream
      iChannelID: 1,           // channel no
      bZeroChannel: false      // zero channel
    };

    $(function () {
      // 检查插件是否已经安装过
      const iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (-1 == iRet) {
        alert("您还未安装过插件,双击开发包目录里的WebComponentsKit.exe安装!");
        return;
      }

      // 获取窗体大小并设置控件大小
      const winHeight = document.documentElement.clientHeight;
      const winWidth = document.documentElement.clientWidth;
      $(".plugin").attr("style", "width: " + winWidth + "px; height: " + winHeight + "px;");
      const oPlugin = {
        iWidth: winWidth,             // plugin width
        iHeight: winHeight             // plugin height
      };

      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,//是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
        iWndowType: 2,
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

          // 检查插件是否最新
          if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
            alert("检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!");
            return;
          }

          // 登录设备
          login();
        }
      });

      // 关闭浏览器
      $(window).unload(function () {
        WebVideoCtrl.I_Stop();
      });
    });

    // 登录设备
    function login() {
      // 登录设备
      WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
        success: function (xmlDoc) {
          startPlayReal(null);
        },
        error: function () {
          console.log("登录设备失败,请检查设备IP和登录密码");
        }
      });
    }

    // 开始预览
    function startPlayReal(obj) {
      if (null !== obj) {
        oLiveView.szIP = obj.ip;
        oLiveView.szUsername = obj.username;
        oLiveView.szPassword = obj.password;
        oLiveView.iChannelID = 1;
        // oLiveView.iChannelID = obj.channel;
      }
      const szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;

      alert(szDeviceIdentify);
      console.log(oLiveView);

      setTimeout(function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iStreamType: oLiveView.iStreamType,
          iChannelID: oLiveView.iChannelID,
          bZeroChannel: oLiveView.bZeroChannel
        });
      }, 1000);
    }

    // 停止预览
    function stopPlayReal() {

    }
  </script>
</html>