From 804d59e162b72be684d0087a8cd74dbd6fecbf4d Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 30 十二月 2022 16:57:18 +0800
Subject: [PATCH] 添加投影配置页面
---
src/pages/cameraPlayer/index/App.vue | 98 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 75 insertions(+), 23 deletions(-)
diff --git a/src/pages/cameraPlayer/index/App.vue b/src/pages/cameraPlayer/index/App.vue
index dcdb03c..172afb9 100644
--- a/src/pages/cameraPlayer/index/App.vue
+++ b/src/pages/cameraPlayer/index/App.vue
@@ -1,50 +1,102 @@
<template>
<div style="width:100%; height: 100%;">
- <camera-player :cameraID="query.cameraId" :rtspUrl="query.rtspUrl" :isGb="query.gb28181 ==='1'"></camera-player>
+ <camera-player
+ :cameraID="query.cameraId"
+ :rtspUrl="query.rtspUrl"
+ :isGb="query.gb28181 === '1'"
+ v-if="!enableWasm"
+ ></camera-player>
+ <wasm-player
+ :cameraID="query.cameraId"
+ :rtspUrl="query.rtspUrl"
+ :isGb="query.gb28181 === '1'"
+ :videoUrl="query.videoUrl"
+ :isStream="isStream"
+ v-else
+ ></wasm-player>
</div>
</template>
-
+
<script>
// 鎺ュ彛浣跨敤
-// 鍙傛暟 cameraId 鎽勫儚鏈篿d, rtspUrl 鎽勫儚鏈簉tsp鍦板潃, gb28181 鏄惁鏄浗鏍囨憚鍍忔満(1 鎴� 0)
+// 鍙傛暟 cameraId 鎽勫儚鏈篿d, rtspUrl 鎽勫儚鏈簉tsp鍦板潃, gb28181 鏄惁鏄浗鏍囨憚鍍忔満(1 鎴� 0), enableWasm 浣跨敤wasm 鎾斁鍣�, isStream 鏄惁鎾斁瀹炴椂娴�, videoUrl 瑙嗛鏂囦欢鍦板潃
// http://192.168.20.191:7003/view/cameraPlayer/index.html?cameraId=e7e6157a-5929-4e78-b390-e365141169c8&rtspUrl=rtsp://admin:a1234567@192.168.5.51:554/h264/ch1/main/av_stream
-
-import CameraPlayer from "../components/player";
-
+
+import CameraPlayer from "../components/player"
+import WasmPlayer from "@/components/wasmPlayer"
+
export default {
name: "BasicCameraPlayer",
components: {
- CameraPlayer
+ CameraPlayer,
+ WasmPlayer
},
data() {
return {
query: {
cameraId: "",
rtspUrl: "",
- gb28181: "0"
- }
+ gb28181: "0",
+ videoUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
+ },
+ enableWasm: false,
+ isStream: true
}
},
mounted() {
- this.urlParse();
+ this.urlParse()
},
methods: {
urlParse() {
- let url = window.location.search;
- let obj = {};
- let reg = /[?&][^?&]+=[^?&]+/g;
- let arr = url.match(reg);
+ let url = window.location.search
+ let obj = {}
+ let reg = /[?&][^?&]+=[^?&]+/g
+ let arr = url.match(reg)
if (arr) {
arr.forEach((item) => {
- let temArr = item.substring(1).split('=');
- let key = decodeURIComponent(temArr[0]);
- let value = decodeURIComponent(temArr[1]);
- obj[key] = value;
- });
+ let temArr = item.substring(1).split("=")
+ let key = decodeURIComponent(temArr[0])
+ let value = decodeURIComponent(temArr[1])
+ obj[key] = value
+ if (key == "rtspUrl") {
+ obj[key] = this.rtspParse(value)
+ }
+
+ if (key == "enableWasm" && value == "1") {
+ this.enableWasm = true
+ }
+ if (key == "isStream" && value == "0") {
+ this.isStream = false
+ }
+ })
}
- this.query = Object.assign({}, this.query, obj);
- console.log("cameraPlayer:", this.query)
+ this.query = Object.assign({}, this.query, obj)
+ console.log("cameraPlayer:", this.query, "enableWasm:", this.enableWasm, "isStream:", this.isStream)
+ },
+ // 瀵逛紶鍏ョ殑rtsp瀵嗙爜杩涜urlEncode澶勭悊
+ rtspParse(input) {
+ // 鏃犳晥鐨剅tsp鍦板潃
+ if (!input.length || input.indexOf("rtsp://") != 0) {
+ return
+ }
+
+ let userinfoSplitPos = input.indexOf(":", 7)
+ let userinfoEndPos = input.lastIndexOf("@")
+
+ // 鏈寘鍚櫥褰曚俊鎭殑rtsp鍦板潃, 鐩存帴杩斿洖鍘焨rl
+ if (userinfoSplitPos == -1 || userinfoEndPos == -1 || userinfoEndPos < userinfoSplitPos) {
+ return input
+ }
+
+ let usrPassword = input.slice(userinfoSplitPos + 1, userinfoEndPos)
+ if (usrPassword.indexOf("@") != -1) {
+ return input
+ }
+
+ let encodePassword = encodeURIComponent(usrPassword)
+
+ return input.replace(usrPassword, encodePassword)
}
}
-};
-</script>
+}
+</script>
\ No newline at end of file
--
Gitblit v1.8.0