解决播放rtmp视频流问题之前的一次提交

.electron-vue/webpack.main.config.js

@@ -49,9 +49,10 @@ let mainConfig = {
     ])
   ],
   resolve: {
-    extensions: ['.js', '.json', '.node']
+    extensions: ['.js', '.json', '.node'],
+    modules: [path.resolve('node_modules'), 'node_modules'],
   },
-  target: 'electron-main'
+  target: 'electron-main',
 }
 
 /**

.electron-vue/webpack.renderer.config.js

@@ -141,7 +141,8 @@ let rendererConfig = {
       'vue$': 'vue/dist/vue.esm.js',
       'static':path.resolve(__dirname,'../static')
     },
-    extensions: ['.js', '.vue', '.json', '.css', '.node']
+    extensions: ['.js', '.vue', '.json', '.css', '.node'],
+    modules: [path.resolve('node_modules'), 'node_modules'],
   },
   target: 'electron-renderer'
 }

.electron-vue/webpack.web.config.js

@@ -100,7 +100,8 @@ let webConfig = {
       '@': path.join(__dirname, '../src/renderer'),
       'vue$': 'vue/dist/vue.esm.js'
     },
-    extensions: ['.js', '.vue', '.json', '.css']
+    extensions: ['.js', '.vue', '.json', '.css'],
+    modules: [path.resolve('node_modules'), 'node_modules'],
   },
   target: 'web'
 }

src/renderer/App.vue

@@ -46,8 +46,8 @@
       // 更新vuex中的缩放比例
       axios.get('static/EnityWindow.Data').then(async res => {
         if (res.status === 200) {
-              const scale = window.screen.height/res.data[0].Height
-              this.$store.dispatch('updateScale',scale)
+              const bigScale = window.screen.height/res.data[0].Height
+              this.$store.dispatch('updateScale',bigScale)
           }
       })
     }

src/renderer/components/Admin.vue

@@ -5,10 +5,10 @@
     <div
             :style="{
                 position: 'relative',
-                left:windowJson[0] ? windowJson[0].Left*scale+'px' : '',
-                top:windowJson[0] ? windowJson[0].Top*scale+'px' : '',
-                width:windowJson[0] ? windowJson[0].Width*scale + 'px' : '',
-                height:windowJson[0] ? windowJson[0].Height*scale + 'px' : '',
+                left:windowJson[0] ? windowJson[0].Left*bigScale+'px' : '',
+                top:windowJson[0] ? windowJson[0].Top*bigScale+'px' : '',
+                width:windowJson[0] ? windowJson[0].Width*bigScale + 'px' : '',
+                height:windowJson[0] ? windowJson[0].Height*bigScale + 'px' : '',
                 zIndex:windowJson[0] ? windowJson[0].ZIndex : '',
                 display:windowJson[0] ? (windowJson[0].IsVisibility ? 'block' : 'none') : '',
                 backgroundImage:windowJson[0] ? (windowJson[0].BackIcon ? 'url('+require(`../../../static/${windowJson[0].BackIcon}`)+')' : null) : '',
@@ -101,7 +101,7 @@
         },
 
         computed: {
-            ...mapState(['scale'])
+            ...mapState(['bigScale'])
         }
     }
 </script>

src/renderer/components/BigShow.vue

@@ -13,24 +13,25 @@
                 @end="isDragging=false"
                 ref="bigscreen"
                 :style="{
-                    width:item.Width*scale + 'px',
-                    height:item.Height*scale + 'px',
-                    left:item.Left*scale+'px',
-                    top:item.Top*scale+'px',
+                    width:item.Width*bigScale + 'px',
+                    height:item.Height*bigScale + 'px',
+                    left:item.Left*bigScale+'px',
+                    top:item.Top*bigScale+'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'black' : 'none',
                 }"
         >
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
-                    :w="item.Width*scale/(splitScreenStatus+1)" :h="item.Height*scale/(splitScreenStatus+1)"
+                    :w="item.Width*bigScale/(splitScreenStatus+1)" :h="item.Height*bigScale/(splitScreenStatus+1)"
                     :parentLimitation="false"
                     @dragstop="dragStop"
-                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    @resizestop="(obj) => reSizeSignal(obj,itemV,item)"
             >
                 <div ref="signal">
                     <video-player
                             :options="playerOptions"
+                            style="width:100%;height:100%;object-fit: fill"
                     >
 
                     </video-player>
@@ -63,30 +64,21 @@
                 divArr:[],// 默认大屏中盒子的数组
                 streamWindows:[], // 传递出去的信号源位置信息
                 playerOptions: { // 视频播放配置
-                    muted: false,
-                    fluid:true,
-                    language: 'zh-CN',
+                    notSupportMessage: '此视频暂无法播放',
+                    fluid: true,
                     playbackRates: [0.7, 1.0, 1.5, 2.0],
-                    aspectRatio: '16:9',
-                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                     sources: [
-                        {
+                        /*{
                             src: 'http://img-ys011.didistatic.com/static/didiglobal/do1_pcUZZjSG7vFlMbdr8fA6',
                             type: 'video/mp4'
-                        },
-                        /*{
-                            src:'rtmp://172.17.20.104:1935/flvplayback/mp4:C201711040/C201711040_15133319919941212.mp4',
-                            type:'rtmp/mp4'
-                        }*/
-                    ],
-                    controlBar: {
-                        timeDivider: false,
-                        durationDisplay: false,
-                        remainingTimeDisplay: false,
-                        fullscreenToggle: false // 全屏按钮
-                    }
+                        },*/
+                        {
+                            src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
+                            type: 'rtmp/flv'
+                        }
+                    ]
                 },
