當前位置：首頁 > 前端技术 > vue >内容正文

vue

海康威视摄像头抓拍功能(web3.0+vue)开发笔记

發布時間：2024/3/26 vue 72 豆豆

生活随笔收集整理的這篇文章主要介紹了海康威视摄像头抓拍功能(web3.0+vue)开发笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、下載程序包

1-1、進入海康威視官網https://www.hikvision.com/cn/，然后進入開放平臺https://open.hikvision.com/，進行注冊登錄，點擊下載進入下載界面，點擊硬件產品,選擇WEB開發包，下載WEB3.0控件開發包下載文檔和程序包

1-2、安裝運行

在對應系統（32位/64位，我是64位）程序包中找到demo下的codebase文件夾下的WebComponentsKit.exe文件，進行雙擊安裝，在IE下運行demo報還未安裝的話，就把32位同目錄下的WebComponentsKit.exe再安裝一邊，即都安裝一邊，然后運行對應系統程序包中的demo即可，

2、demo登錄設備

輸入IP地址、端口號、用戶名、密碼點擊登錄，點擊開始預覽即可

3、項目需求編寫代碼（抓拍）

3-1、安裝jquery

注：vue-cli3.0?沒有了?webpack.config.js?配置文件，取而代之的是集合在?vue.config.js文件內進行配置

默認已經安裝好vue-cli3.0項目

命令行工具，進入項目文件夾，執行：? cnpm install jquery --save
vue.config.js 文件中：最頭部添加?“const webpack = require(‘webpack’)”；
module.exports中，添加：

