优化视频组件代码，支持品牌播放器选择

src/components/MMCPlayer/components/flv/index.vue

 <template>
   <div class="flv">
-    <video controls autoplay="autoplay" muted="muted" id="videoElement">
+    <video controls autoplay="autoplay" muted="muted" ref="video">
       <source type="video/mp4" />
     </video>
     <!-- <button @click="play">播放</button> -->
@@ -17,20 +17,20 @@ export default {
     return {
       player: null,
       flvPlayer: null,
-      videourl: ""
     };
   },
   mounted() {
-    this.videourl = this.data.vUrl
-    console.log(this.data.vUrl);
-    this.ngOnInit();
+    this.init();
+  },
+  beforeDestroy() {
+    this.destroy();
   },
   methods: {
     //页面初始化
-    ngOnInit() {
+    init() {
       if (flvjs.default.isSupported()) {
         // 获取DOM对象
-        this.player = document.getElementById("videoElement");
+        this.player = this.$refs.video;
         // 创建flvjs对象
         this.flvPlayer = flvjs.default.createPlayer({
           type: "flv", // 指定视频类型
@@ -38,21 +38,12 @@ export default {
           hasAudio: false, // 关闭声音
           cors: true, // 开启跨域访问
           // url: "http://pzlink999bju.powzamedia.com:8000/live/flv/test/mlinkm/channel1?only-video=1", // 指定流链接
-          url: this.getTarget(this.videourl), // 指定流链接
+          url: this.data.vUrl, // 指定流链接
         });
         // 将flvjs对象和DOM对象绑定
         this.flvPlayer.attachMediaElement(this.player);
       }
-      this.play()
-    },
-    getTarget(url) {
-      const reg = /^pzsp:\/\/(.*):7788.*\/trans\/(.*)\/mlinkm\/(.*)\?/;
-      url.match(reg);
-      const hostname = RegExp.$1;
-      const groupname = RegExp.$2;
-      const streamname = RegExp.$3;
-
-      return `http://${hostname}:8000/live/flv/${groupname}a/mlinkm/${streamname}?only-video=1`;
+      this.play();
     },
 
     // 播放视频
@@ -62,7 +53,7 @@ export default {
     },
 
     //页面退出销毁和暂停播放
-    ngOnDestroy() {
+    destroy() {
       this.flvPlayer.pause();
       this.flvPlayer.unload();
       // 卸载DOM对象
@@ -70,6 +61,18 @@ export default {
       // 销毁flvjs对象
       this.flvPlayer.destroy();
     },
+
+    fullScreen() {
+      let video = this.$refs.video;
+      if (video.webkitRequestFullScreen) {
+        video.webkitRequestFullScreen();
+      } else if (video.requestFullscreen) {
+        video.requestFullscreen();
+      } else if (video.mozRequestFullScreen)
+        setTimeout(() => {
+          video.play();
+        }, 200);
+    },
   },
 };
 </script>
@@ -78,7 +81,7 @@ export default {
 .flv {
   width: 100%;
   height: 100%;
-  #videoElement {
+  video {
     width: 100%;
     height: 100%;
   }

src/components/MMCPlayer/components/livenvr/index.vue

@@ -113,7 +113,7 @@ export default {
       const image = canvasToDataURL(canvas);
       let blob = dataURLToBlob(image);
       return blob;
-    }
+    },
   }
 };
 </script>

src/components/MMCPlayer/components/srs/index.vue

+<template>
+  <div class="cpt-player-webrtc">
+    <video id="rtc_media_player" ref="webrtc" controls autoplay></video>
+  </div>
+</template>
+
+<script>
+import $ from "./jquery-1.10.2.min";
+import {
+  SrsRtcPublisherAsync,
+  SrsRtcPlayerAsync,
+  SrsRtcFormatSenders,
+} from "./srs.sdk";
+
+window.$ = $;
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      sdk: null,
+    };
+  },
+  watch: {
+    data: {
+      handler(value) {
+        this.$nextTick(() => {
+          this.init();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  beforeDestroy() {
+    this.sdk.close();
+  },
+  methods: {
+    pause() {
+      if (this.$refs["webrtc"]) {
+        this.$refs["webrtc"].pause();
+      }
+    },
+    play() {
+      if (this.$refs["webrtc"]) {
+        this.$refs["webrtc"].play();
+      }
+    },
+    init() {
+      let _this = this;
+      if (this.$refs["webrtc"]) {
+        if (this.sdk) {
+          this.sdk.close();
+        }
+        this.sdk = new SrsRtcPlayerAsync();
+        this.$refs["webrtc"].srcObject = this.sdk.stream;
+        this.sdk
+          .play(this.data.vUrl)
+          .then(function (session) {})
+          .catch(function (reason) {
+            console.log('srs err', reason)
+            _this.sdk.close();
+          });
+      }
+    },
+    fullScreen() {
+      let video = this.$refs["webrtc"];
+      if (video.webkitRequestFullScreen) {
+        video.webkitRequestFullScreen();
+      } else if (video.requestFullscreen) {
+        video.requestFullscreen();
+      } else if (video.mozRequestFullScreen)
+        setTimeout(() => {
+          video.play();
+        }, 200);
+    },
+  },
+  
+};
+</script>
+
+<style lang="scss" scoped>
+.cpt-player-webrtc {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+}
+</style>
\ No newline at end of file

src/components/MMCPlayer/components/webrtc/index.vue

+<!-- 总览页视频 -->
+<template>
+  <div class="cpt-player-webrtc">
+    <video ref="webrtc" :controls="controls">
+      <source />
+    </video>
+  </div>
+</template>
+
+<script>
+import JSWebrtc from "./jswebrtc";
+
+export default {
+  props: {
+    controls: {
+      type: Boolean,
+      default: () => true,
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      player: null,
+      value: "",
+      times: 0,
+    };
+  },
+  watch: {
+    data: {
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.player = new JSWebrtc.Player(value.vUrl, {
+              video: this.$refs["webrtc"],
+              autoplay: true,
+            });
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  beforeDestroy(){
+    this.player?.destroy();
+  },
+  methods: {
+    fullScreen() {
+      let video = this.$refs["webrtc"];
+      if (video.webkitRequestFullScreen) {
+        video.webkitRequestFullScreen();
+      } else if (video.requestFullscreen) {
+        video.requestFullscreen();
+      } else if (video.mozRequestFullScreen)
+        setTimeout(() => {
+          video.play();
+        }, 200);
+    },
+    exit() {
+      let video = this.$refs["webrtc"];
+
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      }
+
+      setTimeout(() => {
+        video.play();
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cpt-player-webrtc {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    position: relative;
+
+    .title {
+      position: absolute;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 16px;
+      color: #69ceff;
+      letter-spacing: 1px;
+      text-align: center;
+      font-weight: 700;
+      height: 42px;
+      line-height: 42px;
+      position: relative;
+      box-sizing: border-box;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/MMCPlayer/index.vue

@@ -17,8 +17,15 @@
           </div>
           <div v-show="!fullScreen" class="close" @click="onClose(data)">关闭</div>
         </div>
-        <el-tooltip content="模式切换" placement="bottom" v-if="playerCom !== 'QingLiuPlayer' && fpvUrl.vUrl">
-          <div class="fpv-switch iconfont icon-moshiqiehuan modelStyle pointer" @click="onChangeFPV"></div>
+        <el-tooltip
+          content="模式切换"
+          placement="bottom"
+          v-if="playerCom !== 'QingLiuPlayer' && fpvUrl.vUrl"
+        >
+          <div
+            class="fpv-switch iconfont icon-moshiqiehuan modelStyle pointer"
+            @click="onChangeFPV"
+          ></div>
         </el-tooltip>
         <components
           :is="playerCom"
@@ -98,10 +105,15 @@
           <div v-else class="left ml24" style="margin-left: 124px; color: #fff;"></div>
           <div class="ctrl-items">
             <div class="ctrl-items-selects">
-              <el-select class="video_type mr24" v-model="streamSelect" @change="fpvSmallWindow = true;" placeholder="切换源">
+              <el-select
+                class="video_type mr24"
+                v-model="streamSelect"
+                @change="fpvSmallWindow = true;"
+                placeholder="切换源"
+              >
                 <el-option
-                  v-for="item in streamOptions"
-                  :key="item.value"
+                  v-for="(item, i) in _streamOptions"
+                  :key="i"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
@@ -129,18 +141,24 @@
 <script>
 // import API from "@/api";
 
-import LiveNVRPlayer from "./components/livenvr/index.vue";
+import LiveNVRPlayer from "./components/livenvr";
 // import QingLiuPlayer from "./flv/index.vue";
-import QingLiuPlayer from "./components/qingliu/index.vue";
+import QingLiuPlayer from "./components/qingliu";
+import FLVPlayer from "./components/flv";
+import SRSPlayer from "./components/srs";
+import WebRtcPlayer from './components/webrtc';
 import { to_moveMount } from "../../lib/to_moveMount";
-import Obstacle from './components/obstacle';
+import Obstacle from "./components/obstacle";
 
 export default {
   name: "MMCPlayer",
   components: {
     QingLiuPlayer,
     LiveNVRPlayer,
-    Obstacle
+    FLVPlayer,
+    SRSPlayer,
+    WebRtcPlayer,
+    Obstacle,
   },
   props: {
     //网络类型
@@ -148,7 +166,7 @@ export default {
       type: String,
       default: () => "公网",
     },
-    //流可选项， {value: "播放地址", label: '流名称', fpvUrl: ''}
+    //流可选项， {value: "播放地址", label: '流名称', fpvUrl: '', brand: 'srs|fly|liveNVR|QingLiu|webrtc'}
     streamOptions: {
       type: Array,
       default: () => [],
@@ -164,13 +182,13 @@ export default {
     },
     obstacleData: {
       type: Object,
-      default(){
+      default() {
         return null; /* { 
           distances: [], //array<int>（36个值每10度一个与障碍物的距离厘米）; 
           obsDistance: 0,  //int(避障警告距离米)}
         } */
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -214,12 +232,43 @@ export default {
      * 播放器组件名
      */
     playerCom() {
-      if (this.streamSelect?.includes("pzsp://")) {
-        return "QingLiuPlayer";
+      if (this.stream?.brand) {
+        switch (this.stream.brand.toLowerCase()) {
+          case "flv":
+            return "FLVPlayer";
+
+          case "srs":
+            return "SRSPlayer";
+
+          case "livenvr":
+            return "LiveNVRPlayer";
+
+          case "qingliu":
+            return "QingLiuPlayer";
+
+          case "webrtc":
+            return "WebRtcPlayer";
+
+          default:
+            throw "不支持的播放器品牌！";
+        }
       } else {
-        return "LiveNVRPlayer";
+        if (this.vUrl.vUrl?.includes("pzsp://")) {
+          return "QingLiuPlayer";
+        } else {
+          return "LiveNVRPlayer";
+        }
       }
     },
+    _streamOptions(){
+      return this.streamOptions.map((item, i) => {
+        item.value = i;
+        return item;
+      })
+    },
+    /**
+     * 选择流选项
+     */
     stream() {
       let find = this.streamOptions.find((item) => {
         return item.value === this.streamSelect;
@@ -237,7 +286,7 @@ export default {
      */
     vUrl() {
       return {
-        vUrl: this.stream?.value || "",
+        vUrl: this.stream?.url || "",
       };
     },
     fpvUrl() {
@@ -248,31 +297,23 @@ export default {
   },
   watch: {
     streamOptions: {
-      handler: function() {
-        console.log('streamOptions');
+      handler: function () {
+        console.log("streamOptions");
         //当流选项变化时，如果未选择流类型，则自动选择第一个流类型
-        if (this.streamOptions.length > 0) {
-          this.streamSelect = this.streamOptions[0].value;
+        if (this._streamOptions.length > 0) {
+          this.streamSelect = this._streamOptions[0].value;
         }
       },
       deep: true,
-      immediate: true
+      immediate: true,
     },
   },
   mounted() {
     this.wrapCenter();
   },
   methods: {
-    test(){
-      alert('TEST');
-    },
-    firstCopySuccess(e) {
-      console.log("copy arguments e:", e);
-      alert("复制成功!");
-    },
-    firstCopyError(e) {
-      console.log("copy arguments e:", e);
-      alert("复制失败!");
+    test() {
+      alert("TEST");
     },
     /**
      * 切换展示清流调试信息

vue2/public/index.html

@@ -10,7 +10,6 @@
     <script src="./js/icontfont.js"></script>
     <script type="text/javascript" src="./js/nipplejs.min.js"></script>
     <script src="js/PIMediaPlayer_api.js"></script>
-    <script src="./js/liveplayer-lib.min.js"></script>
     <script src="./s3m.js"></script>
     <script type="text/javascript" src="js/kbt_api.js"></script>
     <script src="liveplayer/liveplayer-lib.min.js"></script>

vue2/src/views/player/demo.js

@@ -3,7 +3,10 @@ export default `
 1.清流需要网站响应头中添加
 "Cross-Origin-Opener-Policy": "same-origin",
 "Cross-Origin-Embedder-Policy": "require-corp",
-2.需要将mmc-stl-vue2/components/MMCPlayer/lib/js和mmc-stl-vue2/components/MMCPlayer/lib/liveplayer复制到项目的public文件中
+2.需要将mmc-stl-vue2/components/MMCPlayer/lib/js和mmc-stl-vue2/components/MMCPlayer/lib/liveplayer复制到项目的public文件中, index.html添加以下代码 
+<script src="js/PIMediaPlayer_api.js"></script>
+<script src="js/kbt_api.js"></script>
+<script src="liveplayer/liveplayer-lib.min.js"></script>
 
 <template>
   <div>
@@ -22,24 +25,36 @@ export default {
     return {
       streamOptions: [
         {
-          label: "播放源1",
-          value:
+          label: "flv",
+          brand: "flv",     //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
+          url:
             "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
-          fpvUrl:
-            "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
         },
         {
-          label: "播放源2",
-          value:
+          label: "liveNVR",
+          brand: 'liveNVR',
+          url:
             "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
-          fpvUrl:
+          fpvUrl:     //只有liveNVR支持fpvUrl
             "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
         },
         {
-          label: "播放源3",
-          value:
+          label: "srs",
+          brand: 'srs',
+          url:
+            "webrtc://live.mmcuav.cn/hls/shouguang01",
+        },
+        {
+          label: "QingLiu",
+          url:
             "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
         },
+        {
+          label: "WebRtc",
+          brand: 'webrtc',
+          url:
+            "webrtc://live.mmcuav.cn/hls/shouguang01",
+        },
       ],
       obstacleData: null,
       /* { 

vue2/src/views/player/demo.vue

@@ -15,24 +15,36 @@ export default {
     return {
       streamOptions: [
         {
-          label: "播放源1",
-          value:
+          label: "flv",
+          brand: "flv",     //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
+          url:
             "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
-          fpvUrl:
-            "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
         },
         {
-          label: "播放源2",
-          value:
-            "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
-          fpvUrl:
+          label: "liveNVR",
+          brand: 'liveNVR',
+          url:
             "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+          fpvUrl:     //只有liveNVR支持fpvUrl
+            "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
         {
-          label: "播放源3",
-          value:
+          label: "srs",
+          brand: 'srs',
+          url:
+            "webrtc://live.mmcuav.cn/hls/shouguang01",
+        },
+        {
+          label: "QingLiu",
+          url:
             "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
         },
+        {
+          label: "WebRtc",
+          brand: 'webrtc',
+          url:
+            "webrtc://live.mmcuav.cn/hls/shouguang01",
+        },
       ],
       obstacleData: null,
       /* {