您现在的位置是:首页 > 技术教程 正文

海康威视WebSDK_V3.3.0 集成vue2项目避坑+解决方案

admin 阅读: 2024-03-27
后台-插件-广告管理-内容页头部广告(手机)

最近新需求项目集成WebSDK_V3.3.0的视频插件,开发过程中遇到了一些问题,如下:

  1. 无法正确引入插件/InitPlugin报错
  2. 使用文档中写的I_DestroyPlugin报错并且再次Init插件后 无法正常播放,报错如下:
    在这里插入图片描述

如果你也有类似问题请往下看

首先 开发包如下:
在这里插入图片描述

1.无法正确引入插件/InitPlugin报错

首先 确认你已经正确引入了开发包的demo / codebase 路径下的 jsVideoPlugin-1.0.0.min.js,webVideoCtrl.js 两个文件,(放到项目的静态资源路径下) ,并且安装了插件_HCWebSDKPlugin.exe_ ,

import '../../../public/static/haikangV2/codebase/webVideoCtrl' //若使用 import a from path 后面就要用 a.I_InitPlugin 我这里直接improt就直接使用webVideoCtrl的函数了
  • 1
  • 2

只需要引入这一个就行

然后在mounted时,进行插件的init,以下是我的代码。

mounted() { const _this = this //setTimeout不是必须哈 setTimeout(() => { this.InitPlugin() }, 200) _this.$nextTick(() => { $(window).bind({ resize: function () { _this.resizeView() } }) }) }, InitPlugin() { I_InitPlugin({ bWndFull: true, iWndowType: _this.reviewdialogVisible === false ? 2 : 1, bDebugMode: true, // ... 其他回调函数的定 cbInitPluginComplete: function () { // console.log('插件初始化') I_InsertOBJECTPlugin("divPlugin").then(() => { _this.checkInit = true }, () => { _this .$confirm(_this.$t('common.WhetherToDownload'), _this.$t('common.notice'), { confirmButtonText: _this.$t('button.confirmBtn'), cancelButtonText: _this.$t('button.cancelBtn'), type: 'warning' }) .then(() => { window.open('../config/HCWebSDKPlugin.exe') }) .catch(() => { _this.$message.info(_this.$t('common.cancel')) }) }); }, }) },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

如果此时你的插件不能正常工作,并且在demo里面能正常工作,那么现在要去他的源代码中改动一些东西:
首先格式化一下引入的两个文件,在webVideoCtrl.js中 能找到下面的代码:
在这里插入图片描述原先有个获取dirName方法,就是获取webVideoCtrl.js自己的文件路径前缀,通过这个路径拼接再去找到jsVideoPlugin.js,但是vue结构下打包后这个文件路径获取肯定不对,因此修改为如下代码:

this.I_InitPlugin = function (options) { m_utilsInc.extend(m_options, options); //改动部分 if ('object' === typeof exports && typeof module !== 'undefined') { require(['./jsVideoPlugin-1.0.0.min.js'], function (o) { window.JSVideoPlugin = o.JSVideoPlugin if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } else if ('function' === typeof define && define.amd) { require(['./jsVideoPlugin-1.0.0.min.js'], function (o) { window.JSVideoPlugin = o.JSVideoPlugin if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } else { m_utilsInc.loadScript('./jsVideoPlugin-1.0.0.min.js', function () { if (options.cbInitPluginComplete) { options.cbInitPluginComplete() } }) } window.addEventListener("resize", function () { if (m_pluginOBJECT !== null) { var oElem = $("#" + m_options.szContainerID); m_pluginOBJECT.JS_Resize(oElem.width(), oElem.height()) } }); window.addEventListener("unload", function () { }) };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

2.使用文档中写的I_DestroyPlugin报错并且再次Init插件后 无法正常播放

这个问题我和海康开发人员沟通,但是并未获得有效恢复,我的解决办法是,使用_jsVideoPlugin-1.0.0.min.js_中的另外两个函数JS_HideWnd和JS_ShowWnd代替Destory和重新init,格式化_jsVideoPlugin-1.0.0.min.js_就能找到这两个函数。
在这里插入图片描述
此时,在webVideoCtrl.js中新建两个函数

this.I_HideWnd = function () { m_pluginOBJECT.JS_HideWnd() this.I_ShowWnd = function () { m_pluginOBJECT.JS_ShowWnd() };
  • 1
  • 2
  • 3
  • 4
  • 5

然后在自己的页面调用这两个函数就可以实现hide,show
以下是我的代码

注意请先stop当前流再销毁/hide插件,为了最大限度保证插件下次show/Init正常

let stopAll = () => { return new Promise(resolve => { I_StopAllPlay().then(() => { //先stop当前播放的视频,全部stop再hide resolve('success'); }); }); }; stopAll().then(res => { if (res === 'success') { try { // 在I_StopAllPlay()异步操作完成后再执行 I_HideWnd() } catch (e) { console.error('销毁失败', e); } } }); //合适的地方 I_ShowWnd()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

以下是运行效果:
运行效果

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索