实现过程

登入海康开发者平台下载 WEB无插件开发包 V3.2

在index.html文件中引入需要的JS开发包，注：开发包文件需要放在public 文件夹下:

配置nginx :将开发包的nginx1.10.2放在自己项目的同级目录下，项目频繁打包调试。

   配置nginx的config本机地址和端口，root指向vue的打包文件dist.

配置自己的webVideo.js：详细配置如下：

export function WebVideo() { this.g_iWndIndex = 0//窗口索引 this.szDeviceIdentify = ''//设备标识(通道) this.deviceport = ''//设备端口 this.rtspPort = ''//rtsp端口 this.channels = []//通道数组 this.ip = ''//ip地址 this.port = ''//端口号 this.username = ''//海康提供的监控登入用户名 this.password = ''//登入密码 this.init = function(ip, username, password) { this.ip = ip this.username = username this.password = password // 初始化插件参数及插入插件 WebVideoCtrl.I_InitPlugin(1160, 630, { szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red', bWndFull: true, // 全屏 // iPackageType: 2, iWndowType: 1, //分屏 bNoPlugin: true, // 支持无插件 cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); } }); } // 登录 this.clickLogin = function () { let self = this if ("" == self.ip || "" == self.port) { return console.log('请输入ip和端口'); } self.szDeviceIdentify = self.ip + "_" + self.port; console.log(self.szDeviceIdentify,'----self.szDeviceIdentify-----'); WebVideoCtrl.I_Login(self.ip, 2, self.port, self.username, self.password, {//1 代表http协议,2 https success: function (xmlDoc) { setTimeout(function () { // console.log('登录成功'); Store.setIpProt(self.szDeviceIdentify)//存储已登入ip和端口 self.getChannelInfo(); self.getDevicePort(); }, 10); setTimeout(function() { self.clickStartRealPlay() }, 500) }, error: function (status, xmlDoc) { console.log(status,'登录失败'); } }); } // 退出 this.clickLogout = function() { var self = this self.channels = [] if (null == self.szDeviceIdentify) { return; } var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify); if (0 == iRet) { self.getChannelInfo(); self.getDevicePort(); } } // 获取通道 this.getChannelInfo = function(e) { var self = this self.channels = [] if (null == self.szDeviceIdentify) { return; } // 模拟通道 WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("VideoInputChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } self.channels.push({ id: id, name: name }) }); }, error: function (status, xmlDoc) { console.log(self.channels,'获取模拟通道号失败') } }); // 数字通道 WebVideoCtrl.I_GetDigitalChannelInfo(self.szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("InputProxyChannelStatus"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(), online = $(this).find("online").eq(0).text(); if ("" == name) { name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } self.channels.push({ id: id, name: name, online:online }) }); console.log(self.szDeviceIdentify +'--'+self.channels[0]+ "--szDeviceIdentify--channels[0]--- 获取数字通道成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify +'--'+self.channels[0] + " ---获取数字通道失---", status, xmlDoc); } }); } // 获取端口 this.getDevicePort = function() { var self = this if (null == self.szDeviceIdentify) { return; } var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify); if (oPort != null) { self.deviceport = oPort.iDevicePort; self.rtspPort = oPort.iRtspPort; } console.log('获取端口号成功') } // 开始预览 this.clickStartRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex), iChannelID = self.channels[0].id console.log(self.channels,"---开始预览--通道号----"); if (null == self.szDeviceIdentify) { // console.log(self.szDeviceIdentify + ' --szDeviceIdentify--为空---'); return; } var startRealPlay = function () { WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, { iChannelID: iChannelID, bZeroChannel: false, iStreamType: 2, success: function () { console.log('预览成功') }, error: function (status, xmlDoc) { if (403 === status) { console.log('设备不支持Websocket取流') } else { console.log(iChannelID,self.szDeviceIdentify,'--------预览失败---------',status, xmlDoc,) } } }); }; if (oWndInfo != null) {// 已经在播放了，先停止 WebVideoCtrl.I_Stop({ success: function () { startRealPlay(); } }); } else { startRealPlay(); } } // 停止预览 this.clickStopRealPlay = function() { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex) if (oWndInfo != null) { WebVideoCtrl.I_Stop({ success: function () { console.log('停止预览成功') }, error: function () { console.log('停止预览失败') } }); } }/* 云平台控制 */// PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZlet g_bPTZAuto = false;this.mouseDownPTZControl=function (iPTZIndex) { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex), bZeroChannel = self.channels[0].id ,//通道id iPTZSpeed = 4;//切换速度 $("#ptzspeed").val() if (bZeroChannel==0) {// 零通道不支持云台 // return console.log(bZeroChannel+"-----云台"); } if (oWndInfo != null) { if (9 == iPTZIndex && g_bPTZAuto) { iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动 } else { self.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭 } WebVideoCtrl.I_PTZControl(iPTZIndex, false, { iPTZSpeed: iPTZSpeed, success: function (xmlDoc) { if (9 == iPTZIndex && g_bPTZAuto) { } else { } if (9 == iPTZIndex) { g_bPTZAuto = !g_bPTZAuto; } }, error: function (status, xmlDoc) { } }); }}// 方向PTZ停止this.mouseUpPTZControl=function () { let self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(1, true, { success: function (xmlDoc) { }, error: function (status, xmlDoc) { } }); }}/* 调焦部分 */// 变倍+this.PTZZoomIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(10, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦+失败！", status, xmlDoc); // showOPInfo(oWndInfo.szDeviceIdentify + " 调焦+失败！", status, xmlDoc); } }); }}// 变倍—this.PTZZoomout= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(11, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦-失败！", status, xmlDoc); } }); }}// 停止变倍this.PTZZoomStop= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(11, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 调焦停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 调焦停止失败！", status, xmlDoc); } }); }}// 变焦+this.PTZFocusIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(12, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦+失败！", status, xmlDoc); } }); }}// 变焦— this.PTZFoucusOut=function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(13, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦-失败！", status, xmlDoc); } }); }}// 停止变焦this.PTZFoucusStop=function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(12, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 聚焦停止失败！", status, xmlDoc); } }); }}// 光圈+this.PTZIrisIn= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(14, false, { iWndIndex: selfg_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈+成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈+失败！", status, xmlDoc); } }); }}// 光圈-this.PTZIrisOut= function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(15, false, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈-成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈-失败！", status, xmlDoc); } }); }}// 停止光圈this.PTZIrisStop = function () { var self = this var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_PTZControl(14, true, { iWndIndex: self.g_iWndIndex, success: function (xmlDoc) { console.log(self.szDeviceIdentify + " 光圈停止成功！"); }, error: function (status, xmlDoc) { console.log(self.szDeviceIdentify + " 光圈停止失败！", status, xmlDoc); } }); }}}

Vue 文件的按需配置：

              以下是我的配置信息，可参考开发包提供的demo配置文件进行设置；通过海康提供的摄像头ip、用户名、密码实现登入功能； 注：必须要登入才可以实现预览等功能； 

<template> <div id="monitorVideo"> <!-- 监控画面 --> <div class="monitoring"> <div class="monitoring_content" style="position: relative"> <div class="plugin" id="divPlugin"></div> <div class="data_Selection" style=" height: 60px; align-items: center; flex-wrap: wrap; background-color: transparent;justify-content: space-around;"> <div class="control_button" style="display: flex; justify-content: center; align-items: center" > <el-button @click="clickStartRealPlay1">播放</el-button> <el-button @click="clickStopRealPlay">暂停</el-button> </div> <div class="control_button" style="display: flex; justify-content: center; align-items: center"> <el-button @mousedown="zoomIn" @mouseup="stopZoom" style="width: 50px" >变倍+</el-button> <el-button @mousedown="zoomOut" @mouseup="stopZoom" style="width: 50px">变倍-</el-button> <el-button @mousedown="focusIn" @mouseup="stopFocus" style="width: 80px; ">变焦+</el-button> <el-button @mousedown="focusOut" @mouseup="stopFocus" style="width: 80px; ">变焦-</el-button> <el-button @mousedown="apertureIn" @mouseup="stopAperture" style="width: 80px; ">光圈+</el-button> <el-button @mousedown="apertureOut" @mouseup="stopAperture" style="width: 80px; ">光圈-</el-button> </div> <div class="ptz_control" style="display: flex; justify-content: left; align-items: center"> <el-button @mousedown="mouseDownPTZControl" @mouseup="mouseUpPTZControl" >上</el-button> <el-button @mousedown="mouseDownPTZControl2" @mouseup="mouseUpPTZControl2">下</el-button> <el-button @mousedown="mouseDownPTZControl3" @mouseup="mouseUpPTZControl3">左</el-button> <el-button @mousedown="mouseDownPTZControl4" @mouseup="mouseUpPTZControl4">右</el-button> <el-button @mousedown="mouseDownPTZControl5" @mouseup="mouseUpPTZControl5">左上</el-button> <el-button @mousedown="mouseDownPTZControl6" @mouseup="mouseUpPTZControl6">左下</el-button> <el-button @mousedown="mouseDownPTZControl7" @mouseup="mouseUpPTZControl7" >右上</el-button> <el-button @mousedown="mouseDownPTZControl8" @mouseup="mouseUpPTZControl8">右下</el-button> <el-button @mousedown="mouseDownPTZControl9" @mouseup="mouseUpPTZControl9">自动</el-button> </div> </div> </div> </div> </div></template><script setup>import {ref,nextTick, onMounted} from 'vue'import { WebVideo} from '@/assets/video/webVideo.js'import { storeToRefs } from "pinia";import { Store } from "@/store";const store = Store();//登入信息const loginInfo = ref({ip: "",portNumber: "",userName: "",password: "",})const webVideo = new WebVideo()// 登入 function initVideoPlay() { nextTick(() => { webVideo.init(loginInfo.value.ip, loginInfo.value.userName, loginInfo.value.password) webVideo.clickLogin() // console.log( webVideo.clickLogin(),"登陆状态"); }) } onMounted(() => { initVideoPlay() });// 退出登入function stopVideoPlay() { webVideo.clickStopRealPlay() webVideo.clickLogout() }// 播放function clickStartRealPlay1() { webVideo.clickStartRealPlay() }// 暂停播放 function clickStopRealPlay() { webVideo.clickStopRealPlay() }// 开始移动控制 传入方向控制1-8function mouseDownPTZControl() { // console.log('鼠标按下了'); webVideo.mouseDownPTZControl(1) }// 结束移动控制function mouseUpPTZControl() { // console.log('鼠标抬起了'); webVideo.mouseUpPTZControl(1)}//向下移动function mouseDownPTZControl2() { webVideo.mouseDownPTZControl(2)}function mouseUpPTZControl2() { webVideo.mouseUpPTZControl(2)}// 向左移动function mouseDownPTZControl3() { webVideo.mouseDownPTZControl(3)}function mouseUpPTZControl3() { webVideo.mouseUpPTZControl(3)}// 向右移动function mouseDownPTZControl4() { webVideo.mouseDownPTZControl(4)}function mouseUpPTZControl4() { webVideo.mouseUpPTZControl(4)}// 向左上移动function mouseDownPTZControl5() { webVideo.mouseDownPTZControl(5)}function mouseUpPTZControl5() { webVideo.mouseUpPTZControl(5)}// 向左下移动function mouseDownPTZControl6() { webVideo.mouseDownPTZControl(6)}function mouseUpPTZControl6() { webVideo.mouseUpPTZControl(6)}// 向右上移动function mouseDownPTZControl7() { webVideo.mouseDownPTZControl(7)}function mouseUpPTZControl7() { webVideo.mouseUpPTZControl(7)}// 向右下移动function mouseDownPTZControl8() { webVideo.mouseDownPTZControl(8)}function mouseUpPTZControl8() { webVideo.mouseUpPTZControl(8)}// 自动function mouseDownPTZControl9() { webVideo.mouseDownPTZControl(9)}function mouseUpPTZControl9() { webVideo.mouseUpPTZControl(9)}// 变倍+function zoomIn() { webVideo.PTZZoomIn()}// 变倍-function zoomOut() { webVideo.PTZZoomout()}// 停止变倍function stopZoom() { webVideo.PTZZoomStop()}// 变焦+function focusIn() { webVideo.PTZFocusIn()}// 变焦-function focusOut() { webVideo.PTZFoucusOut()}// 停止变焦function stopFocus() { webVideo.PTZFoucusStop()}// 光圈+function apertureIn() { webVideo.PTZIrisIn()}// 光圈-function apertureOut() { webVideo.PTZIrisOut()}// 停止光圈function stopAperture() { webVideo.PTZIrisStop()}</script><style scoped lang="scss">#monitorVideo{ height: 950px; background-color: #c3c7dd; text-align: center;}.tips1{ color: rgb(90, 144, 180); padding: 10px 30px; background-color: transparent; box-shadow: 0 0 0px #48adf026; text-decoration: none; -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255,255,255,0.1));}.data_Selection { width:1800px; height: 100px; background-color: #313445; display: flex; align-items: center; justify-content: space-around; position: relative; .option_data { margin-left: 30px; } .specific_time { margin-left: 20px; font-size: 20px; font-family: MicrosoftYaHei; color: #b7b8bb; } :deep(.el-input__wrapper) { color: white; background-color: rgb(70, 72, 87); } :deep(.el-input__inner) { color: white; } .el-button { width: 50px; height: 35px; color: #ffffff; font-size: 14px; background-color: #1890ff; border: none; margin-left: 20px; } .el-button:hover { background-color: #2ebbf3; } .el-button:focus { background-color: #2ebbf3; } .out { background-color: transparent; position: absolute; right: 10px; }}.monitoring{ display: flex; color: #fff; border-top: 1px solid transparent; .monitoring_title{ display: flex; align-items: center; span{ width: 100%; height: 50px; line-height: 50px; text-align: center; display: inline-block; cursor: pointer; } } .monitoring_content{ margin-left: 20px; justify-content: center; align-items: center; .plugin{ width: 1160px; height: 630px; background-color: rgb(49, 52, 68); padding: 10px 20px; margin-top: 125px; margin-left: 300px; } }}.buttn{ color: #fff; text-decoration: none; width: 80px; background-color: rgb(24, 144, 255); height: 35px; text-align: center; line-height: 35px; border-radius: 5px; margin-left: 10px;}.buttn:hover{ background-color: #2ebbf3; color: #fff;}.el-select { :deep(.el-input__wrapper) { background-color: rgb(49, 52, 69); } :deep(.el-input__inner) { text-align: left; color: rgb(224, 224, 224); font-size: 17px; background-color: rgb(49, 52, 69); } }</style>

 5. 实现预览功能示例：