海康威视web插件版-vue3

1、下载web插件

• 官网地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=20&id=77c7f9ab64da4dbe8b2df7efe3365ec2
  
• 下载 并安装
  
  
  
  
  
  
  

2、引入web插件包

• 在 public/index.html中引入插件
  

1.   
2.   
3.    <details>

复制代码

## 3、页面调用插件  1、初始化插件

WebVideoCtrl.I_InitPlugin({options})

1. // 初始化插件
2. const initVideoPlay = () => {
3.   // 添加检查
4.   if (typeof WebVideoCtrl === 'undefined') {
5.     console.error('WebVideoCtrl 对象未定义，请检查插件是否正确加载');
6.     return;
7.   }
8.   if (isPluginInit.value) {
9.     stopVideoPlay(); // 先销毁旧插件
10.   }
11.   console.log('初始化视频播放', divName.value)
12.   WebVideoCtrl.I_InitPlugin({
13.     iWndowType: 2,
14.     bWndFull: true,
15.     szBorderColor: "#FF0000",
16.     bDebugMode: true,
17.     bWndFull: true,
18.     cbInitPluginComplete: () => {
19.       InsertOBJECTPlugin()
20.     },
21.   });
22. }

复制代码

2、嵌入播放插件

1. // 嵌入播放插件const InsertOBJECTPlugin = () => {  // divName.value 为指定dom的id  WebVideoCtrl.I_InsertOBJECTPlugin(divName.value).then(      () => {  
2.   
3.    <details> isPluginInit.value = true; // 标记插件初始化成功  
4.   
5.    <details> // 初始化完成后设置插件可见  
6.   
7.    <details> nextTick(() => {  
8.   
9.    <details>   isVisible.value = true;  
10.   
11.    <details> })  
12.   
13.    <details> // 检查插件是否最新  
14.   
15.    <details> WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {  
16.   
17.    <details>   if (bFlag) {  
18.   
19.    <details>     alert("检测到新的插件版本，请升级！");  
20.   
21.    <details>   }  
22.   
23.    <details> });  
24.   
25.    <details> // 初始化成功后，自动登录和播放  
26.   
27.    <details> clickLogin();      },      () => {  
28.   
29.    <details> isVisible.value = false;  
30.   
31.    <details> alert("插件初始化失败，请确认是否已安装插件并启用！");      }  );}

复制代码

3、登录账号

1. const clickLogin = () => {
2.   if (!hkvInfo.value.ip || !hkvInfo.value.username || !hkvInfo.value.password) {
3.     ElMessage.error('请检查摄像头配置');
4.     return;
5.   }
6.   szDeviceIdentify.value = hkvInfo.value.ip + "_" + hkvInfo.value.port;
7.   WebVideoCtrl.I_ArrangeWindow("1*2").then(() => { // 设置画面分屏1*2布局
8.     console.log("窗口分割成功！");
9.   }, (oError) => {
10.     var szInfo = "窗口分割失败！";
11.     console.log(szInfo, oError.errorCode, oError.errorMsg);
12.   });
13.   WebVideoCtrl.I_Login(hkvInfo.value.ip, hkvInfo.value.type, hkvInfo.value.port, hkvInfo.value.username, hkvInfo.value.password, {
14.     timeout: 3000,
15.     success: function () {
16.       console.log(szDeviceIdentify.value + " 登录成功！");
17.       // 登录成功后自动预览
18.       clickStartRealPlay();
19.       clickStartRealPlay_HOT()
20.     },
21.     error: function (oError) {
22.       console.error(szDeviceIdentify.value + " 登录失败！", oError);
23.       // 登录失败时隐藏插件
24.       isVisible.value = false;
25.     }
26.   });
27. }

复制代码

4、预览视频

1. // 开始实时预览const clickStartRealPlay = (iStreamType = 1) => {  // 默认主码流  let oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex.value);  if (null == szDeviceIdentify.value) {    console.warn("未登录，无法开始预览");    return;  }  var startRealPlay = function () {    WebVideoCtrl.I_StartRealPlay(szDeviceIdentify.value, {      iStreamType: iStreamType,      iChannelID: 1, // 默认预览通道1，您可以根据需要修改      bZeroChannel: false,      success: function () {  
2.   
3.    <details> isVisible.value = true;  
4.   
5.    <details> console.log(szDeviceIdentify.value + " 开始预览成功！");  
6.   
7.    <details> // 预览成功后确保插件可见      },      error: function (oError) {  
8.   
9.    <details> console.error(szDeviceIdentify.value + " 开始预览失败！", oError);  
10.   
11.    <details> // 预览失败时隐藏插件  
12.   
13.    <details> isVisible.value = false;      },    });  };  if (oWndInfo != null) {    WebVideoCtrl.I_Stop({      success: function () {  
14.   
15.    <details> console.log("已停止上一个预览，开始新的预览...");  
16.   
17.    <details> startRealPlay();      },    });  } else {    startRealPlay();  }}

复制代码

• 注:由于是插件模式，所以页面出现的弹窗 下拉菜单之类的会被视频窗口遮挡，所以需要在合适的时候对窗口进行隐藏
  
  
  
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！