删除debugger

zhangzengfei

2022-11-17 82d8cf2628b7d8f741b53053855b9cfed97b13c9

 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 摄像机id, rtspUrl 摄像机rtsp地址, gb28181 是否是国标摄像机(1 或 0)
// 参数 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 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) {
      // 无效的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>
}
</script>