configureWebpack: {// provide the app's title in webpack's name field, so that// it can be accessed in index.html to inject the correct title.name: name,resolve: {alias: {'@': resolve('src')}},plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"})]},

main.js中引入?“import $ from ‘jquery’”

3-2、在public文件加下的html中引入組件

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><script src="./api.config.js"></script><title><%= webpackConfig.name %></title></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="./hk/webVideoCtrl.js"></script></body> </html>

3-3、在src下新建webVideo.js(IP,port,用戶名，密碼我是寫死的，包括設置本地參數，圖片、視頻保存路徑也是寫死的)

// 初始化插件 export function WebVideo() {this.g_iWndIndex = 0this.szDeviceIdentify = ''this.deviceport = ''this.deviceport = ''this.channels = []this.ip = '192.168.1.153'this.port = '80'this.username = 'admin'this.password = 'Jnjmdz_1234567'this.init = function() {var self = this// 檢查插件是否已經安裝過var iRet = WebVideoCtrl.I_CheckPluginInstall();if (-1 == iRet) {alert("您還未安裝過插件，雙擊開發包目錄里的WebComponentsKit.exe安裝！");return;}// 初始化插件參數及插入插件WebVideoCtrl.I_InitPlugin('100%', '100%', {bWndFull: true,iPackageType: 2,iWndowType: 1,cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");}});}// 登錄this.clickLogin = function () {var self = thisif ("" == self.ip || "" == self.port) {return;}self.szDeviceIdentify = self.ip + "_" + self.port;WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, {success: function (xmlDoc) { setTimeout(function () {self.getChannelInfo();}, 10);setTimeout(function() {self.clickStartRealPlay()}, 500)},error: function (status, xmlDoc) {}});}// 退出this.clickLogout = function() {var self = thisif (null == self.szDeviceIdentify) {return;}var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);if (0 == iRet) {self.getChannelInfo();self.getDevicePort();}}// 獲取通道this.getChannelInfo = function() {var self = thisself.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})alert('模擬通道成功')});self.getDevicePort();},error: function (status, xmlDoc) {}});// 數字通道// 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 ("false" == online) {// 過濾禁用的數字通道// return true;// }// if ("" == name) {// name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));// }// // oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");// });// alert(" 獲取數字通道成功！");// },// error: function (status, xmlDoc) {// alert(" 獲取數字通道失敗！");// }// });// // 零通道// WebVideoCtrl.I_GetZeroChannelInfo(self.szDeviceIdentify, {// async: false,// success: function (xmlDoc) {// var oChannels = $(xmlDoc).find("ZeroVideoChannel");// $.each(oChannels, function (i) {// var id = $(this).find("id").eq(0).text(),// name = $(this).find("name").eq(0).text();// if ("" == name) {// name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));// }// // if ("true" == $(this).find("enabled").eq(0).text()) {// 過濾禁用的零通道// // oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");// // }// });// alert( " 獲取零通道成功！");// },// error: function (status, xmlDoc) {// alert( " 獲取零通道失敗！");// }// });}// 獲取端口this.getDevicePort = function() {var self = thisif (null == self.szDeviceIdentify) {return;}var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify);if (oPort != null) {self.deviceport = oPort.iDevicePort;self.deviceport = oPort.iRtspPort;alert(`${oPort.iDevicePort}${oPort.iRtspPort}`)alert('獲取端口成功')}else{alert('獲取端口失敗')}}// 開始預覽this.clickStartRealPlay = function() {var self = thisvar oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),iChannelID = self.channels[0].valueif (null == self.szDeviceIdentify) {return;}var startRealPlay = function () {WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {iRtspPort: self.deviceport,iStreamType: '1',iChannelID: iChannelID,bZeroChannel: false,success: function () {self.clickSetLocalCfg();},error: function (status, xmlDoc) {if (403 === status) {} else {}}});};if (oWndInfo != null) {// 已經在播放了，先停止WebVideoCtrl.I_Stop({success: function () {startRealPlay();}});} else {startRealPlay();}}// 停止預覽this.clickStopRealPlay = function() {var self = thisvar oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)if (oWndInfo != null) {WebVideoCtrl.I_Stop({success: function () {},error: function () {}});}}//設置預覽圖保存路徑// 設置本地參數 this.clickSetLocalCfg=function() {var arrXml = [],szInfo = "";arrXml.push("<LocalConfigInfo>");arrXml.push("<PackgeSize>0</PackgeSize>");arrXml.push("<PlayWndType>0</PlayWndType>");arrXml.push("<BuffNumberType>0</BuffNumberType>");arrXml.push("<RecordPath>D:VideoDir</RecordPath>");arrXml.push("<CapturePath>D:VideoDir</CapturePath>");arrXml.push("<PlaybackFilePath>D:VideoDir</PlaybackFilePath>");arrXml.push("<PlaybackPicPath>D:VideoDir</PlaybackPicPath>");arrXml.push("<DeviceCapturePath>D:VideoDir</DeviceCapturePath>");arrXml.push("<DownloadPath>D:VideoDir</DownloadPath>");arrXml.push("<IVSMode>1</IVSMode>");arrXml.push("<CaptureFileFormat>0</CaptureFileFormat>");arrXml.push("<ProtocolType>0</ProtocolType>");arrXml.push("</LocalConfigInfo>");var iRet = WebVideoCtrl.I_SetLocalCfg(arrXml.join(""));console.log(arrXml,'qqqq')if (0 == iRet) {szInfo = "本地配置設置成功！";} else {szInfo = "本地配置設置失敗！";}alert(szInfo)//showOPInfo(szInfo); }// 抓圖this.clickCapturePic = function() {var self = thisvar oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),szInfo = "";if (oWndInfo != null) {var xmlDoc = WebVideoCtrl.I_GetLocalCfg();var szCaptureFileFormat = "0";if (xmlDoc != null) {//szCaptureFileFormat = 'JPEG';szCaptureFileFormat = '0';}var szChannelID = this.channels[0].id;var szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();szPicName += ("0" === szCaptureFileFormat) ? ".jpg": ".bmp";alert(szPicName)var iRet = WebVideoCtrl.I_CapturePic(szPicName, {bDateDir: true //是否生成日期文件});console.log(`${iRet}結果`)if (0 == iRet) {szInfo = "抓圖成功！";} else {szInfo = "抓圖失敗！";}alert(szInfo)//showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);}} }

3-4、在vue組件中調用

<el-dialogtitle="抓拍"v-dialogDragclass="bodyCaptureDialog":visible.sync="bodyCaptureDialogShow"width="60%"><div class="dialog_content"><div class="content_top"><div id="divPlugin" class="plugin"></div></div><div class="content_bottom"><el-button @click="takeBodyPhoto">拍照</el-button><el-button >拍照查看</el-button></div></div><span slot="footer" class="dialog-footer"><el-button @click="bodyCaptureDialogShow = false">取消</el-button><el-button type="primary" @click="bodyCaptureDialogShow=false">確定</el-button></span></el-dialog> import { WebVideo } from '@/utils/webVideo'data() {return {webVideo:null,//bodyCaptureDialogShow:false,} },mounted() {this.webVideo = new WebVideo();}, methods: {//拍照takeBodyPhoto(){this.webVideo.clickCapturePic()}, }, watch: {//拍照彈框展示監聽bodyCaptureDialogShow(newValue){if(newValue){this.$nextTick(() => {this.webVideo.init()this.webVideo.clickLogin()})}}, } //抓拍彈框 .bodyCaptureDialog{#divPlugin{width: 800px;height:600px;} }

總結

以上是生活随笔為你收集整理的海康威视摄像头抓拍功能(web3.0+vue)开发笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：织信OA考勤管理系统是如何解放企业内部考
下一篇： Android11 无Root 访问da