海康威视web3.2无插件版集成到vue2.0项目使用(注意：必须使用nginx 做代理)

最新推荐文章于 2025-03-20 09:36:58 发布

CSN_Tom

最新推荐文章于 2025-03-20 09:36:58 发布

阅读量1.1k

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/csn_tom/article/details/130156427

版权

1.在项目目录public/static/video/js 注:（video/js两个目录需要自己建）引入海康威视官方提供的demo 里面所需要用到的js文件，如下图所示。

避坑(需要在项目的public/static/index.html 文件里面引入 webVideoCtrl.js 文件，否则实现在线预览功能时会报错!!!),上图介绍了引入方式，请参考。

2.因为我想把demo 集成到vue项目中组件化，所以创建了如下的vue 组件文件，如下代码所示。

其中我是用了，mixin 方式调用方法，不明白的可以查询一下。

< -- 海康威视视频组件-->
<template>
  <div>
    <div><el-button @click="login">登录</el-button>
      <el-button @click="getChannelInfo">获取模拟通道</el-button>
      <el-button @click="clickStartRealPlay">开始预览</el-button>
      <el-button @click="getDevicePort">获取端口</el-button>
      <el-button @click="clickCapturePic">抓图</el-button>
      <el-button @click="clickFullScreen">全屏</el-button>
      <el-button @onmousedown="useDownPTZControl(3)"
                 @onmouseup="mouseUpPTZControl">左</el-button>
    </div>
    <div>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="码流类型">
          <el-select v-model="formInline.record_streamtype"
                     placeholder="请选择码流类型">
            <el-option label="主码流"
                       value="1"></el-option>
            <el-option label="子码流"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间范围">

          <el-date-picker type="datetimerange"
                          v-model="formInline.time"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          start-placeholder="开始日期"
                          ange-separator="至"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions">
          </el-date-picker>

        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">查询</el-button>
          <el-button @click="clickStartPlayback(formInline)">开始回放</el-button>
          <el-button @click="clickStopPlayback">停止回放</el-button>
          <el-button @click="clickPlayFast">快放</el-button>
          <el-button @click="clickPause">暂停</el-button>
          <el-button @click="clickResume">恢复</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableList"
                style="width: 100%">
        <el-table-column type="index"
                         width="50"
                         label="序号">
        </el-table-column>
        <el-table-column prop="fileName"
                         label="文件名"
                         width="180">
        </el-table-column>
        <el-table-column prop="startTime"
                         label="开始时间"
                         width="180">
        </el-table-column>
        <el-table-column prop="endTime"
                         label="结束时间">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作">
          <template slot-scope="scope">
            <el-button @click="clickStartDownloadRecord(scope.row)"
                       type="text"
                       size="small">下载</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
  
    <!-- 视频展示区-->
    <div id="opinfo"></div>
     <div id="divPlugin"
         class="plugin"
         @dblclick="clickFullScreen"></div> 
  </div>
</template>

<script>
import mixin from '../../utils/mixins'
import '../../../public/static/video/js/webVideoCtrl.js'
export default {
  mixins: [mixin],
  data () {
    return {
      formInline: {
        record_streamtype: '1',
        time: '',
        downloadTime: ''
      },
      choiceDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate !== '') {
            const day30 = 3 * 24 * 3600 * 1000
            const minTime = this.choiceDate - day30
            const maxTime = this.choiceDate + day30
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
    }
  },
  // 初始化默认登录海康威视，才能做播放
  created () {
  },
  methods: {
    onSubmit () {
      const [startTime, endTime] = this.formInline.time,
        [startDownLoadTime, endDloadTime] = this.formInline.downloadTime
      const obj = {
        startTime,
        endTime,
        startDownLoadTime,
        endDloadTime,
        record_streamtype: this.formInline.record_streamtype
      }

      this.clickRecordSearch(obj)
      setTimeout(() => {
        console.log(this.tableList)
      }, 2000)
    }

  }
}
</script>
<style>
</style>

3.创建mixins.js 文件


import '../../public/static/video/js/jquery-1.7.1.min.js';
import '../../public/static/video/js/AES.js';
import '../../public/static/video/js/cryptico.min.js';
import '../../public/static/video/js/crypto-3.1.2.min.js';
import '../../public/static/video/js/jsPlugin-1.2.0.min.js';
import '../../public/static/video/js/webVideoCtrl.js';

