vue3结合海康WEB开发包，开发web在线预览视频

我们这里选择V3.3版本

文档地址：https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=20&id=4c945d18fa5f49638ce517ec32e24e24

解压过后，会有三个文件夹

在docs中，点开Demo使用说明，按照流程先测试下，你的摄像头能不能调通

能够调通之后，我们再去正式在我们项目中进行开发。

步骤一：项目html文件中引入js依赖

我是将js依赖放到了public中

html中引入

步骤二：安装HCWebSDKPlugin.exe程序

步骤三：新建vue组件，将下面代码放进去，修改IP、用户名和密码

<template><div class="hkv"><!-- 选择摄像头 --><div><p>选择摄像头</p><el-select v-model="data.currentChannelID " @change="channelChange"  placeholder="Select" style="width: 240px"><el-option v-for="item in channelData":key="item.id":label="item.name":value="item.id"/></el-select></div><div id="divPlugin"class="plugin":style="[{ width: props.wid ? props.wid + 'px' : '250px' }, { height: props.height ? props.height + 'px' : '100%' }]"></div><div v-if="data.img"><img :src="data.img" style="width: 300px; height: 250px;"/></div></div></template><script setup lang="ts">import{ ElMessage, MessageParamsWithType }from"element-plus";import{ onMounted,onUnmounted, reactive, ref }from"vue";let g_iWndIndex =0;onMounted(()=>{init()});letprops: any =defineProps({// 传值wid: Number,height: Number
})const data =reactive({// 摄像头数据ip:"192.168.1.114",//你的ipport:"80",userName:"",//账号password:"",//密码img:"",currentChannelID:1,// 当前播放通道});letchannelData:any =reactive([// 通道数据// {//     id:'',//     name:'',//     online:''// }])// 初始化插件参数及插入插件constinit=()=>{
    WebVideoCtrl.I_InitPlugin({bWndFull:true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iWndowType:1,cbSelWnd:function(xmlDoc: any){
            g_iWndIndex =parseInt($(xmlDoc).find("SelectWnd").eq(0).text(),10);},cbDoubleClickWnd:function(){},cbEvent:(iEventType: number,iParam1: string)=>{if(2== iEventType){// 回放正常结束
                console.log("窗口"+ iParam1 +"回放结束！");}elseif(-1== iEventType){
                console.log("设备"+ iParam1 +"网络错误！");}},cbInitPluginComplete:function(){
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(()=>{// 检查插件是否最新
                    WebVideoCtrl.I_CheckPluginVersion().then((bFlag: any)=>{if(bFlag){alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");}else{
                            console.log("初始化成功");setTimeout(()=>{login()// 登录},10)}});},()=>{alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");});},});};// 抓图constcapturePicData=(type: any)=>{var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);if(oWndInfo !=null){
        WebVideoCtrl.I_CapturePicData().then((res: string)=>{
                data.img ="data:image/jpeg;base64,"+ res;
                ElMessage.success("抓图成功");},function(){});}};// 销毁插件constdestroyPlugin=()=>{
    WebVideoCtrl.I_Logout(`${data.ip}_${data.port}`).then(()=>{
            console.log("退出成功");
            WebVideoCtrl.I_DestroyPlugin();},()=>{
            console.log("退出失败！");});};//  登录constlogin=()=>{
    WebVideoCtrl.I_Login(data.ip,1, data.port, data.userName, data.password,{timeout:3000,success:function(xmlDoc: any){getDevicePort(`${data.ip}_${data.port}`);//获取端口},error:function(error: any){
            console.log(error);},});};// 获取端口constgetDevicePort=(szDeviceIdentify: string)=>{if(!szDeviceIdentify){return;}
    WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort: any)=>{
            console.log("登录成功", oPort);setTimeout(()=>{getdigitalChannel()},10);},(oError:{errorMsg: MessageParamsWithType })=>{
            ElMessage.error(oError.errorMsg);});};// 开始预览conststartRealPlay=()=>{var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);varstartRealPlay=function(){
        WebVideoCtrl.I_StartRealPlay(`${data.ip}_${data.port}`,{iStreamType:1,iChannelID: data.currentChannelID,//播放通道bZeroChannel:false,success:function(){
                console.log(" 开始预览成功！");},error:function(oError:{errorMsg: any }){
                console.log(" 开始预览失败！", oError.errorMsg);},});};if(oWndInfo !=null){// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({success:()=>{startRealPlay();},});}else{startRealPlay();}};//  格式化时间constdateFormat=(oDate:{getMonth:()=> number;getDate:()=> any;getHours:()=> any;getMinutes:()=> any;getSeconds:()=> any;getMilliseconds:()=> any;getFullYear:()=> string;},fmt: string
)=>{var o ={"M+": oDate.getMonth()+1,//月份"d+": oDate.getDate(),//日"h+": oDate.getHours(),//小时"m+": oDate.getMinutes(),//分"s+": oDate.getSeconds(),//秒"q+": Math.floor((oDate.getMonth()+3)/3),//季度S: oDate.getMilliseconds(),//毫秒};if(/(y+)/.test(fmt)){
        fmt = fmt.replace(
            RegExp.$1,(oDate.getFullYear()+"").substr(4- RegExp.$1.length));}for(var k in o){if(newRegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length ==1? o[k]:("00"+ o[k]).substr((""+ o[k]).length));}}return fmt;};// 获取数字通道constgetdigitalChannel=()=>{let szDeviceIdentify = data.ip +"_"+ data.port;// 数字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify,{success:function(xmlDoc: any){var oChannels =$(xmlDoc).find("InputProxyChannelStatus");let oChannelsdata =[]
            $.each(oChannels,function(i: number){var id =$(this).find("id").eq(0).text(),
                    name =$(this).find("name").eq(0).text(),
                    online =$(this).find("online").eq(0).text();if("false"== online){// 过滤禁用的数字通道returntrue;}if(""== name){
                    name ="IPCamera "+(i <9?"0"+(i +1):(i +1));}
                oChannelsdata.push({
                    id,
                    name,
                    online
                })//   oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");});
            channelData = oChannelsdata
            data.currentChannelID = oChannelsdata[0].id
            startRealPlay();// 开始预览//   showOPInfo(szDeviceIdentify + " 获取数字通道成功！");},error:function(oError: any){
            console.log("获取数字通道失败", oError);},});};constchannelChange=()=>{startRealPlay()// 重新预览}onUnmounted(()=>{destroyPlugin()// 销毁})</script><style lang="less" scoped>.hkv {display: flex;
    justify-content: center;}</style>

最后启动，就可以得到一个最为简单的视频预览