海康威视web插件版-vue3

厂潺发表于 2025-12-25 17:25:01

1、下载web插件

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

2、引入web插件包

[*]在 public/index.html中引入插件

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

WebVideoCtrl.I_InitPlugin({options})

// 初始化插件
const initVideoPlay = () => {
// 添加检查
if (typeof WebVideoCtrl === 'undefined') {
console.error('WebVideoCtrl 对象未定义，请检查插件是否正确加载');
return;
}
if (isPluginInit.value) {
stopVideoPlay(); // 先销毁旧插件
}
console.log('初始化视频播放', divName.value)
WebVideoCtrl.I_InitPlugin({
iWndowType: 2,
bWndFull: true,
szBorderColor: "#FF0000",
bDebugMode: true,
bWndFull: true,
cbInitPluginComplete: () => {
   InsertOBJECTPlugin()
},
});
}2、嵌入播放插件

// 嵌入播放插件const InsertOBJECTPlugin = () => {// divName.value 为指定dom的idWebVideoCtrl.I_InsertOBJECTPlugin(divName.value).then(    () => {

<details> isPluginInit.value = true; // 标记插件初始化成功

<details> // 初始化完成后设置插件可见

<details> nextTick(() => {

<details> isVisible.value = true;

<details> })

<details> // 检查插件是否最新

<details> WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {

<details> if (bFlag) {

<details> alert("检测到新的插件版本，请升级！");

<details> }

<details> });

<details> // 初始化成功后，自动登录和播放

<details> clickLogin();    },    () => {

<details> isVisible.value = false;

<details> alert("插件初始化失败，请确认是否已安装插件并启用！");    });}3、登录账号

const clickLogin = () => {
if (!hkvInfo.value.ip || !hkvInfo.value.username || !hkvInfo.value.password) {
ElMessage.error('请检查摄像头配置');
return;
}
szDeviceIdentify.value = hkvInfo.value.ip + "_" + hkvInfo.value.port;
WebVideoCtrl.I_ArrangeWindow("1*2").then(() => { // 设置画面分屏1*2布局
console.log("窗口分割成功！");
}, (oError) => {
var szInfo = "窗口分割失败！";
console.log(szInfo, oError.errorCode, oError.errorMsg);
});
WebVideoCtrl.I_Login(hkvInfo.value.ip, hkvInfo.value.type, hkvInfo.value.port, hkvInfo.value.username, hkvInfo.value.password, {
timeout: 3000,
success: function () {
   console.log(szDeviceIdentify.value + " 登录成功！");
   // 登录成功后自动预览
   clickStartRealPlay();
   clickStartRealPlay_HOT()
},
error: function (oError) {
   console.error(szDeviceIdentify.value + " 登录失败！", oError);
   // 登录失败时隐藏插件
   isVisible.value = false;
}
});
}4、预览视频

// 开始实时预览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 () {

<details> isVisible.value = true;

<details> console.log(szDeviceIdentify.value + " 开始预览成功！");

<details> // 预览成功后确保插件可见    },    error: function (oError) {

<details> console.error(szDeviceIdentify.value + " 开始预览失败！", oError);

<details> // 预览失败时隐藏插件

<details> isVisible.value = false;    }, });};if (oWndInfo != null) { WebVideoCtrl.I_Stop({    success: function () {

<details> console.log("已停止上一个预览，开始新的预览...");

<details> startRealPlay();    }, });} else { startRealPlay();}}

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

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

撷监芝 发表于 2026-1-13 20:53:34

不错，里面软件多更新就更好了

篙菠发表于 2026-1-13 23:49:44

yyds。多谢分享

摹熹发表于 2026-1-17 09:51:06

这个好，看起来很实用

替攀浮 发表于 2026-1-18 00:51:51

喜欢鼓捣这些软件，现在用得少，谢谢分享！

仲秀娟 发表于 2026-1-18 10:13:44

喜欢鼓捣这些软件，现在用得少，谢谢分享！

闻成发表于 2026-1-18 17:41:03

用心讨论，共获提升！

呶募妙 发表于 2026-1-21 08:34:25

这个好，看起来很实用

战匈琼 发表于 2026-1-22 12:44:12

前排留名，哈哈哈

皇甫佳文 发表于 2026-1-24 09:09:24

谢谢楼主提供！

全愉婉 发表于 2026-1-26 09:19:01

热心回复！

狞嗅发表于 2026-1-30 03:04:53

这个好，看起来很实用

赘暨逢 发表于 2026-2-5 11:46:14

谢谢楼主提供！

孜尊发表于 2026-2-7 22:47:17

喜欢鼓捣这些软件，现在用得少，谢谢分享！

骆贵发表于 2026-2-8 02:12:58

用心讨论，共获提升！

坐褐发表于 2026-2-8 02:57:52

新版吗？好像是停更了吧。

饨篦发表于 2026-2-9 00:12:00

用心讨论，共获提升！

电棘缣 发表于 2026-2-9 16:33:27

很好很强大我过来先占个楼待编辑

荆邦发表于 2026-2-10 16:05:11

不错，里面软件多更新就更好了

劳暄美 发表于 2026-2-10 20:42:37

感谢分享，学习下。

页: [1] 2

程序园's Archiver

海康威视web插件版-vue3