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

HTML

海康视频展示（web前端）

發布時間：2023/12/10 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了海康视频展示（web前端）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一步

第二步

<template><div class="dailog" v-if="visible"><div class="box"><div class="close"><a-icon type="close" @click="handleCancel" /></div><divid="videoPlayerBox"ref="videoPlayerBox":style="{width: width + 'px',height: height + 'px',top: top + 'px',left: left + 'px',}"><divv-if="visible"id="playBox"v-html="oWebControl === null ? playText : ''"></div></div></div></div> </template> <script> import { commonModule } from '@/store/modules/common' import { mixinPagination } from '@/utils/mixin.js' export default {name: 'actualPerson',components: {},mixins: [mixinPagination],data() {return {oWebControl: null,pubKey: '', // 公鑰appkey: '23294769',secret: 'yseqUt0p2TPuuAXaMhez',ip: '172.45.252.107:443',port: '',width: 1000,height: 550, // 彈框高度playHeight: 550,layout: '1x1',left: '',top: '',buttonIDs: '0,16,256,257,515',initCount: 0,playMode: 0, // 0 預覽 1回放playText: '啟動中。。。',cameraIndexCode: this.monitorDeviceNo || '9fc5cfb68b7a427c9c6c919014b4f3be', // 監控點編號 }},created() {},watch: {monitorDeviceNo: {handler(newV, oldV) {this.cameraIndexCode = newVif (newV && this.playMode === 0) {this.previewVideo()} else if (newV && this.playMode === 1) {this.backVideo()}},},},mounted() {},computed: {},methods: {// 推送消息cbIntegrationCallBack(oData) {console.log(oData, '推送消息')},// RSA加密setEncrypt(value) {/* eslint-disable */let encrypt = new JSEncrypt()encrypt.setPublicKey(this.pubKey)return encrypt.encrypt(value)},initPlugin(callback) {/* eslint-disable */let that = thisthis.oWebControl = new WebControl({szPluginContainer: 'playBox', // 指定容器idiServicePortStart: 15900, // 指定起止端口號，建議使用該值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: function() {// 創建WebControl實例成功that.oWebControl.JS_StartService('window', {// WebControl實例創建成功后需要啟動服務dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"寫死}).then(function() {// 啟動插件服務成功that.oWebControl.JS_SetWindowControlCallback({// 設置消息回調cbIntegrationCallBack: that.cbIntegrationCallBack,})that.oWebControl.JS_CreateWnd('playBox', that.width, that.playHeight).then(function() {// JS_CreateWnd創建視頻播放窗口，寬高可設定that.init(callback) // 創建播放實例成功后初始化})},function() {// 啟動插件服務失敗})},cbConnectError: function() {// 創建WebControl實例失敗that.oWebControl = nullthat.playText = '插件未啟動，正在嘗試啟動，請稍候...'WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未啟動時執行error函數，采用wakeup來啟動程序that.initCount++if (that.initCount < 3) {setTimeout(function() {that.initPlugin()}, 3000)} else {that.playText ='插件啟動失敗，請檢查插件是否安裝！<a target="_blank" style="color: #30a8ff;text-decoration: underline;" href="http://xx.com/VideoWebPlugin.zip">下載地址(軟件大小：62.7MB)</a>'}},cbConnectClose: function(bNormalClose) {// 異常斷開：bNormalClose = false// JS_Disconnect正常斷開：bNormalClose = trueconsole.log('cbConnectClose')that.oWebControl = null},})},// 獲取公鑰getPubKey(callback) {this.oWebControl.JS_RequestInterface({funcName: 'getRSAPubKey',argument: JSON.stringify({keyLength: 1024,}),}).then((oData) => {if (oData.responseMsg.data) {this.pubKey = oData.responseMsg.datacallback()}})},init(callback) {let that = thisthis.getPubKey(() => {// 請自行修改以下變量值let appkey = this.appkey // 綜合安防管理平臺提供的appkey，必填let secret = that.setEncrypt(this.secret) // 綜合安防管理平臺提供的secret，必填let ip = this.ip // 綜合安防管理平臺IP地址，必填let playMode = this.playMode // 初始播放模式：0-預覽，1-回放let port = 443 // 綜合安防管理平臺端口，若啟用HTTPS協議，默認443let snapDir = 'D:\\SnapDir' // 抓圖存儲路徑let videoDir = 'D:\\VideoDir' // 緊急錄像或錄像剪輯存儲路徑let layout = this.layout // playMode指定模式的布局let enableHTTPS = 1 // 是否啟用HTTPS協議與綜合安防管理平臺交互，是為1，否為0let encryptedFields = 'secret' // 加密字段，默認加密領域為secretlet showToolbar = 1 // 是否顯示工具欄，0-不顯示，非0-顯示let showSmart = 1 // 是否顯示智能信息（如配置移動偵測后畫面上的線框），0-不顯示，非0-顯示let buttonIDs = this.buttonIDs // 自定義工具條按鈕// /// 請自行修改以上變量值that.oWebControl.JS_RequestInterface({funcName: 'init',argument: JSON.stringify({appkey: appkey, // API網關提供的appkeysecret: secret, // API網關提供的secretip: ip, // API網關IP地址playMode: playMode, // 播放模式（決定顯示預覽還是回放界面）port: port, // 端口snapDir: snapDir, // 抓圖存儲路徑videoDir: videoDir, // 緊急錄像或錄像剪輯存儲路徑layout: layout, // 布局enableHTTPS: enableHTTPS, // 是否啟用HTTPS協議encryptedFields: encryptedFields, // 加密字段showToolbar: showToolbar, // 是否顯示工具欄showSmart: showSmart, // 是否顯示智能信息buttonIDs: buttonIDs, // 自定義工具條按鈕}),}).then((oData) => {that.oWebControl.JS_Resize(that.width, that.playHeight) // 初始化后resize一次，規避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題if (callback) {callback()}})})},previewVideo() {let cameraIndexCode = this.cameraIndexCode // 獲取輸入的監控點編號值，必填let streamMode = 0 // 主子碼流標識：0-主碼流，1-子碼流let transMode = 0 // 傳輸協議：0-UDP，1-TCPlet gpuMode = 0 // 是否啟用GPU硬解，0-不啟用，1-啟用let wndId = -1 // 播放窗口序號（在2x2以上布局下可指定播放窗口）this.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode.trim(), // 監控點編號streamMode: streamMode, // 主子碼流標識transMode: transMode, // 傳輸協議gpuMode: gpuMode, // 是否開啟GPU硬解wndId: wndId, // 可指定播放窗口}),})},backVideo() {let cameraIndexCode = this.cameraIndexCode// 前30天let date = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)let month =date.getMonth() + 1 < 10? '0' + (date.getMonth() + 1): date.getMonth() + 1// 開始時間當天00點let str =date.getFullYear() + '/' + month + '/' + date.getDate() + ' 00:00:00'let startTime = String(parseInt(new Date(str).getTime() / 1000) - 3 * 60 * 60)let endTime = String(parseInt(date.getTime() / 1000))this.oWebControl.JS_RequestInterface({funcName: 'startPlayback',argument: JSON.stringify({cameraIndexCode: cameraIndexCode.trim(), // 監控點編號startTimeStamp: startTime, // 錄像查詢開始時間戳，單位：秒endTimeStamp: endTime, // 錄像查詢結束時間戳，單位：秒recordLocation: 1, // 錄像存儲類型 0-中心存儲 1-設備存儲transMode: 0, // 傳輸協議，0-UDP 1-TCPgpuMode: 0, // 是否開啟 GPU 硬解，0-不開啟 1-開啟wndId: -1, //可指定播放窗口}),})},// 設置窗口裁剪，當因滾動條滾動導致窗口需要被遮住的情況下需要JS_CuttingPartWindow部分窗口setWndCover() {let iWidth = $(window).width()let iHeight = $(window).height()let oDivRect = $('#playBox').get(0).getBoundingClientRect()let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0let iCoverRight =oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0let iCoverBottom =oDivRect.bottom - iHeight > 0? Math.round(oDivRect.bottom - iHeight): 0iCoverLeft = iCoverLeft > this.width ? this.width : iCoverLeftiCoverTop = iCoverTop > this.playHeight ? this.playHeight : iCoverTopiCoverRight = iCoverRight > this.width ? this.width : iCoverRightiCoverBottom =iCoverBottom > this.playHeight ? this.playHeight : iCoverBottomthis.oWebControl.JS_RepairPartWindow(0,0,this.width + 1,this.playHeight) // 多1個像素點防止還原后邊界缺失一個像素條if (iCoverLeft != 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.playHeight)}if (iCoverTop != 0) {this.oWebControl.JS_CuttingPartWindow(0, 0, this.width + 1, iCoverTop) // 多剪掉一個像素條，防止出現剪掉一部分窗口后出現一個像素條}if (iCoverRight != 0) {this.oWebControl.JS_CuttingPartWindow(this.width - iCoverRight,0,iCoverRight,this.playHeight)}if (iCoverBottom != 0) {this.oWebControl.JS_CuttingPartWindow(0,this.playHeight - iCoverBottom,this.width,iCoverBottom)}},// 彈窗showModal(id) {this.visible = truethis.type = idthis.initPlugin(() => {this.previewVideo()})},// 取消handleCancel() {this.close()console.log('關閉')},close() {this.confirmLoading = falsethis.visible = falseif (this.oWebControl != null) {this.oWebControl.JS_HideWnd() // 先讓窗口隱藏，規避可能的插件窗口滯后于瀏覽器消失問題this.oWebControl.JS_Disconnect().then(() => {// 斷開與插件服務連接成功},() => {// 斷開與插件服務連接失敗})}this.$emit('addBack', {})},}, } </script> <style lang="less" scoped> .dailog {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #68768a;z-index: 10000;opacity: 0.8;.close {width: 1030px;text-align: right;color: #fff;font-size: 20px;padding: 10px 0;}.box {width: 1050px;height: 650px;background: #051d3b;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}#videoPlayerBox {margin: auto;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);margin-top: 30px;}#playBox {width: 1000px;height: 600px;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} } .iframe {overflow: hidden; } </style>

總結

以上是生活随笔為你收集整理的海康视频展示（web前端）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

视频
Web