<template>
|
<div style="width:100%; height: 100%;">
|
<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 摄像机id, rtspUrl 摄像机rtsp地址, 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 WasmPlayer from "@/components/wasmPlayer"
|
|
export default {
|
name: "BasicCameraPlayer",
|
components: {
|
CameraPlayer,
|
WasmPlayer
|
},
|
data() {
|
return {
|
query: {
|
cameraId: "",
|
rtspUrl: "",
|
gb28181: "0",
|
videoUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
|
},
|
enableWasm: false,
|
isStream: true
|
}
|
},
|
mounted() {
|
this.urlParse()
|
},
|
methods: {
|
urlParse() {
|
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
|
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, "enableWasm:", this.enableWasm, "isStream:", this.isStream)
|
},
|
// 对传入的rtsp密码进行urlEncode处理
|
rtspParse(input) {
|
// 无效的rtsp地址
|
if (!input.length || input.indexOf("rtsp://") != 0) {
|
return
|
}
|
|
let userinfoSplitPos = input.indexOf(":", 7)
|
let userinfoEndPos = input.lastIndexOf("@")
|
|
// 未包含登录信息的rtsp地址, 直接返回原url
|
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>
|
