vue3集成海康硬件产品WebSDK3.3开发包

下载websdk3.3开发包

下载地址海康开放平台 (hikvision.com)

如下图所示

vue3项目中集成

1. 解压下载的压缩包
2. 集成需要开发包中3个核心文件，demo/codebase文件夹下的jsVideoPlugin-1.0.0.min.js和webVideoCtrl.js文件、demo/下的jquery-1.7.1.min.js
3. 把以上三个js文件放在vue3项目public文件夹中，如下图所示

4.在index.html中引入文件，如下所示

5.在vue页面使用

<template>
    <div id="divPlugin" class="plugin" style="height: 250px;width: 250px; ">
    </div>
    <div v-if="data.img">
        <div>抓的base64图片</div>
        <img :src="data.img" style="width: 300px; height: 250px;" />
    </div>
    <div>
        <el-button @click="init">初始化</el-button>
        <el-button @click="login">登录</el-button>
        <el-button @click="startRealPlay">预览</el-button>
        <el-button @click="capturePicData">抓图</el-button>
        <el-button @click="destroyPlugin">销毁</el-button>
    </div>
</template>
<script setup lang="ts" >
 import { ElButton } from 'element-plus';
 import { reactive } from "vue";

 const data = reactive({
    ip: '12.19.18.18', //你的设备ip
    port: '80',
    userName: '',//账号
    password: '', //密码
})

// 初始化插件参数及插入插件
function init() {
    WebVideoCtrl.I_InitPlugin({
        bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
        },
        cbDoubleClickWnd: function () {
        },
        cbEvent: (iEventType, iParam1) => {
            if (2 == iEventType) {// 回放正常结束
                console.log("窗口" + iParam1 + "回放结束！")
            } else if (-1 == iEventType) {
                console.log("设备" + iParam1 + "网络错误！")
            }
        },
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(() => {
                // 检查插件是否最新
                WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                    if (bFlag) {
                        alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
                    } else {
                        console.log('初始化成功')
                    }
                });
            }, () => {
                alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
            });
        }
    });
}
// 抓图
function capturePicData(type) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)
    if (oWndInfo != null) {
        WebVideoCtrl.I_CapturePicData().then((res) => {
            data.img = "data:image/jpeg;base64," + res
            ElMessage.success('抓图成功')
        }, function () {
        });
    }
}
// 销毁插件
function destroyPlugin() {
    WebVideoCtrl.I_Logout(`${data.ip}_${data.port}`).then(() => {
        console.log('退出成功')
        WebVideoCtrl.I_DestroyPlugin()
    }, () => {
        console.log('退出失败！')
    });
}

//  登录
function login() {
    WebVideoCtrl.I_Login(data.ip, 1, data.port, data.userName, data.password, {
        timeout: 3000,
        success: function (xmlDoc) {
            getDevicePort(`${data.ip}_${data.port}`);  //获取端口
        },
        error: function (error) {
            console.log(error)
        }
    });
}

// 获取端口
function getDevicePort(szDeviceIdentify) {
    if (!szDeviceIdentify) {
        return;
    }
    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
        console.log('登录成功', oPort)
    }, (oError) => {
        ElMessage.error(oError.errorMsg)
    });
}
// 开始预览
function startRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)
    var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(`${data.ip}_${data.port}`, {
            iStreamType: 1,
            iChannelID: 1,//播放通道
            bZeroChannel: false,
            success: function () {
                console.log(" 开始预览成功！")
            },
            error: function (oError) {
                console.log(" 开始预览失败！", oError.errorMsg)
            }
        });
    };

    if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: () => {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}
</script>
<style lang="less" scoped></style>