先點(diǎn)贊后觀看，養(yǎng)成好習(xí)慣。
介紹
因為我的文章已經(jīng)寫過基于vue實現(xiàn)海康web插件進(jìn)行視頻播放開箱即用文章，這個文章是利用vite+vue3+js進(jìn)行編寫的，大致內(nèi)容跟vue2一樣，拿過去能直接用。
至于我為什么要用js而不用ts，因為海康提供的三個腳本為js語言的，ts嘗試過一次，我道行太淺，沒搞明白。
這些代碼是可以直接使用的，如果對你有幫助，麻煩點(diǎn)個贊。文章來源地址http://www.zghlxwxcb.cn/news/detail-454619.html
如果需要vue2的開發(fā)，點(diǎn)擊跳轉(zhuǎn)vue2開發(fā)文章?
接下來進(jìn)入正題。
一、插件的下載與安裝
下載?？堤峁┑牟寮蚸s文件，我上一個文章有講過。
點(diǎn)擊跳轉(zhuǎn)至上一個文章。
引入方式和v2有一些不同，要在主目錄下的index.html中引入js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + js</title>
</head>
<body>
<div id="app"></div>
<script src="/jquery-1.12.4.min.js"></script>
<script src="/jsencrypt.min.js"></script>
<script src="/jsWebControl-1.0.0.min.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>二、在所需視頻組件中進(jìn)行代碼編寫
我這里是直接把我測試的代碼全放進(jìn)去了，可以全部復(fù)制在組件里既可以使用。
這里我用的是setup語法糖，有不一樣的可自行修改。
<!-- 視頻播放組件 -->
<template>
<div class="main" ref="playWndBox">
<div
id="playWnd"
class="playWnd"
:style="{
height: playWndHeight + 'px',
width: playWndWidth + 'px',
}"
></div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
const playWndBox = ref(null)
let playWndHeight = ref('')
let playWndWidth = ref('')
let pubKey = ref('')
let oWebControl = ref(null)
let objData = ref({
appkey: "", //海康提供的appkey
ip: "", //?？堤峁┑膇p
secret: "", //?？堤峁┑膕ecret
port: 443,
playMode: 0, // 0 預(yù)覽 1回放
layout: "1x1", //頁面展示的模塊數(shù)【16】
})
onMounted(() => {
// 獲取頁面的實例對象
const pageInstance = getCurrentInstance();
// 獲取dom節(jié)點(diǎn)對象
const tagDomObj = pageInstance.refs.playWndBox;
playWndHeight.value = tagDomObj.clientHeight;
playWndWidth.value = tagDomObj.clientWidth;
// 監(jiān)聽scroll事件，使插件窗口尺寸跟隨DIV窗口變化
window.addEventListener("scroll", () => {
console.log(5);
// return
if (oWebControl.value != null) {
oWebControl.JS_Resize(
tagDomObj.clientWidth,
tagDomObj.clientHeight
);
this.setWndCover();
}
});
// 監(jiān)聽resize事件，使插件窗口尺寸跟隨DIV窗口變化
window.addEventListener("resize", (e) => {
console.log(0);
if (oWebControl.value != null) {
oWebControl.JS_Resize(
tagDomObj.clientWidth,
tagDomObj.clientHeight
);
this.setWndCover();
}
});
// 初始化播放器插件
nextTick(() => {
initPlugin();
})
})
onBeforeUnmount(() => {
if (oWebControl.value != null) {
// 先讓窗口隱藏，規(guī)避可能的插件窗口滯后于瀏覽器消失問題
oWebControl.JS_HideWnd();
// 銷毀當(dāng)前播放的視頻
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
// 斷開與插件服務(wù)連接
oWebControl.JS_Disconnect();
}
})
const initPlugin = () => {
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口號，建議使用該值
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => {
// 創(chuàng)建WebControl實例成功
oWebControl
.JS_StartService("window", {
// WebControl實例創(chuàng)建成功后需要啟動服務(wù)
// 值"./VideoPluginConnect.dll"寫死
dllPath: "./VideoPluginConnect.dll",
})
.then(
function () {
// 設(shè)置消息回調(diào)
oWebControl.JS_SetWindowControlCallback({
// cbIntegrationCallBack: cbIntegrationCallBack,
});
//JS_CreateWnd創(chuàng)建視頻播放窗口，寬高可設(shè)定
oWebControl
.JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//這一部分很重要，兩個參數(shù)為你盒子的寬高，這樣是寫死是防止組件加載之前出現(xiàn)白屏；bEmbed: true 防止窗口閃爍
.then(function () {
// 創(chuàng)建播放實例成功后初始化
init();
});
},
function () {
// 啟動插件服務(wù)失敗
}
);
},
// 創(chuàng)建WebControl實例失敗
cbConnectError: function () {
// 這里寫創(chuàng)建WebControl實例失敗時的處理步驟,下面的代碼僅做參看，具體實現(xiàn)步驟根據(jù)個人需求進(jìn)行編寫！?。。。。。?！
// console.log(0);
// oWebControl.value = null;
// // 程序未啟動時執(zhí)行error函數(shù)，采用wakeup來啟動程序
// window.WebControl.JS_WakeUp("VideoWebPlugin://");
// initCount++;
// if (initCount < 3) {
// setTimeout(function () {
// initPlugin();
// }, 3000);
// } else {
// setTimeout(function () {
// setTimeout(function () {
// $router.push('/home/PlugDown')
// }, 4000)
// }, 4000)
// }
},
cbConnectClose: () => {
// 異常斷開：bNormalClose = false
// JS_Disconnect正常斷開：bNormalClose = true
// console.log("cbConnectClose");
oWebControl.value = null;
},
});
// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
}
// 初始化
const init = (callback) => {
getPubKey(() => {
let appkey = objData.value.appkey; //綜合安防管理平臺提供的appkey，必填
let secret = setEncrypt(objData.value.secret); //綜合安防管理平臺提供的secret，必填
let ip = objData.value.ip; //綜合安防管理平臺IP地址，必填
let playMode = objData.value.playMode; //初始播放模式：0-預(yù)覽，1-回放
let port = objData.value.port; //綜合安防管理平臺端口，若啟用HTTPS協(xié)議，默認(rèn)443
let snapDir = "D:\\SnapDir"; //抓圖存儲路徑
let videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲路徑
let layout = objData.value.layout; //playMode指定模式的布局
let enableHTTPS = 1; //是否啟用HTTPS協(xié)議與綜合安防管理平臺交互，這里總是填1
let encryptedFields = "secret"; //加密字段，默認(rèn)加密領(lǐng)域為secret
let showToolbar = 1; //是否顯示工具欄，0-不顯示，非0-顯示
let showSmart = 0; //是否顯示移動框線框，0-不顯示，非0-顯示
let buttonIDs =
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定義工具條按鈕
// var toolBarButtonIDs = "2049,2304" // 工具欄上自定義按鈕
oWebControl
.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API網(wǎng)關(guān)提供的appkey
secret: secret, //API網(wǎng)關(guān)提供的secret
ip: ip, //API網(wǎng)關(guān)IP地址
playMode: playMode, //播放模式（決定顯示預(yù)覽還是回放界面）
port: port, //端口
snapDir: snapDir, //抓圖存儲路徑
videoDir: videoDir, //緊急錄像或錄像剪輯存儲路徑
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否啟用HTTPS協(xié)議
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否顯示工具欄
showSmart: showSmart, //是否顯示智能信息
buttonIDs, //自定義工具條按鈕
}),
})
.then(function (oData) {
oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，規(guī)避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題
if (callback) {
callback();
}
// 隱藏
// oWebControl.JS_HideWnd()
});
});
}
// RSA 加密
let setEncrypt = (value) => {
let encrypt = new window.JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// 獲取公鑰
const getPubKey = (callback) => {
oWebControl
.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
}
// 調(diào)用這個函數(shù)可進(jìn)行視頻播放
// 視頻預(yù)覽功能
const previewVideo = (data) => {
let cameraIndexCode = data; // 獲取輸入的監(jiān)控點(diǎn)編號值，必填
let streamMode = 0; // 主子碼流標(biāo)識：0-主碼流，1-子碼流
let transMode = 1; // 傳輸協(xié)議：0-UDP，1-TCP
let gpuMode = 0; // 是否啟用GPU硬解，0-不啟用，1-啟用
let wndId = -1; // 播放窗口序號（在2x2以上布局下可指定播放窗口）
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, // 監(jiān)控點(diǎn)編號
streamMode: streamMode, // 主子碼流標(biāo)識
transMode: transMode, // 傳輸協(xié)議
gpuMode: gpuMode, // 是否開啟GPU硬解
wndId: wndId, // 可指定播放窗口
}),
})
.then(function () {
oWebControl.JS_SetWindowControlCallback({
});
});
}
</script>
<style lang="scss" scoped>
.main {
position: fixed;
top: 50%;
left: 20%;
transform: translateY(-50%);
width: 60vw;
height: 60vh;
margin: auto;
background-color: #ccc;
}
</style>三、補(bǔ)充
我這里只實現(xiàn)了視頻播放的功能，其它功能和vue2大同小異，可以看我vue2的文章進(jìn)行修改和開發(fā)。文章來源：http://www.zghlxwxcb.cn/news/detail-454619.html
這些代碼是可以直接使用的，如果對你有幫助，麻煩點(diǎn)個贊。
到了這里，關(guān)于vue3實現(xiàn)?？低暩鶕?jù)?？挡寮M(jìn)行監(jiān)控實時預(yù)覽和回放功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
