cameraPlayer 添加h265b播放功能

zhangzengfei

2022-03-10 170ee55bd1f0858fdbad3147a72c0f185d49a9a6

 src/pages/cameraPlayer/index/App.vue

@@ -1,6 +1,12 @@
<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'" v-else></wasm-player>
  </div>
</template>

@@ -10,11 +16,13 @@
// 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
    CameraPlayer,
    WasmPlayer
  },
  data() {
    return {
@@ -22,7 +30,8 @@
        cameraId: "",
        rtspUrl: "",
        gb28181: "0"
      }
      },
      enableWasm: false
    }
  },
  mounted() {
@@ -43,6 +52,10 @@
          if (key == "rtspUrl") {
            obj[key] = this.rtspParse(value)
          }

          if (key == "enableWasm" && value == "1") {
            this.enableWasm = true
          }
        })
      }
      this.query = Object.assign({}, this.query, obj)
@@ -50,14 +63,17 @@
    },
    // 对传入的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
        return input
      }

      let usrPassword = input.slice(userinfoSplitPos + 1, userinfoEndPos)