-                bigScreenJson:[]
+                bigScreenJson:[],
             }
         },
 
@@ -114,7 +106,7 @@
             reqRefreshBigScreen(arr) {
                 const streamWindows = []
                 setTimeout(async () => {
-                    const elementArr = this.$refs.signal
+                    const elementArr = this.$refs.signal ? this.$refs.signal.filter(item => item.clientHeight !== 0) : []
                     if(elementArr){
                         elementArr.forEach((item,index) => {
                             // 获取元素绝对位置的横坐标和纵坐标
@@ -123,8 +115,8 @@
                             streamWindows.push({
                                 left,
                                 top,
-                                width:this.bigScreenJson[0].Width/(this.splitScreenStatus+1),
-                                height:this.bigScreenJson[0].Height/(this.splitScreenStatus+1),
+                                width:this.bigScreenJson[0].Width*this.$store.state.bigScale/(this.splitScreenStatus+1),
+                                height:this.bigScreenJson[0].Height*this.$store.state.bigScale/(this.splitScreenStatus+1),
                                 id:0,
                                 sourceId:arr[index] ? arr[index].sourceId : '',
                                 widthScale:1/(this.splitScreenStatus+1),
@@ -136,8 +128,8 @@
                             bigScreenId:this.bigScreenJson[0].ID,
                             streamWindows
                         }
-                        this.streamWindows = streamWindows
                         console.log(data)
+                        this.streamWindows = streamWindows
                         // 调用大屏开窗接口
                         await reqRefreshView(data)
                     }
@@ -151,20 +143,30 @@
             },
 
             // 放大缩小信号源
-            reSizeSignal(obj,itemV) {
+            async reSizeSignal(obj,itemV,item) {
+                console.log(obj,item)
                 const arr = this.$data.streamWindows
                 // 找出当前改动的信号源
                 const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
-                currentItem.width = obj.width
-                currentItem.height = obj.height
+                currentItem[0].widthScale = currentItem[0].widthScale*obj.width/currentItem[0].width
+                currentItem[0].heightScale = currentItem[0].heightScale*obj.height/currentItem[0].height
+                currentItem[0].width = obj.width
+                currentItem[0].height = obj.height
                 const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
                 const newStreamWindows = [...currentItem,...otherItems]
-                console.log(newStreamWindows)
+                const data = {
+                    bigScreenId:this.bigScreenJson[0].ID,
+                    streamWindows:newStreamWindows
+                }
+                console.log(data)
+                this.streamWindows = newStreamWindows
+                // 调用大屏开窗接口
+                await reqRefreshView(data)
             }
         },
 
         computed: {
-            ...mapState(['splitScreenStatus','scale']),
+            ...mapState(['splitScreenStatus','bigScale']),
 
             signalPreList: {
                 get() {

src/renderer/components/Button.vue

@@ -5,19 +5,19 @@
         <div v-for="item in buttonJson"
              :style="{
                     position:'absolute',
-                    left:item.Left*scale+'px',
-                    top:item.Top*scale+'px',
-                    width:item.Width*scale + 'px',
-                    height:item.Height*scale + 'px',
+                    left:item.Left*bigScale+'px',
+                    top:item.Top*bigScale+'px',
+                    width:item.Width*bigScale + 'px',
+                    height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    fontSize:item.FontSize*scale + 'px',
+                    fontSize:item.FontSize*bigScale + 'px',
                     backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
                     backgroundSize:'100% 100%',
                     backgroundRepeat:'no-repeat',
                     color:`#${item.ForegroundStr.slice(3)}`,
                     textAlign:'center',
-                    lineHeight:item.Height*scale + 'px',
+                    lineHeight:item.Height*bigScale + 'px',
                     cursor:'default'
                 }"
              :ref="item.ID"
@@ -68,7 +68,7 @@
         },
 
         computed: {
-            ...mapState(['scale']),
+            ...mapState(['bigScale']),
         },
 
         methods: {

src/renderer/components/Image.vue

@@ -5,10 +5,10 @@
         <div v-for="item in imageJson"
              :style="{
                     position:'absolute',
-                    left:item.Left*scale+'px',
-                    top:item.Top*scale+'px',
-                    width:item.Width*scale + 'px',
-                    height:item.Height*scale + 'px',
+                    left:item.Left*bigScale+'px',
+                    top:item.Top*bigScale+'px',
+                    width:item.Width*bigScale + 'px',
+                    height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
@@ -37,7 +37,7 @@
         },
 
         computed: {
-            ...mapState(['scale'])
+            ...mapState(['bigScale'])
         }
     }
 </script>

src/renderer/components/Label.vue

@@ -4,17 +4,17 @@
     <div>
         <label v-for="item in labelJson"
                :style="{
-                 fontSize:item.FontSize*scale + 'px',
+                 fontSize:item.FontSize*bigScale + 'px',
                  position:'absolute',
-                 left:item.Left*scale+'px',
-                 top:item.Top*scale+'px',
-                 width:item.Width*scale + 'px',
-                 height:item.Height*scale + 'px',
+                 left:item.Left*bigScale+'px',
+                 top:item.Top*bigScale+'px',
+                 width:item.Width*bigScale + 'px',
+                 height:item.Height*bigScale + 'px',
                  zIndex:item.ZIndex,
                  display:item.IsVisibility ? 'block' : 'none',
                  color:`#${item.ForegroundStr.slice(3)}`,
                  textAlign:'center',
-                 lineHeight:item.Height*scale + 'px',
+                 lineHeight:item.Height*bigScale + 'px',
             }">
             {{item.Text}}
         </label>
@@ -37,7 +37,7 @@
         },
 
         computed: {
-            ...mapState(['scale']),
+            ...mapState(['bigScale']),
         },
 
         methods: {

src/renderer/components/SignalList.vue

@@ -1,13 +1,13 @@
 <template>
     <draggable
             :style="{
-                left:signalBorder[0] ? signalBorder[0].Left*scale+'px' : '',
-                top:signalBorder[0] ? signalBorder[0].Top*scale+'px' : '',
-                width:signalBorder[0] ? signalBorder[0].Width*scale + 'px' : '',
-                height:signalBorder[0] ? signalBorder[0].Height*scale + 'px' : '',
+                left:signalBorder[0] ? signalBorder[0].Left*bigScale+'px' : '',
+                top:signalBorder[0] ? signalBorder[0].Top*bigScale+'px' : '',
+                width:signalBorder[0] ? signalBorder[0].Width*bigScale + 'px' : '',
+                height:signalBorder[0] ? signalBorder[0].Height*bigScale + 'px' : '',
                 zIndex:signalBorder[0] ? signalBorder[0].ZIndex : '',
                 display:signalBorder[0] ? (signalBorder[0].IsVisibility ? 'block' : 'none') : '',
-                fontSize:signalBorder[0] ? signalBorder[0].FontSize*scale + 'px' : '',
+                fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
                 color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
                 position:'absolute',
                 overflow:'auto',
@@ -64,7 +64,7 @@
         },
 
         computed: {
-            ...mapState(['signalListJson','scale']),
+            ...mapState(['signalListJson','bigScale']),
             dragOptions1() {
                 return {
                     animation: 0,

src/renderer/components/Slider.vue

@@ -5,10 +5,10 @@
         <div v-for="item in sliderJson"
              :style="{
                     position:'absolute',
-                    left:item.Left*scale+'px',
-                    top:item.Top*scale+'px',
-                    width:item.Width*scale + 'px',
-                    height:item.Height*scale + 'px',
+                    left:item.Left*bigScale+'px',
+                    top:item.Top*bigScale+'px',
+                    width:item.Width*bigScale + 'px',
+                    height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
@@ -17,14 +17,14 @@
         >
             <div
                     :style="{
-                           width:item.imgBgWidth*scale + 'px',
-                           height:item.imgBgHeight*scale + 'px',
+                           width:item.imgBgWidth*bigScale + 'px',
+                           height:item.imgBgHeight*bigScale + 'px',
                         }"
             >
                 <div
                         :style="{
-                            width:item.imgSliderWidth*scale + 'px',
-                            height:item.imgSliderHeight*scale + 'px',
+                            width:item.imgSliderWidth*bigScale + 'px',
+                            height:item.imgSliderHeight*bigScale + 'px',
                             backgroundImage:'url('+require(`../../../static/${item.SliderIcon}`)+')',
                             backgroundRepeat:'no-repeat',
                             marginLeft:'40%',
@@ -54,7 +54,7 @@
         },
 
         computed: {
-            ...mapState(['scale']),
+            ...mapState(['bigScale']),
         }
     }
 </script>

src/renderer/store/actions.js

@@ -54,7 +54,7 @@ export default {
   },
 
   // 更新元素缩放比例
-  updateScale({commit},scale) {
-    commit(UPDATE_SCALE,{scale})
+  updateScale({commit},bigScale) {
+    commit(UPDATE_SCALE,{bigScale})
   }
 }

src/renderer/store/mutation-types.js

@@ -7,5 +7,5 @@ export const UPDATE_SIGNALPRELIST = 'update_signalprelist' // 更新拖动到大
 export const SAVE_BIGSCREEN = 'save_bigscreen' // 保存大屏数据
 export const SAVE_SIGNALLIST = 'save_signallist' // 保存信号源列表数据
 export const SAVE_DEVICE = 'save_device' // 保存设备数据
-export const UPDATE_SCALE = 'update_scale' // 更新元素缩放比例
+export const UPDATE_SCALE = 'update_bigScale' // 更新元素缩放比例
 

src/renderer/store/mutations.js

@@ -57,7 +57,7 @@ export default {
   },
 
   // 更新元素缩放比例
-  [UPDATE_SCALE] (state,{scale}) {
-    state.scale = scale
+  [UPDATE_SCALE] (state,{bigScale}) {
+    state.bigScale = bigScale
   }
 }

src/renderer/store/state.js

@@ -13,5 +13,5 @@ export default {
   signalListJson:[],
 
   // 元素缩放比例
-  scale:1
+  bigScale:1
 }

yarn.lock

@@ -2505,7 +2505,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-webpack-plugin@^4.5.1:
+copy-webpack-plugin@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
   integrity sha512-Y+SQCF+0NoWQryez2zXn5J5knmr9z/9qSQt7fbL78u83rxmigOy8X5+BFn8CFSuX+nKT8gpYwJX68ekqtQt6ZA==