refactor: 优化流媒体,关闭IO隐藏缓冲区等 (#2200)

frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue

@@ -24,10 +24,14 @@
               <el-radio :label="false">{{ $t('panel.no') }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">
-            <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
-          </el-form-item>
-          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.play_frequency')">
+          <!--This button is currently disabled and temporarily masked-->
+          <!--          <el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">-->
+          <!--            <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />-->
+          <!--          </el-form-item>-->
+          <el-form-item
+            v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive"
+            :label="$t('panel.play_frequency')"
+          >
             <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
               <el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
               <el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
@@ -123,7 +127,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .slot-class{
+  .slot-class {
     color: white;
   }
 
@@ -132,13 +136,14 @@ export default {
     text-align: center;
 
   }
-  .ellip{
+
+  .ellip {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     background-color: #f7f8fa;
     color: #3d4d66;
     font-size: 12px;
@@ -147,20 +152,21 @@ export default {
     border-radius: 3px;
   }
 
-  .select-filed{
+  .select-filed {
     /*width: 100%;*/
     margin-left: 10px;
     margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    overflow: hidden; /*超出部分隐藏*/
+    white-space: nowrap; /*不换行*/
+    text-overflow: ellipsis; /*超出部分文字以...显示*/
     color: #3d4d66;
     font-size: 12px;
     line-height: 35px;
     height: 35px;
     border-radius: 3px;
   }
-  >>>.el-popover{
+
+  > > > .el-popover {
     height: 200px;
     overflow: auto;
   }

frontend/src/components/canvas/custom-component/DeStreamMedia.vue

@@ -71,8 +71,8 @@ export default {
   mounted() {
     this.initOption()
     bus.$on('streamMediaLinksChange-' + this.element.id, () => {
-      this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType],
-      this.flvPlayer = null,
+      this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType]
+      this.flvPlayer = null
       this.videoShow = false
       this.$nextTick(() => {
         this.videoShow = true
@@ -80,14 +80,24 @@ export default {
       })
     })
   },
+  beforeDestroy() {
+    this.destroyPlayer()
+  },
   methods: {
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
+        this.destroyPlayer()
         const video = this.$refs.player
         if (video) {
-          this.flvPlayer = flvjs.createPlayer(this.pOption)
-          this.flvPlayer.attachMediaElement(video)
           try {
+            this.flvPlayer = flvjs.createPlayer(this.pOption,
+              {
+                enableWorker: false, // 不启用分离线程
+                enableStashBuffer: false, // 关闭IO隐藏缓冲区
+                isLive: this.pOption.isLive,
+                lazyLoad: false
+              })
+            this.flvPlayer.attachMediaElement(video)
             this.flvPlayer.load()
             this.flvPlayer.play()
           } catch (error) {
@@ -95,6 +105,14 @@ export default {
           }
         }
       }
+    },
+    destroyPlayer() {
+    // Destroy
+      if (this.flvPlayer) {
+        this.flvPlayer.pause()
+        this.flvPlayer.destroy()
+        this.flvPlayer = null
+      }
     }
   }
 }

frontend/src/components/canvas/custom-component/component-list.js

@@ -106,7 +106,8 @@ export const STREAMMEDIALINKS = {
     type: 'flv',
     isLive: false,
     cors: true, // 允许跨域
-    loop: true
+    loop: true,
+    autoplay: false
     // url: null // 网络动画视频
   }
 }