html部分

<div class="wh-100"><divref="playWnd":id="containerId"class="flex-1 hidden playWnd"v-html="oWebControl === null ? playText : ''"></div></div>

javascript部分

props: {// 內網、公網 4個配置appkey: {type: "String",default: "",},secret: {type: "String",default: "",},ip: {type: "String",default: "",},port: {type: "Number",default: 8888,},// 視頻布局layout: {type: "String",default: "1x1",},// 初始播放模式：0-預覽，1-回放playMode: {type: "Number",default: 0,},// 是否顯示工具欄，0-不顯示，非0-顯示showToolbar: {type: Number,default: 1,},// 工具欄按鈕toolBarButtonIDs: {type: String,default: "4098,4097",},// 是否顯示智能信息（如配置移動偵測后畫面上的線框），0-不顯示，非0-顯示showSmart: {type: Number,default: 1,},// 自定義工具條按鈕buttonIDs: {type: String,default: "0,16,256,257,258,259,260,512,515,516,517,768,769",},// 相機編號cameraIndexCode: {type: [String, Number],},// 銷毀并重新初始化海康插件refresh: {type: Number,},// 視頻播放容器idcontainerId: {type: String,default: "playWnd",}},data() {return {oWebControl: null,plugKey: "",// 視頻相關參數videoParams: {cameraIndexCode: "", //監控點編號streamMode: 0, //主子碼流標識：0-主碼流，1-子碼流transMode: 1, //傳輸協議：0-UDP，1-TCPgpuMode: 0, //是否啟用GPU硬解，0-不啟用，1-啟用wndId: 1, //播放窗口序號},videoWidth: null,videoHeight: null,playText: "啟動中...",initCount: 0, // 啟動次數href: "",};},created() {this.getPluginUrl();this.createdVideo();},mounted() {this.$nextTick(() => {this.videoWidth = this.$refs.playWnd.offsetWidth;this.videoHeight = this.$refs.playWnd.offsetHeight;});// 監聽resize事件，使插件窗口尺寸跟隨DIV窗口變化window.addEventListener("resize", this.windowResize);// // 監聽滾動條scroll事件，使插件窗口跟隨瀏覽器滾動而移動window.addEventListener("scroll", this.windowScroll);},watch: {// 監聽相機編碼cameraIndexCode(value) {if (value) {this.videoParams.cameraIndexCode = value.trim();this.videoParams.wndId = -1;if (this.oWebControl) {this.previewVideo();} else {this.createdVideo();}}},// 刷新refresh() {this.destroyeWnd();setTimeout(() => {this.createdVideo();}, 0);}},methods: {// 獲取海康插件下載地址getPluginUrl() {getList(1, 999).then(res => {if(res.data.code === 200) {const data = res.data.data.records;data.lengthif(data.length) {let existArr = data.filter(item => item.paramKey === "hk.video.pluginUrl");if(existArr.length) {this.href = existArr[0].paramValue;}}}});},// 初始化+預覽createdVideo() {this.initPlugin(() => {this.previewVideo();});},// 創建播放實例initPlugin(callback) {this.oWebControl = new WebControl({szPluginContainer: this.containerId, // 指定容器idiServicePortStart: 15900,iServicePortEnd: 15909,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid// 創建WebControl實例成功cbConnectSuccess: () => {this.oWebControl.JS_StartService("window", {// WebControl實例創建成功后需要啟動服務dllPath: "./VideoPluginConnect.dll",}).then(() => {// 啟動插件服務成功this.oWebControl.JS_SetWindowControlCallback({// 設置消息回調cbIntegrationCallBack: this.cbIntegrationCallBack,});this.oWebControl.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight).then(() => {this.getVersion(callback);});});},cbConnectError: () => {// 創建WebControl實例失敗this.oWebControl = null;this.playText = "插件未啟動，正在嘗試啟動，請稍候...";WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動時執行error函數，采用wakeup來啟動程序this.initCount++;if (this.initCount < 3) {setTimeout(() => {this.initPlugin();}, 2000);} else {this.playText = `插件啟動失敗，請檢查插件是否安裝！<a href=${this.href} type="primary" download="視頻插件.exe" style='color:#4194fc'>下載地址</a>`;}},cbConnectClose: () => {this.oWebControl = null;},});},// 消息回調cbIntegrationCallBack() {},// 初始化init(callback) {this.getPubKey(() => {this.oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: this.appkey, //API網關提供的appkeysecret: this.setEncrypt(this.secret), //API網關提供的secretip: this.ip, //API網關IP地址zplayMode: this.playMode, //播放模式（決定顯示預覽還是回放界面）port: this.port, //端口snapDir: "C:\\SnapDir", //抓圖存儲路徑videoDir: "C:\\VideoDir", //緊急錄像或錄像剪輯存儲路徑layout: this.layout, //布局enableHTTPS: 1, //是否啟用HTTPS協議encryptedFields: "secret", //加密字段showToolbar: this.showToolbar, //是否顯示工具欄toolBarButtonIDs: this.toolBarButtonIDs,showSmart: this.showSmart, //是否顯示智能信息buttonIDs: this.buttonIDs, //自定義工具條按鈕protocol: "hls",}),}).then(() => {// 初始化后resize一次，規避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);if (callback) {callback();}});});},// 獲取公鑰getPubKey(callback) {const params = {funcName: "getRSAPubKey",argument: JSON.stringify({ keyLength: 1024 }),};this.oWebControl.JS_RequestInterface(params).then((res) => {if (res.responseMsg.data) {this.plugKey = res.responseMsg.data;callback();}});},// 視頻流RSA加密setEncrypt(value) {const encrypt = new JSEncrypt();encrypt.setPublicKey(this.plugKey);return encrypt.encrypt(value);},// 視頻預覽previewVideo() {this.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify(this.videoParams),});},// 顯示全屏showFullScreen() {this.oWebControl.JS_RequestInterface({funcName: "setFullScreen",});},// 退出全屏exitFullScreen() {this.oWebControl.JS_RequestInterface({funcName: "exitFullScreen",});},windowScroll() {if (this.oWebControl != null) {this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);}},windowResize() {this.videoWidth = this.$refs.playWnd.offsetWidth;this.videoHeight = this.$refs.playWnd.offsetHeight;if (this.oWebControl) {this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);}},// 銷毀海康插件destroyeWnd() {if (this.oWebControl) {this.oWebControl.JS_HideWnd();this.oWebControl.JS_Disconnect().then(() => {});}},// 獲取海康插件版本號getVersion(callback) {if(this.oWebControl) {this.oWebControl.JS_RequestInterface({funcName: "getVersion",}).then(res => {if(res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") {//JS_CreateWnd創建視頻播放窗口，寬高可設定this.init(callback); // 創建播放實例成功后初始化console.log("啟動插件成功！");}else{this.destroyeWnd();this.playText = `插件版本不正確，請重新下載版本安裝覆蓋！<a href=${this.href} type="primary" download="視頻插件.exe" style='color:#4194fc'>下載地址</a>`;}})}},},beforeDestroy() {if (this.oWebControl) {this.oWebControl.JS_HideWnd();this.oWebControl.JS_DestroyWnd({funcName: "destroyeWnd",}).then(() => {});}document.removeEventListener("resize", this.windowResize);document.removeEventListener("scroll", this.windowScroll);},

總結

以上是生活随笔為你收集整理的海康视频插件组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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