海康威视摄像头iframe+vue实现多窗口抓拍

下载官方demo，安装浏览器驱动请参考https://blog.csdn.net/qq_38388578/article/details/116047374摄像头抓拍保存到本地，我们在本地搭建网络盘，将抓拍图片放到指定目录，即上传到本地服务器，不用走接口上传，注意：1、在public新建hk文件夹，将官方demo需要的依赖复制到文件夹下，在public文件加下新建iframe.html文件，ifr

开心就好1314520

2783人浏览 · 2021-05-21 17:31:50

开心就好1314520 · 2021-05-21 17:31:50 发布

下载官方demo，安装浏览器驱动请参考https://blog.csdn.net/qq_38388578/article/details/116047374

摄像头抓拍保存到本地，我们在本地搭建网络盘，将抓拍图片放到指定目录，即上传到本地服务器，不用走接口上传，

初始化没有设置抓图保存路径，会保存失败，所以第一次需要选择抓拍保存路径，之后就不需要设置了

注意：

1、在public新建hk文件夹，将官方demo需要的依赖复制到文件夹下，在public文件加下新建iframe.html文件，

iframe.html

<!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 type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
.plugin {
    width: 300px;
    height: 200px;
}
</style>
<body>
    <div id="divPlugin" class="plugin"></div>
</body>
<script src="./hk/jquery-1.7.1.min.js"></script>
<script src="./hk//webVideoCtrl.js"></script>
<script>

$(function () {

    var oPlugin = {
        iWidth: 300,            // plugin width
        iHeight: 200            // plugin height
    };
    var g_iWndIndex = 0;
    // ��ʼ�����������������
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,
        iWndowType: 1,
        cbInitPluginComplete: function () {
            //console.log(document.querySelectorAll('#divPlugin'),'0123')
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        },
    });

});

</script>
</html>

2、新建webVideo.vue组件


<template>
  <div>
    <iframe class="iframe" src="iframe.html" frameborder="0"></iframe>
    <iframe class="iframe" src="iframe.html" frameborder="0"></iframe>
    <div class="bottom">
      <div class="select_box" v-if="selectShow">
        <el-input
          id="previewPicPath"
          v-model="previewPicPath"
          placeholder="请选择存储路径"
        >
          <el-button
            slot="append"
            @click="clickOpenFileDlg('previewPicPath', 0)"
            >浏览</el-button
          >
        </el-input>
        <el-button type="primary" @click="clickSetLocalCfg">设置</el-button>
      </div>
      <el-button @click="clickCapturePic">拍照</el-button>
    </div>
  </div>
</template>

