From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新
---
screen/src/views/videoUrl/Video.vue | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 229 insertions(+), 0 deletions(-)
diff --git a/screen/src/views/videoUrl/Video.vue b/screen/src/views/videoUrl/Video.vue
new file mode 100644
index 0000000..a034c60
--- /dev/null
+++ b/screen/src/views/videoUrl/Video.vue
@@ -0,0 +1,229 @@
+<template>
+ <div class="video_app">
+ <div class="player_bg" ref="videoRef" style="width: 100%;height: 100%;" id="playWnd"> </div>
+ </div>
+ <!-- <img style="width: 34px;margin-bottom: 16px;" src="../../assets/images/SecurityControl/ic_unable@2x.png" > -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+const props = defineProps({
+ indexCode: String,
+ href: String,
+})
+const templateA = `
+ <div style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
+ <div style="font-weight: 500;font-size: 15px;color: #CCCCCC;margin-bottom: 4px;">鏃犳硶鎾斁鐩戞帶鐢婚潰锛�</div>
+ <div style="font-weight: 500;font-size: 15px;color: #CCCCCC;margin-bottom: 20px;">鐐瑰嚮涓嬭浇骞跺畨瑁呰灞忔挱鏀炬彃浠�</div>
+ <a href="${props.href}" target="_blank" style="font-weight: 500;font-size: 15px;color: #01D9FE;">鐐瑰嚮涓嬭浇</a>
+ </div>
+`
+
+
+const width = ref(0)
+const height = ref(0)
+const videoRef = ref(null)
+
+onMounted(() => {
+ const rect = videoRef.value.getBoundingClientRect()
+ width.value = rect.width
+ height.value = rect.height
+
+ initPlugin()
+ window.addEventListener('resize', function () { // 鎵ц
+ if (oWebControl.value) {
+ const rect = videoRef.value.getBoundingClientRect()
+ width.value = rect.width
+ height.value = rect.height
+ oWebControl.value.JS_Resize($('#playWnd').width(), $('#playWnd').height())
+ }
+ })
+})
+onUnmounted(() => {
+ destroyed()
+})
+const oWebControl = ref(null)
+const initCount = ref()
+const pubKey = ref('')
+
+watch(
+ () => props.indexCode,
+ (newValue, oldValue) => {
+ console.log('鐖剁粍浠朵紶鍊煎彉鍖栵細', newValue)
+ videoPlay()
+ }
+)
+
+const initPlugin = () => {
+ oWebControl.value = new WebControl({
+ szPluginContainer: "playWnd", // 鎸囧畾瀹瑰櫒id
+ iServicePortStart: 15900, // 鎸囧畾璧锋绔彛鍙凤紝寤鸿浣跨敤璇ュ��
+ iServicePortEnd: 15900,
+ szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 鐢ㄤ簬IE10浣跨敤ActiveX鐨刢lsid
+ cbConnectSuccess: function () {
+ // 鍒涘缓WebControl瀹炰緥鎴愬姛
+ console.log('1--鍒涘缓WebControl瀹炰緥鎴愬姛')
+
+ oWebControl.value.JS_StartService("window", { // WebControl瀹炰緥鍒涘缓鎴愬姛鍚庨渶瑕佸惎鍔ㄦ湇鍔�
+ dllPath: "./VideoPluginConnect.dll" // 鍊�"./VideoPluginConnect.dll"鍐欐
+ }).then(function () {
+ oWebControl.value.JS_SetWindowControlCallback({ // 璁剧疆娑堟伅鍥炶皟
+ cbIntegrationCallBack: cbIntegrationCallBack
+ })// 鍚姩鎻掍欢鏈嶅姟鎴愬姛
+ oWebControl.value.JS_CreateWnd("playWnd", width.value, height.value).then(function () { //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾锛宐oxWidth, boxHeight瀹瑰櫒
+ // oWebControl.value.JS_CreateWnd("playWnd").then(function () { //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾锛宐oxWidth, boxHeight瀹瑰櫒
+ init() // 鍒涘缓鎾斁瀹炰緥鎴愬姛鍚庡垵濮嬪寲
+ })
+ }, function () { // 鍚姩鎻掍欢鏈嶅姟澶辫触
+ })
+ },
+ cbConnectError: function () { // 鍒涘缓WebControl瀹炰緥澶辫触
+ console.log('鍒涘缓WebControl瀹炰緥澶辫触')
+ oWebControl.value = null
+ $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...")
+ WebControl.JS_WakeUp("VideoWebPlugin://") // 绋嬪簭鏈惎鍔ㄦ椂鎵цerror鍑芥暟锛岄噰鐢╳akeup鏉ュ惎鍔ㄧ▼搴�
+ initCount.value++
+ if (initCount.value < 3) {
+ setTimeout(function () {
+ initPlugin()
+ }, 3000)
+ } else {
+ $("#playWnd").html(templateA)
+ }
+ },
+ cbConnectClose: function (bNormalClose) {
+ // 寮傚父鏂紑锛歜NormalClose = false
+ // JS_Disconnect姝ｅ父鏂紑锛歜NormalClose = true
+ console.log('寮傚父鏂紑锛歜NormalClose')
+ oWebControl.value = null
+ $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...")
+ WebControl.JS_WakeUp("VideoWebPlugin://")
+ initCount.value++
+ if (initCount.value < 3) {
+ setTimeout(function () {
+ initPlugin()
+ }, 3000)
+ } else {
+ $("#playWnd").html(templateA)
+ }
+ }
+ })
+}
+// 鍒濆鍖�
+const init = () => {
+ getPubKey(function () {
+ ////////////////////////////////// 璇疯嚜琛屼慨鏀逛互涓嬪彉閲忓�� ////////////////////////////////////
+ let appkey = "23154099" //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨刟ppkey锛屽繀濉�
+ // let secret = '88wFsg3xfn7o8QMsWEO2' //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨剆ecret锛屽繀濉�
+ let secret = setEncrypt("88wFsg3xfn7o8QMsWEO2") //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨剆ecret锛屽繀濉�
+ let ip = "10.50.250.253" //缁煎悎瀹夐槻绠＄悊骞冲彴IP鍦板潃锛屽繀濉�
+ let playMode = 0 //鍒濆鎾斁妯″紡锛�0-棰勮(瀹炴椂娴�)锛�1-鍥炴斁(瑙嗛)
+ let port = 443 //缁煎悎瀹夐槻绠＄悊骞冲彴绔彛锛岃嫢鍚敤HTTPS鍗忚锛岄粯璁�443
+ let snapDir = "D:\\SnapDir" //鎶撳浘瀛樺偍璺緞
+ let videoDir = "D:\\VideoDir" //绱ф�ュ綍鍍忔垨褰曞儚鍓緫瀛樺偍璺緞
+ let layout = "1x1" //playMode鎸囧畾妯″紡鐨勫竷灞�
+ let enableHTTPS = 1 //鏄惁鍚敤HTTPS鍗忚涓庣患鍚堝畨闃茬鐞嗗钩鍙颁氦浜掞紝杩欓噷鎬绘槸濉�1
+ let encryptedFields = 'secret' //鍔犲瘑瀛楁锛岄粯璁ゅ姞瀵嗛鍩熶负secret
+ let showToolbar = 1 //鏄惁鏄剧ず宸ュ叿鏍忥紝0-涓嶆樉绀猴紝闈�0-鏄剧ず
+ let showSmart = 1 //鏄惁鏄剧ず鏅鸿兘淇℃伅锛堝閰嶇疆绉诲姩渚︽祴鍚庣敾闈笂鐨勭嚎妗嗭級锛�0-涓嶆樉绀猴紝闈�0-鏄剧ず
+ let buttonIDs = "0,16,256,257,258,259,260,513,514,515,516,517,768" //鑷畾涔夊伐鍏锋潯鎸夐挳
+ oWebControl.value.JS_RequestInterface({
+ funcName: "init",
+ argument: JSON.stringify({
+ appkey: appkey, //API缃戝叧鎻愪緵鐨刟ppkey
+ secret: secret, //API缃戝叧鎻愪緵鐨剆ecret
+ ip: 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(function (oData) {
+ console.log('鍒濆鍖栨垚鍔�')
+ videoPlay()
+ // oWebControl.value.JS_Resize(that.boxWidth, that.boxHeight) // 鍒濆鍖栧悗resize涓�娆★紝瑙勯伩firefox涓嬮娆℃樉绀虹獥鍙ｅ悗鎻掍欢绐楀彛鏈笌DIV绐楀彛閲嶅悎闂
+ })
+ })
+}
+const videoPlay = () => {
+ console.log('寮�濮嬫挱鏀�')
+
+ oWebControl.value.JS_RequestInterface({
+ funcName: "startPreview",
+ argument: JSON.stringify({
+ cameraIndexCode: props.indexCode, //鐩戞帶鐐圭紪鍙�
+ streamMode: 0, //涓诲瓙鐮佹祦鏍囪瘑锛�0-涓荤爜娴侊紝1-瀛愮爜娴�
+ transMode: 1, //浼犺緭鍗忚锛�0-UDP锛�1-TCP
+ gpuMode: 0, //鏄惁鍚敤GPU纭В锛�0-涓嶅惎鐢紝1-鍚敤
+ wndId: -1 //鎾斁绐楀彛搴忓彿锛堝湪2x2浠ヤ笂甯冨眬涓嬪彲鎸囧畾鎾斁绐楀彛锛�
+ })
+ }).then((oData) => {
+ if (oData.responseMsg.code === 1) {
+ console.log('鎾斁鎴愬姛', oData)
+ }
+ }, err => {
+ console.log('err', err)
+
+ })
+}
+// 閿�姣�
+const destroyed = () => {
+ if (oWebControl.value) {
+ oWebControl.value.JS_HideWnd() // 鍏堣绐楀彛闅愯棌锛岃閬挎彃浠剁獥鍙ｆ粸鍚庝簬娴忚鍣ㄦ秷澶遍棶棰�
+ oWebControl.value.JS_Disconnect().then(function () { }, function () { })
+ }
+}
+
+function fileDown() {
+ window.open('./videoUrl/VideoWebPlugin.exe')
+}
+// 娑堟伅鍥炶皟
+const cbIntegrationCallBack = (oData) => {
+ let response = oData.responseMsg
+ // response.type=1 閫変腑绐楀彛娑堟伅 type=2 鎾斁娑堟伅
+}
+// 鐩戞帶
+
+
+
+
+
+// 鑾峰彇鍏挜
+function getPubKey(callback) {
+ oWebControl.value.JS_RequestInterface({
+ funcName: 'getRSAPubKey',
+ argument: JSON.stringify({
+ keyLength: 1024,
+ }),
+ }).then((oData) => {
+ if (oData.responseMsg.data) {
+ pubKey.value = oData.responseMsg.data
+ callback()
+ }
+ })
+}
+
+// RSA鍔犲瘑
+function setEncrypt(value) {
+ let that = this
+ let encrypt = new JSEncrypt()
+ encrypt.setPublicKey(pubKey.value)
+ return encrypt.encrypt(value)
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.video_app {
+ width: 100%;
+ height: 100%;
+
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3