cameraplayer，添加本地播放功能

zhangzengfei

2022-06-17 c8a38d5fd8b1a92d4d14a9785f21b1e0223e2460

cameraplayer，添加本地播放功能

 public/fonts/element-icons.ttf

Binary files differ

 public/fonts/element-icons.woff

Binary files differ

 src/components/player/index.vue

@@ -55,7 +55,7 @@
  },
  data() {
    return {
      wfs: {},
      wfs: null,
      wfsId: 0,
      Camera: new VideoRuleData(),
      showCanvas: true,

 src/pages/cameraPlayer/index/App.vue

@@ -6,13 +6,20 @@
      :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>
    <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"
@@ -29,9 +36,11 @@
      query: {
        cameraId: "",
        rtspUrl: "",
        gb28181: "0"
        gb28181: "0",
        videoUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
      },
      enableWasm: false
      enableWasm: false,
      isStream: true
    }
  },
  mounted() {
@@ -56,10 +65,13 @@
          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)
      console.log("cameraPlayer:", this.query, "enableWasm:", this.enableWasm, "isStream:", this.isStream)
    },
    // 对传入的rtsp密码进行urlEncode处理
    rtspParse(input) {