const mixin = {
  data () {
    return {
      // 海康威视Nvr平台登录ip
      Nvrip: "11.80.39.7",
      // 海康威视Nvr平台登录端口号
      NvrPort: "80",
      // 海康威视Nvr平台登录用户名称
      NvrUserName: "admin2",
      // 海康威视Nvr平台登录用户密码
      NvrPawword: "12345",
      szDeviceIdentify: '11.80.39.7_80',
      data: undefined,
      ChannelID: 'W1-W1',
      iRtspPort: 554,
      isLogin: false,
      g_bPTZAuto: false,
      g_iSearchTimes: 0,
      tableList: [],
      g_iWndIndex: 0 //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
    }
  },
  mounted () {
    // 检查插件是否已经安装过
    var iRet = window.WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
      alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
      return;
    }
    console.log("created", iRet)
    // 初始化插件参数及插入插件
    window.WebVideoCtrl.I_InitPlugin(800, 400, {
      bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
      iPackageType: 2,
      iWndowType: 1,
      bNoPlugin: true,
      cbSelWnd: function (xmlDoc) {
        console.log('cbSelWnd:')
       
      },
      cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
        console.log('cbDoubleClickWnd:')
        
      },
      cbEvent: function (iEventType, iParam1, iParam2) {
        console.log('cbEvent:')
      },
  
      cbInitPluginComplete: function () {
        console.lg('cbInitPluginComplete')
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

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

  },
  methods: {

    // 显示回调信息
    showCBInfo (szInfo) {
      console.log(szInfo)
      // szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
      // $("#cbinfo").html(szInfo + $("#cbinfo").html());
    },
    login () {
      console.log(WebVideoCtrl, 'login')
      const that = this
      WebVideoCtrl.I_Login(this.Nvrip, 1, this.NvrPort, this.NvrUserName, this.NvrPawword, {
        success: function (xmlDoc) {
          console.log("success");
          that.isLogin = true;
          that.getChannelInfo(that)
        },
        error: function (status, xmlDoc) {
          console.log(" 登录失败！", 0, xmlDoc);
        }
      })
    },
    // 全屏
    clickFullScreen () {
      WebVideoCtrl.I_FullScreen(true);
    },

    // 抓图
    clickCapturePic () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        szInfo = "";

      if (oWndInfo != null) {
        var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
        var szCaptureFileFormat = "0";
        if (xmlDoc != null) {
          szCaptureFileFormat = $(xmlDoc).find("CaptureFileFormat").eq(0).text();
        }

        var szChannelID = $("#channels").val();
        var szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();

        szPicName += ("0" === szCaptureFileFormat) ? ".jpg" : ".bmp";

        WebVideoCtrl.I2_CapturePic(szPicName, {
          bDateDir: true  //是否生成日期文件
        }).then(function () {
          szInfo = "抓图成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        }, function () {
          szInfo = "抓图失败！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        });
      }
    },
    // 格式化时间
    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;
    },
    getChannelInfo () {
      // console.log('getChannelInfo11', that)

      // 模拟通道
      window.WebVideoCtrl.I_GetAnalogChannelInfo(this.Nvrip + "_" + this.NvrPort, {
        async: false,
        success: function (xmlDoc) {

          var oChannels = $(xmlDoc).find("VideoInputChannel");

          $.each(oChannels, function (i) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text();
            //   if ("" == name) {
            //     name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
            //   }
            //   oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
          });
          // console.log("xxxxxxxxxxx", id);
          // showOPInfo(szDeviceIdentify + " 获取模拟通道成功！");
        },
        error: function (status, xmlDoc) {
          console.log(xmlDoc, '模拟通道')
          // showOPInfo(szDeviceIdentify + " 获取模拟通道失败！", status, xmlDoc);
        }
      });
      // 数字通道
      window.WebVideoCtrl.I_GetDigitalChannelInfo(this.Nvrip + "_" + this.NvrPort, {
        async: false,
        success: function (xmlDoc) {

          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

          $.each(oChannels, function (i) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text(),
              online = $(this).find("online").eq(0).text();
            if ("false" == online) {// 过滤禁用的数字通道
              return true;
            }
            console.log(id, name)
            //   if ("" == name) {
            //     name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
            //   }
            //   oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
          });
          // showOPInfo(szDeviceIdentify + " 获取数字通道成功！");
        },
        error: function (status, xmlDoc) {
          console.log(xmlDoc, '数字通道')
        }
      });
      // 零通道
      window.WebVideoCtrl.I_GetZeroChannelInfo(this.Nvrip + "_" + this.NvrPort, {
        async: false,
        success: function (xmlDoc) {

          let oChannels = $(xmlDoc).find("ZeroVideoChannel");
          console.log(oChannels, '零通道')
          $.each(oChannels, function (i) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text();
            // if ("" == name) 
            //     name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
            //   }
            //   if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
            //     oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");
            //   }
          });
          // showOPInfo(szDeviceIdentify + " 获取零通道成功！");
        },
        error: function (status, xmlDoc) {
          console.log(xmlDoc, '零通道')
        }
      });
    },
    // 搜索录像
    clickRecordSearch (params) {
      var szDeviceIdentify = this.Nvrip,
        iChannelID = 1,
        iStreamType = params.record_streamtype,
        szStartTime = params.startTime || '',
        szEndTime = params.endTime;
      const that = this;

      WebVideoCtrl.I_RecordSearch(szDeviceIdentify, iChannelID, szStartTime, szEndTime, {
        iStreamType: iStreamType,
        iSearchPos: that.g_iSearchTimes * 40,
        success: function (xmlDoc) {
          if ("MORE" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {

            for (var i = 0, nLen = $(xmlDoc).find("searchMatchItem").length; i < nLen; i++) {
              var szPlaybackURI = $(xmlDoc).find("playbackURI").eq(i).text();
              if (szPlaybackURI.indexOf("name=") < 0) {
                break;
              }
              var szStartTime = $(xmlDoc).find("startTime").eq(i).text();
              var szEndTime = $(xmlDoc).find("endTime").eq(i).text();
              var szFileName = szPlaybackURI.substring(szPlaybackURI.indexOf("name=") + 5, szPlaybackURI.indexOf("&size="));
              szStartTime = (szStartTime.replace("T", " ")).replace("Z", "")
              szEndTime = (szEndTime.replace("T", " ")).replace("Z", "")
              const obj = {
                startTime: szStartTime,
                endTime: szEndTime,
                fileName: szFileName,
                url: szPlaybackURI
              }
              that.tableList.push(obj)
            }

            that.g_iSearchTimes++;
            that.clickRecordSearch(params);// 继续搜索
          } else if ("OK" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
            var iLength = $(xmlDoc).find("searchMatchItem").length;
            for (var i = 0; i < iLength; i++) {
              var szPlaybackURI = $(xmlDoc).find("playbackURI").eq(i).text();
              if (szPlaybackURI.indexOf("name=") < 0) {
                break;
              }
              var szStartTime = $(xmlDoc).find("startTime").eq(i).text();
              var szEndTime = $(xmlDoc).find("endTime").eq(i).text();
              var szFileName = szPlaybackURI.substring(szPlaybackURI.indexOf("name=") + 5, szPlaybackURI.indexOf("&size="));
              szStartTime = (szStartTime.replace("T", " ")).replace("Z", "")
              szEndTime = (szEndTime.replace("T", " ")).replace("Z", "")
              const obj = {
                startTime: szStartTime,
                endTime: szEndTime,
                fileName: szFileName,
                url: szPlaybackURI
              }
              that.tableList.push(obj)
            }
            that.$message({
              message: `${szDeviceIdentify}搜索录像文件成功！`,
              type: 'success'
            });
          } else if ("NO MATCHES" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
            setTimeout(function () {
              that.$message({
                message: `${szDeviceIdentify}没有录像文件！`,
                type: 'warning'
              });
            }, 50);
          }
        },
        error: function (status, xmlDoc) {
          showOPInfo(szDeviceIdentify + " 搜索录像文件失败！", status, xmlDoc);
        }
      });
    },
    // 下载录像
    clickStartDownloadRecord (params) {

      var szDeviceIdentify = this.Nvrip,
        szFileName = params.fileName,
        szPlaybackURI = params.url;
      var g_iDownloadID = WebVideoCtrl.I_StartDownloadRecord(szDeviceIdentify, szPlaybackURI, szFileName, {
        bDateDir: true  //是否生成日期文件
      });

      if (g_iDownloadID < 0) {
        var iErrorValue = WebVideoCtrl.I_GetLastError();
        if (34 == iErrorValue) {

          this.$message({
            message: `${szDeviceIdentify}已下载！`,
            type: 'warning'
          });
        } else if (33 == iErrorValue) {
          this.$message({
            message: `${szDeviceIdentify}空间不足！`,
            type: 'warning'
          });
        } else {
          this.$message({
            message: `${szDeviceIdentify}下载失败！`,
            type: 'warning'
          });
        }
      } else {
        // $("<div id='downProcess' class='freeze'></div>").appendTo("body");
        // g_tDownloadProcess = setInterval("downProcess(" + i + ")", 1000);
      }
    },
    // 显示操作信息
    showOPInfo (szInfo, status, xmlDoc) {
      console.log("3333A", 'error')
      var szTip = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo;
      if (typeof status != "undefined" && status != 200) {
        var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
        var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
        if ("" === szSubStatusCode) {
          if ("" === szSubStatusCode && "" === szStatusString) {
            szTip += "(" + status + ")";
          }
          else {
            szTip += "(" + status + ", " + szStatusString + ")";
          }
        } else {
          szTip += "(" + status + ", " + szSubStatusCode + ")";
        }
      }
      szTip += "</div>";

      $("#opinfo").html(szTip + $("#opinfo").html());
    },
    // PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
    mouseDownPTZControl (iPTZIndex) {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        bZeroChannel = true,
        iPTZSpeed = 4; // 云台速度

      if (bZeroChannel) {// 零通道不支持云台
        return;
      }
      const that = this;

      if (oWndInfo != null) {
        if (9 == iPTZIndex && that.g_bPTZAuto) {
          iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
        } else {
          that.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
        }

        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: iPTZSpeed,
          success: function (xmlDoc) {
            if (9 == iPTZIndex && that.g_bPTZAuto) {
              // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
              that.$message({
                message: `${oWndInfo.szDeviceIdentify}停止云台成功！`,
                type: 'success'
              });
            } else {
              // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台成功！");
              that.$message({
                message: `${oWndInfo.szDeviceIdentify}开启云台成功！`,
                type: 'success'
              });
            }
            if (9 == iPTZIndex) {
              that.g_bPTZAuto = !that.g_bPTZAuto;
            }
          },
          error: function (status, xmlDoc) {
            // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
            that.$message({
              message: `${oWndInfo.szDeviceIdentify}开启云台失败！`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 开始回放
    clickStartPlayback (params) {
      const [startTime, endTime] = this.formInline.time
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szDeviceIdentify = this.Nvrip,
        iRtspPort = this.iRtspPort,
        iStreamType = params.record_streamtype,
        // bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
        iChannelID = 1,
        szStartTime = startTime,
        szEndTime = endTime,
        szInfo = "",
        bChecked = false, // 是否启用回转码流
        iRet = -1;

      if (null == szDeviceIdentify) {
        return;
      }

      // if (bZeroChannel) {// 零通道不支持回放
      //   return;
      // }
      const that = this;
      var startPlayback = function () {
        if (bChecked) {// 启用转码回放
          var oTransCodeParam = {
            TransFrameRate: "14",// 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
            TransResolution: "1",// 255：Auto，3：4CIF，2：QCIF，1：CIF
            TransBitrate: "19"// 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
          };
          WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
            iRtspPort: iRtspPort,
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            szStartTime: szStartTime,
            szEndTime: szEndTime,
            oTransCodeParam: oTransCodeParam,
            success: function () {
              szInfo = "开始回放成功！";
              that.$message({
                message: `${szDeviceIdentify + " " + szInfo}`,
                type: 'success'
              });
            },
            error: function (status, xmlDoc) {
              if (403 === status) {
                szInfo = "设备不支持Websocket取流！";
              } else {
                szInfo = "开始回放失败！";
              }

              that.$message({
                message: `${szDeviceIdentify + " " + szInfo}`,
                type: 'warning'
              });
            }
          });
        } else {
          WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
            iRtspPort: iRtspPort,
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            szStartTime: szStartTime,
            szEndTime: szEndTime,
            success: function () {
              that.$message({
                message: `${szDeviceIdentify}开始回放成功！`,
                type: 'success'
              });
            },
            error: function (status, xmlDoc) {
              if (403 === status) {
                szInfo = "设备不支持Websocket取流！";
              } else {
                szInfo = "开始回放失败！";
              }
              that.$message({
                message: `${szDeviceIdentify + " " + szInfo}`,
                type: 'warning'
              });
            }
          });
        }
      };

      if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
          success: function () {
            startPlayback();
          }
        });
      } else {
        startPlayback();
      }
    },
    // 停止回放
    clickStopPlayback () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szDeviceIdentify = this.Nvrip,
        szInfo = "";
      const that = this;
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function () {
            szInfo = "停止回放成功！";

            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'success'
            });
          },
          error: function () {
            szInfo = "停止回放失败！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 快放
    clickPlayFast () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szDeviceIdentify = this.Nvrip,
        szInfo = "";
      const that = this;
      if (oWndInfo != null) {
        WebVideoCtrl.I_PlayFast({
          success: function () {
            szInfo = "快放成功！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'success'
            });
          },
          error: function () {
            szInfo = "快放失败！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 暂停
    clickPause () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szDeviceIdentify = this.Nvrip,
        szInfo = "";
      const that = this;
      if (oWndInfo != null) {
        WebVideoCtrl.I_Pause({
          success: function () {
            szInfo = "暂停成功！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'success'
            });
          },
          error: function () {
            szInfo = "暂停失败！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 恢复
    clickResume () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
        szDeviceIdentify = this.Nvrip,
        szInfo = "";
      const that = this;
      if (oWndInfo != null) {
        WebVideoCtrl.I_Resume({
          success: function () {
            szInfo = "恢复成功！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'success'
            });
          },
          error: function () {
            szInfo = "恢复失败！";
            that.$message({
              message: `${szDeviceIdentify + " " + szInfo}`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 方向PTZ停止
    mouseUpPTZControl () {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
      const that = this;
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          success: function (xmlDoc) {
            that.$message({
              message: `${oWndInfo.szDeviceIdentify}停止云台成功！`,
              type: 'success'
            });
          },
          error: function (status, xmlDoc) {
            that.$message({
              message: `${oWndInfo.szDeviceIdentify}停止云台失败！`,
              type: 'warning'
            });
          }
        });
      }
    },
    // 开始预览
    clickStartRealPlay (iChannelID) {
      console.log('00000')
      //  oWndInfo = window.WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
      var szDeviceIdentify = '11.80.39.7_80',
        iRtspPort = 554,
        bZeroChannel = false,
        iStreamType,
        szInfo = "";
      const that = this;
      console.log(11111)
      // if ("undefined" === typeof iStreamType) {
      iStreamType = 1;
      bZeroChannel = false
      // }

      if (null == szDeviceIdentify) {
        return;
      }

      var startRealPlay = function () {
        //  11.80.39.7_80 554 1 1 false
        // window.WebVideoCtrl.I_StartRealPlay('11.80.39.7_80',{"iRtspPort":'554',"iStreamType":'1',"iChannelID":'1',"bZeroChannel":false}) 
        console.log(szDeviceIdentify, iRtspPort, iStreamType, iChannelID, bZeroChannel, '11123')
        window.WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iRtspPort: iRtspPort,
          iStreamType: iStreamType,
          iChannelID,
          bZeroChannel: bZeroChannel,
          success: function () {
            console.log(2222)
            // szInfo = "开始预览成功！";
            // that.showOPInfo(szDeviceIdentify + " " + szInfo);

          },
          error: function (status, xmlDoc) {
            console.log(2222, 'error')
            // if (403 === status) {
            //   szInfo = "设备不支持Websocket取流！";
            // } else {
            //   szInfo = "开始预览失败！";
            // }
            // that.showOPInfo(szDeviceIdentify + " " + szInfo);
          }
        });
        // console.log("cccccccccc", szDeviceIdentify);
      };

      // if (oWndInfo != null) {// 已经在播放了，先停止
      //   window.WebVideoCtrl.I_Stop({
      //     success: function () {
      //       startRealPlay();
      //     }
      //   });
      // } else {
      startRealPlay();
      // }
    },
    // 获取端口
    getDevicePort () {
      // var szDeviceIdentify = $("#ip").val();

      // if (null == szDeviceIdentify) {
      //   return;
      // }

      var oPort = window.WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
      if (oPort != null) {
        // $("#deviceport").val(oPort.iDevicePort);
        // $("#rtspport").val(oPort.iRtspPort);
        console.log("获取端口成功！")
        // showOPInfo(szDeviceIdentify + " 获取端口成功！");
      } else {
        // showOPInfo(szDeviceIdentify + " 获取端口失败！");
      }
    }
  }
}

export default mixin;