<script>
import * as Type from "@/api/service";
// import { videoImgSavePath } from '../../../static/js/settings'
export default {
  props: {
    businessCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      selectShow: false,
      iLoadedCount: 0,
      g_aIframe: "",
      previewPicPath: "",
      list: [
        {
          iProtocol: 1, // protocol 1：http, 2:https
          szIP: "192.168.1.154", // protocol ip
          szPort: "80", // protocol port
          szUsername: "admin", // device username
          szPassword: "*******", // device password
          iStreamType: 2, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
          iChannelID: 1, // channel no
          bZeroChannel: false
        },
        {
          iProtocol: 1, // protocol 1：http, 2:https
          szIP: "192.168.1.64", // protocol ip
          szPort: "80", // protocol port
          szUsername: "admin", // device username
          szPassword: "*********", // device password
          iStreamType: 2, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
          iChannelID: 2, // channel no
          bZeroChannel: false
        }
      ]
    };
  },

  mounted() {
    //this.g_aIframe = this.$refs("iframe");
    this.g_aIframe = document.querySelectorAll("iframe");
    //this.initWebVideo();
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
      alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级!");
      return;
    }
    console.log(this.g_aIframe, "555");
    for (var i = 0; i < this.g_aIframe.length; i++) {
      let item = this.g_aIframe[i];
      let that = this;
      // 处理兼容行问题
      if (item.attachEvent) {
        item.attachEvent("onload", function() {
          console.log("加载完成");
          // iframe加载完毕以后执行操作
          that.iframeLoaded();
        });
      } else {
        item.onload = function() {
          console.log("加载完成");
          that.iframeLoaded();
        };
      }
      //iframe卸载
      if (item.attachEvent) {
        item.attachEvent("unload", function() {
          console.log("卸载完成");
          // iframe加载完毕以后执行操作
          that.iframeUnLoaded();
        });
      } else {
        item.unload = function() {
          console.log("卸载完成");
          that.iframeUnLoaded();
        };
      }
    }
  },
  methods: {
    //加载完
    iframeLoaded() {
      console.log("ifrem", this.iLoadedCount);
      this.iLoadedCount++;
      console.log(this.iLoadedCount);
      let that = this;
      if (2 === this.iLoadedCount) {
        console.log("2");
        $.each(this.g_aIframe, (i, oIframe) => {
          console.log(i, oIframe);
          setTimeout(() => {
            var oWebVideoCtrl = that.getWebVideoCtrl(oIframe);
            console.log(oWebVideoCtrl, "7");
            // ��¼�豸
            oWebVideoCtrl.I_Login(
              that.list[i].szIP,
              that.list[i].iProtocol,
              that.list[i].szPort,
              that.list[i].szUsername,
              that.list[i].szPassword,
              {
                success: xmlDoc => {
                  console.log("登录成功");
                  var szDeviceIdentify =
                    that.list[i].szIP + "_" + that.list[i].szPort;
                  setTimeout(() => {
                    oWebVideoCtrl.I_StartRealPlay(that.list[i].szIP, {
                      iStreamType: that.list[i].iStreamType,
                      iChannelID: that.list[i].iChannelID,
                      bZeroChannel: that.list[i].bZeroChannel
                    });
                  }, 1000);
                  var xmlDoc = oWebVideoCtrl.I_GetLocalCfg();
                  if (xmlDoc != null) {
                    let url = $(xmlDoc)
                      .find("CapturePath")
                      .eq(0)
                      .text();

                    if (
                      url &&
                      url != "C:\\Users\\Administrator\\Web Kit\\CaptureFiles"
                    ) {
                      //已设置
                      console.log("已设置");
                      this.selectShow = false;
                    } else {
                      //设置
                      this.selectShow = true;
                      this.clickSetLocalCfg();
                    }
                  } else {
                    //设置
                    this.selectShow = true;
                    this.clickSetLocalCfg();
                  }
                }
              }
            );
          }, 1000);
        });
      }
    },
    //卸载
    iframeUnLoaded() {
      $.each(this.g_aIframe, (i, oIframe) => {
        this.getWebVideoCtrl(oIframe).I_Stop();
        this.getWebVideoCtrl(oIframe).I_Logout();
      });
    },
    getWebVideoCtrl(oIframe) {
      return oIframe.contentWindow.WebVideoCtrl;
    },
    // 打开选择框 0：文件夹  1：文件
    clickOpenFileDlg(id, iType) {
      let that = this;
      $.each(this.g_aIframe, (i, oIframe) => {
        if (i == 0) {
          setTimeout(() => {
            var oWebVideoCtrl = that.getWebVideoCtrl(oIframe);
            var szDirPath = oWebVideoCtrl.I_OpenFileDlg(iType);
            if (szDirPath != -1 && szDirPath != "" && szDirPath != null) {
              that.previewPicPath = szDirPath;
            }
          }, 1000);
        }
      });
    },
    //设置
    clickSetLocalCfg() {
      let that = this;
      var arrXml = [],
        szInfo = "";
      arrXml.push("<LocalConfigInfo>");
      arrXml.push("<PackgeSize>256M</PackgeSize>");
      arrXml.push("<PlayWndType>充满</PlayWndType>");
      arrXml.push("<BuffNumberType>最短延时</BuffNumberType>");
      arrXml.push(`<RecordPath>${this.previewPicPath}</RecordPath>`);
      arrXml.push(`<CapturePath>${this.previewPicPath}</CapturePath>`);
      arrXml.push(
        `<PlaybackFilePath>${this.previewPicPath}</PlaybackFilePath>`
      );
      arrXml.push(`<PlaybackPicPath>${this.previewPicPath}</PlaybackPicPath>`);
      arrXml.push(
        `<DeviceCapturePath>${this.previewPicPath}</DeviceCapturePath>`
      );
      arrXml.push(`<DownloadPath>${this.previewPicPath}</DownloadPath>`);
      arrXml.push("<IVSMode>启用</IVSMode>");
      arrXml.push("<CaptureFileFormat>JPEG</CaptureFileFormat>");
      arrXml.push("<ProtocolType>TCP</ProtocolType>");
      arrXml.push("</LocalConfigInfo>");
      console.log(arrXml, "arrxml");
      $.each(this.g_aIframe, (i, oIframe) => {
        setTimeout(() => {
          var oWebVideoCtrl = that.getWebVideoCtrl(oIframe);
          var iRet = oWebVideoCtrl.I_SetLocalCfg(arrXml.join(""));
          if (0 == iRet) {
            szInfo = "本地配置设置成功！";
          } else {
            szInfo = "本地配置设置失败！";
          }
        }, 1000);
      });

      //showOPInfo(szInfo);
    },
    // 抓图
    clickCapturePic() {
      let that = this;
      var szInfo = "";
      $.each(this.g_aIframe, (i, oIframe) => {
        var oWebVideoCtrl = that.getWebVideoCtrl(oIframe);
        //var xmlDoc = oWebVideoCtrl.I_GetLocalCfg();

        //var szPicName = that.list[i].szIP + "_" +that.list[i].szPort+ "_" + that.list[i].iChannelID + "_" + new Date().getTime()+ ".jpg";
        var szPicName = new Date().getTime() + ".jpg";
        console.log(szPicName, "文件名");

        var iRet = oWebVideoCtrl.I_CapturePic(szPicName, {
          bDateDir: true //是否生成日期文件
        });
        if (0 == iRet) {
          szInfo = "抓图成功！";
          this.postImgToAdmin(szPicName);
        } else {
          szInfo = "抓图失败！";
        }
        alert(szInfo);
      });
    },
    //
    async postImgToAdmin(str) {
      let params = {
        data: {
          businessCode: this.businessCode,
          documentTypeCode: "1",
          asRecognition: "1"
        },
        deadPhotoFile: str
      };
      let res = await Type["passVideoImgSavePath"](params);
      console.log(res, "上传图片");
      if (res.code == 1) {
        this.$message({
          type: "success",
          message: "上传成功"
        });
      }
    }
  },
  beforeDestroy() {
    $.each(this.g_aIframe, (i, oIframe) => {
      this.getWebVideoCtrl(oIframe).I_Stop();
      this.getWebVideoCtrl(oIframe).I_Logout();
    });
  }
};
</script>

<style lang="scss" scoped>
iframe {
  margin: 0;
  padding: 0;
  border: 0;
  width: 300px;
  height: 200px;
}
.select_box {
  display: flex;
  align-items: center;
}
</style>

组件在弹框中使用

<!-- 遗体抓拍弹框 -->
      <el-dialog
        title="遗体抓拍"
        v-dialogDrag
        class="bodyCaptureDialog"
        :visible.sync="bodyCaptureDialogShow"
        width="60%"
      >
        <div class="dialog_content">
          <div class="content_top">
            <!-- <div id="divPlugin" class="plugin"></div> -->
            <webVideo
              v-if="bodyCaptureDialogShow"
              :businessCode="businessCode"
            ></webVideo>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bodyCaptureDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="bodyCaptureDialogShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^