feat: 仪表板增加flv流媒体播放组件

730716d2 · wangjiahao · 3fb1200e · 730716d2 · 730716d2 · 730716d2
Commit 730716d2 authored 3 years ago by wangjiahao
Hide whitespace changes
Inline Side-by-side

Showing

with 383 additions and 9 deletions
+383 -9
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
    "file-save": "^0.2.0",
    "file-saver": "^2.0.5",
    "fit2cloud-ui": "1.5.4",
+    "flv.js": "^1.6.2",
    "html2canvasde": "^v1.1.4-de",
    "jquery": "^3.1.1",
    "js-base64": "^3.7.2",

--- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+<template>
+
+  <el-popover
+    ref="popover"
+    width="400"
+    trigger="click"
+  >
+    <el-row>
+      <el-form ref="form" size="mini" label-width="70px">
+        <el-form-item :label="$t('panel.video_type')">
+          <el-radio-group v-model="streamMediaInfoTemp.videoType">
+            <el-radio :label="'flv'">FLV</el-radio>
+            <!--            <el-radio :label="'hls'">HLS 直播</el-radio>-->
+            <!--                    <el-radio :label="'rtmp'">{{$t('panel.streaming_media')}}</el-radio>-->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('panel.auto_play')">
+          <el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
+          <span style="color: #909399; font-size: 8px;margin-left: 3px">
+            Tips:{{ $t('panel.live_tips') }}
+          </span>
+        </el-form-item>
+        <el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :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>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :label="$t('panel.is_live')">
+          <el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive">
+            <el-radio :label="true">{{ $t('panel.yes') }}</el-radio>
+            <el-radio :label="false">{{ $t('panel.no') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('panel.video_links')">
+          <el-input v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].url" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+  </el-popover>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
+export default {
+  props: {
+    linkInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      streamMediaInfoTemp: null,
+      componentType: null,
+      linkageActiveStatus: false,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  watch: {
+    linkInfo: {
+      handler: function() {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  methods: {
+    init() {
+      this.streamMediaInfoTemp = deepCopy(this.linkInfo)
+    },
+    onSubmit() {
+      this.curComponent.streamMediaLinks = this.streamMediaInfoTemp
+      this.$store.state.styleChangeTimes++
+      this.popoverClose()
+    },
+    onClose() {
+      this.$emit('close')
+      this.popoverClose()
+    },
+    popoverClose() {
+      this.$refs.popover.showPopper = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    margin-top: 20px;
+    text-align: center;
+
+  }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+  >>>.el-popover{
+    height: 200px;
+    overflow: auto;
+  }
+
+</style>
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -134,6 +134,12 @@
        </el-tooltip>
      </div>

+      <div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="流媒体信息">
+          <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
+        </el-tooltip>
+      </div>
+
      <div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
        <el-tooltip content="网页地址">
          <FrameLinks :link-info="curComponent.frameLinks" />
@@ -159,12 +165,13 @@
 import { mapState } from 'vuex'
 import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
+import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'

 export default {
-  components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks },
+  components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks, StreamMediaLinks },
  props: {
    scrollLeft: {
      type: Number,
@@ -294,11 +301,14 @@ export default {
        'backgroundColor',
        'hyperlinks'
      ],
-      // 文本组件显示的属性
      'de-video': [
        'opacity',
        'videoLinks'
      ],
+      'de-stream-media': [
+        'opacity',
+        'streamMediaLinks'
+      ],
      'de-frame': [
        'opacity',
        'frameLinks'

--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+<template>
+  <el-row ref="mainPlayer" style="width: 100%;height: 100%">
+    <div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
+      <video ref="player" class="centered-video" name="centeredVideo" :controls="editMode!=='edit'" :loop="pOption.loop" muted />
+    </div>
+    <div v-else class="info-stream-class">
+      {{ $t('panel.stream_media_add_tips') }}
+    </div>
+  </el-row>
+</template>
+<script>
+
+import flvjs from 'flv.js'
+import '@/custom-theme.css'
+
+export default {
+  props: {
+    propValue: {
+      type: String,
+      require: true
+    },
+    element: {
+      type: Object
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'edit'
+    },
+    active: {
+      type: Boolean,
+      require: false,
+      default: false
+    },
+    h: {
+      type: Number,
+      default: 200
+    }
+  },
+  data() {
+    return {
+      pOption: this.element.streamMediaLinks[this.element.streamMediaLinks.videoType],
+      flvPlayer: null
+    }
+  },
+
+  computed: {
+    moveFlag() {
+      return (this.element.optStatus.dragging || this.element.optStatus.resizing)
+    },
+    curGap() {
+      return this.element.auxiliaryMatrix ? this.componentGap : 0
+    },
+    player() {
+      return this.$refs.videoPlayer.player
+    }
+  },
+  watch: {
+    pOption: {
+      handler: function() {
+        this.initOption()
+      },
+      deep: true
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.initOption()
+  },
+  methods: {
+    initOption() {
+      if (flvjs.isSupported() && this.pOption.url) {
+        const video = this.$refs.player
+        if (video) {
+          this.flvPlayer = flvjs.createPlayer(this.pOption)
+          this.flvPlayer.attachMediaElement(video)
+          try {
+            this.flvPlayer.load()
+            this.flvPlayer.play()
+          } catch (error) {
+            console.log(error)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .info-stream-class{
+    text-align: center;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: beige;
+    font-size: 12px;
+    color: #000000;
+  }
+  .move-bg {
+    height: 100%;
+    width: 100%;
+    background-color: #000000;
+  }
+  .video-container {
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+  }
+  .centered-video {
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: auto;
+  }
+</style>
+
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -96,7 +96,18 @@ export const VIDEOLINKS = {
      }
    }
  }
+}

+// 流媒体视频信息配置
+export const STREAMMEDIALINKS = {
+  videoType: 'flv',
+  flv: {
+    type: 'flv',
+    isLive: false,
+    cors: true, // 允许跨域
+    loop: true
+    // url: null // 网络动画视频
+  }
 }

 // 嵌套页面信息
@@ -148,6 +159,14 @@ export const pictureList = [
    label: '视频',
    icon: 'iconfont icon-video',
    defaultClass: 'text-filter'
+  },
+  {
+    id: '20003',
+    component: 'stream-media',
+    type: 'stream-media',
+    label: '流媒体',
+    icon: 'iconfont icon-a-liumeitimeitiliebiao',
+    defaultClass: 'text-filter'
  }
 ]

@@ -441,6 +460,27 @@ const list = [
    sizey: 5,
    miniSizex: 1,
    miniSizey: 1
+  },
+  {
+    id: '20003',
+    component: 'de-stream-media',
+    type: 'de-stream-media',
+    label: '',
+    icon: 'iconfont icon-picture',
+    defaultClass: 'text-filter',
+    mobileStyle: BASE_MOBILE_STYLE,
+    style: {
+      width: 400,
+      height: 200,
+      borderRadius: ''
+    },
+    streamMediaLinks: STREAMMEDIALINKS,
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 5,
+    miniSizex: 1,
+    miniSizey: 1
  }
 ]


--- a/frontend/src/components/canvas/custom-component/index.js
+++ b/frontend/src/components/canvas/custom-component/index.js
@@ -8,7 +8,9 @@ import RectShape from '@/components/canvas/custom-component/RectShape'
 import UserView from '@/components/canvas/custom-component/UserView'
 import DeVideo from '@/components/canvas/custom-component/DeVideo'
 import DeFrame from '@/components/canvas/custom-component/DeFrame'
+import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia'

+Vue.component('DeStreamMedia', DeStreamMedia)
 Vue.component('Picture', Picture)
 Vue.component('VText', VText)
 Vue.component('VButton', VButton)

--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1392,6 +1392,11 @@ export default {
    sure_bt: 'Confirm'
  },
  panel: {
+    is_live: 'Is Live',
+    yes: 'Yes',
+    no: 'No',
+    live_tips: 'User Https First',
+    stream_media_add_tips: 'Please Add Stream Media Info...',
    json_params_error: 'Third Party Parameters Parsing Failed. Please Check Whether The Parameters Format Is Correct',
    inner_padding: 'Inner Padding',
    board_radio: 'Board Radio',

--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1393,6 +1393,11 @@ export default {
    sure_bt: '確定'
  },
  panel: {
+    is_live: '是否直播',
+    yes: '是',
+    no: '否',
+    live_tips: '优先HTTPS链接',
+    stream_media_add_tips: '请点击添加配置流媒体信息...',
    json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
    inner_padding: '内边距',
    board_radio: '边框半径',

--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1401,6 +1401,11 @@ export default {
    sure_bt: '确定'
  },
  panel: {
+    is_live: '是否直播',
+    yes: '是',
+    no: '否',
+    live_tips: '优先HTTPS链接',
+    stream_media_add_tips: '请点击添加配置流媒体信息...',
    json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
    inner_padding: '内边距',
    board_radio: '边框半径',

--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
@@ -54,6 +54,12 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">流媒体，媒体列表</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">iframe</div>
@@ -522,9 +528,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1648367037728') format('woff2'),
-       url('iconfont.woff?t=1648367037728') format('woff'),
-       url('iconfont.ttf?t=1648367037728') format('truetype');
+  src: url('iconfont.woff2?t=1648734668996') format('woff2'),
+       url('iconfont.woff?t=1648734668996') format('woff'),
+       url('iconfont.ttf?t=1648734668996') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -550,6 +556,15 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont icon-a-liumeitimeitiliebiao"></span>
+            <div class="name">
+              流媒体，媒体列表
+            </div>
+            <div class="code-name">.icon-a-liumeitimeitiliebiao
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont icon-iframe"></span>
            <div class="name">
@@ -1252,6 +1267,14 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-liumeitimeitiliebiao"></use>
+                </svg>
+                <div class="name">流媒体，媒体列表</div>
+                <div class="code-name">#icon-a-liumeitimeitiliebiao</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iframe"></use>

--- a/frontend/src/styles/deicon/iconfont.css
+++ b/frontend/src/styles/deicon/iconfont.css
 @font-face {
  font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1648367037728') format('woff2'),
-       url('iconfont.woff?t=1648367037728') format('woff'),
-       url('iconfont.ttf?t=1648367037728') format('truetype');
+  src: url('iconfont.woff2?t=1648734668996') format('woff2'),
+       url('iconfont.woff?t=1648734668996') format('woff'),
+       url('iconfont.ttf?t=1648734668996') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-a-liumeitimeitiliebiao:before {
+  content: "\e607";
+}
+
 .icon-iframe:before {
  content: "\e6de";
 }

--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
--- a/frontend/src/styles/deicon/iconfont.json
+++ b/frontend/src/styles/deicon/iconfont.json
@@ -5,6 +5,13 @@
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
+    {
+      "icon_id": "26621948",
+      "name": "流媒体，媒体列表",
+      "font_class": "a-liumeitimeitiliebiao",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
    {
      "icon_id": "4920096",
      "name": "iframe",

--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -443,6 +443,7 @@ export default {
        'rect-shape',
        'de-show-date',
        'de-video',
+        'de-stream-media',
        'de-frame'
      ],
      enableSureButton: false,