海康摄像头web3.3前端实现

上篇我发布了一篇文章，有一个刷新页面摄像头就消失的bug，这个代码就是我改过以后得。

直接就放到组件里就行。要是不出来的话，可能是你们插件有问题。可以重新安装一次插件。

<template>

<div class="chart-box" ref="chartBox">

    <div class="chart-body" ref="divPlugin" id="divPlugin"></div>

</div>

</template> <script> // import chartTitle from "./chartTitle.vue"; export default { // components: { chartTitle }, data() { return { szIP: "", //摄像头ip地址 szPort: "", //摄像头端口 szUsername: "admin", //摄像头登录用户名 szPassword: "", //摄像头登录密码 szDeviceIdentify: this.szIP + "_" + this.szPort, //摄像头变量,不知道干啥的 }; }, created() {}, mounted() { this.initHkCtrl(); }, beforeDestroy() { this.destoryVideo(); }, methods: { //初始化海康海康摄像头,初始化完成后再登录及后续操作 initHkCtrl() { WebVideoCtrl.I_InitPlugin({ bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持 iWndowType: 1, cbInitPluginComplete: () => { //插件初始化完成回调 WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then( () => { WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => { this.hkLogin(); }); }, () => { alert("插件初始化失败"); } ); }, }); }, //海康摄像头登录方法 hkLogin() { console.log("调用登录方法"); WebVideoCtrl.I_Login(this.szIP, 1, this.szPort, this.szUsername, this.szPassword, { timeout: 5000, success: () => { console.log("登录成功"); setTimeout(() => { this.getDevicePort(); }, 10); }, error: ({ errorCode }) => { console.log("oError: ", errorCode); if (2001 === errorCode) { console.log("已登录过"); } else { console.log("登录失败"); } }, }); }, //获取海康摄像头端口 getDevicePort() { console.log("开始获取摄像头端口"); WebVideoCtrl.I_GetDevicePort(this.szIP).then(({ iDevicePort, iHttpPort, iRtspPort }) => { this.startRealPlay(); }); }, //打开海康摄像头监控画面 startRealPlay() { const oWndInfo = WebVideoCtrl.I_GetWindowStatus(0); const _this = this; function play() { WebVideoCtrl.I_StartRealPlay(_this.szIP, { iStreamType: 1, iChannelID: 1, bZeroChannel: false, success: function () { console.log("预览成功"); }, error: function () { console.log("预览失败"); }, }); } if (oWndInfo != null) { // 已经在播放了，先停止 WebVideoCtrl.I_Stop({ success: function () { play(); }, }); } else { play(); } }, //海康摄像头销毁方法 --解决vue切换路由后摄像头画面存在问题 destoryVideo() { WebVideoCtrl.I_DestroyPlugin() .then(() => { console.log("then"); }) .catch((err) => { console.log("catch: ", err); }); }, }, }; </script> <style lang="scss" scoped> .chart-box { width: 100%; height: 100%; } .chart-body { position: absolute; top: 35px; z-index: -11; width: calc(35vw - 60px); height: calc(30vh - 100px); } </style>

在public文件下新建一个hk文件，把这三个文件放进去，在html中引入。

在public文件下引入这两个，那个jsVideoPlugin那个文件不用引入。