推流、部标、拉流代理适配新的播放器结构

web/src/views/common/mediaInfo.vue

@@ -91,11 +91,6 @@ export default {
 }
 </script>
 <style>
-.channel-form {
+#mediaInfo { position: relative; }
-  display: grid;
+#mediaInfo >>> .el-descriptions__title { font-size: 14px; color: #606266; font-weight: 600; }
-  background-color: #FFFFFF;
-  padding: 1rem 2rem 0 2rem;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1rem;
-}
 </style>

web/src/views/common/ptzControls.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="ptz-section-inner">
     <div class="ptz-top">
-      <div class="ptz-dpad">
+      <div v-if="hasPtzDirection" class="ptz-dpad">
         <div class="dpad-ring"></div>
         <button class="dpad-btn card card-up" @mousedown.prevent="handlePtzMove('up')" @mouseup.prevent="handlePtzStop()">▲</button>
         <button class="dpad-btn card card-right" @mousedown.prevent="handlePtzMove('right')" @mouseup.prevent="handlePtzStop()">▶</button>
         <button class="dpad-btn card card-down" @mousedown.prevent="handlePtzMove('down')" @mouseup.prevent="handlePtzStop()">▼</button>
         <button class="dpad-btn card card-left" @mousedown.prevent="handlePtzMove('left')" @mouseup.prevent="handlePtzStop()">◀</button>
-        <button class="dpad-btn diag diag-upright" @mousedown.prevent="handlePtzMove('upright')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(45deg)">▲</span></button>
+        <button v-if="showDiagonals" class="dpad-btn diag diag-upright" @mousedown.prevent="handlePtzMove('upright')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(45deg)">▲</span></button>
-        <button class="dpad-btn diag diag-downright" @mousedown.prevent="handlePtzMove('downright')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(135deg)">▲</span></button>
+        <button v-if="showDiagonals" class="dpad-btn diag diag-downright" @mousedown.prevent="handlePtzMove('downright')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(135deg)">▲</span></button>
-        <button class="dpad-btn diag diag-downleft" @mousedown.prevent="handlePtzMove('downleft')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(225deg)">▲</span></button>
+        <button v-if="showDiagonals" class="dpad-btn diag diag-downleft" @mousedown.prevent="handlePtzMove('downleft')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(225deg)">▲</span></button>
-        <button class="dpad-btn diag diag-upleft" @mousedown.prevent="handlePtzMove('upleft')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(-45deg)">▲</span></button>
+        <button v-if="showDiagonals" class="dpad-btn diag diag-upleft" @mousedown.prevent="handlePtzMove('upleft')" @mouseup.prevent="handlePtzStop()"><span style="display:inline-block;transform:rotate(-45deg)">▲</span></button>
         <button class="dpad-btn dpad-center" title="停止" @click="$emit('ptz-stop')">⏹</button>
       </div>
       <div class="ptz-func-col">
         <div class="ptz-func-group" :class="{ row: btnLayout === 'row' }">
-          <div class="ptz-func-row" v-if="homePosition">
+          <div class="ptz-func-row" v-if="homePosition && hasGuard">
             <div class="ptz-func-row">
               <div class="ptz-func-btn" title="看守位" @click.prevent="$emit('ptz-guard')">
                 <i class="el-icon-s-home" /><span>看守位</span>
               </div>
             </div>
           </div>
-          <div class="ptz-func-row">
+          <div v-if="hasPtzDirection" class="ptz-func-row">
             <div class="ptz-func-btn" title="变倍+" @mousedown.prevent="handlePtzMove('zoomin')" @mouseup.prevent="handlePtzStop()">
               <i class="el-icon-zoom-in" /><span>变倍+</span>
             </div>
@@ -30,7 +30,7 @@
               <i class="el-icon-zoom-out" /><span>变倍-</span>
             </div>
           </div>
-          <div class="ptz-func-row">
+          <div v-if="hasFocus" class="ptz-func-row">
             <div class="ptz-func-btn" title="聚焦+" @mousedown.prevent="$emit('focus-move', { command: 'near', speed: controSpeed })" @mouseup.prevent="$emit('focus-stop')">
               <i class="iconfont icon-bianjiao-fangda" /><span>聚焦+</span>
             </div>
@@ -38,7 +38,7 @@
               <i class="iconfont icon-bianjiao-suoxiao" /><span>聚焦-</span>
             </div>
           </div>
-          <div class="ptz-func-row">
+          <div v-if="hasIris" class="ptz-func-row">
             <div class="ptz-func-btn" title="光圈+" @mousedown.prevent="$emit('iris-move', { command: 'in', speed: controSpeed })" @mouseup.prevent="$emit('iris-stop')">
               <i class="iconfont icon-guangquan" /><span>光圈+</span>
             </div>
@@ -46,7 +46,7 @@
               <i class="iconfont icon-guangquan-" /><span>光圈-</span>
             </div>
           </div>
-          <div class="ptz-func-row">
+          <div v-if="hasDragZoom" class="ptz-func-row">
             <div class="ptz-func-btn" title="拉框放大" @click="$emit('toggle-drag-zoom')">
               <i class="iconfont icon-guangquan" /><span>拉框放大</span>
             </div>
@@ -57,7 +57,7 @@
         </div>
       </div>
     </div>
-    <div class="ptz-bottom">
+    <div v-if="hasAnyPtz" class="ptz-bottom">
       <div class="slider-with-controls">
         <span class="slider-label">速度</span>
         <el-button type="text" icon="el-icon-minus" class="slider-btn" @click="adjustSpeed(-1)" />
@@ -74,7 +74,16 @@ export default {
   name: 'PtzControls',
   props: {
     btnLayout: { type: String, default: 'column' },
-    homePosition: { type: Boolean, default: false }
+    homePosition: { type: Boolean, default: false },
+    showDiagonals: { type: Boolean, default: true }
+  },
+  computed: {
+    hasPtzDirection() { return 'ptz-move' in this.$listeners },
+    hasFocus() { return 'focus-move' in this.$listeners },
+    hasIris() { return 'iris-move' in this.$listeners },
+    hasDragZoom() { return 'toggle-drag-zoom' in this.$listeners || 'toggle-drag-zoom-out' in this.$listeners },
+    hasGuard() { return 'ptz-guard' in this.$listeners },
+    hasAnyPtz() { return this.hasPtzDirection || this.hasFocus || this.hasIris || this.hasDragZoom || this.hasGuard }
   },
   data() {
     return {

web/src/views/common/streamMediaPanel.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="media-info-content">
+    <el-form label-width="90px" size="small">
+      <el-form-item label="播放地址">
+        <el-input v-model="playerUrl" :disabled="true">
+          <template slot="append">
+            <i class="cpoy-btn el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(playerUrl)" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="iframe">
+        <el-input v-model="sharedIframe" :disabled="true" >
+          <template slot="append">
+            <i class="cpoy-btn el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(sharedIframe)" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="资源地址">
+        <el-input v-model="playUrl" :disabled="true" size="mini">
+          <el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(playUrl)" />
+          <el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
+            <el-button>更多地址<i class="el-icon-arrow-down el-icon--right" size="mini"/></el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv"><el-tag>FLV:</el-tag><span>{{ streamInfo.flv }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.https_flv" :command="streamInfo.https_flv"><el-tag>FLV(https):</el-tag><span>{{ streamInfo.https_flv }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.ws_flv" :command="streamInfo.ws_flv"><el-tag>FLV(ws):</el-tag><span>{{ streamInfo.ws_flv }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.wss_flv" :command="streamInfo.wss_flv"><el-tag>FLV(wss):</el-tag><span>{{ streamInfo.wss_flv }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.fmp4" :command="streamInfo.fmp4"><el-tag>FMP4:</el-tag><span>{{ streamInfo.fmp4 }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.https_fmp4" :command="streamInfo.https_fmp4"><el-tag>FMP4(https):</el-tag><span>{{ streamInfo.https_fmp4 }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.ws_fmp4" :command="streamInfo.ws_fmp4"><el-tag>FMP4(ws):</el-tag><span>{{ streamInfo.ws_fmp4 }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.wss_fmp4" :command="streamInfo.wss_fmp4"><el-tag>FMP4(wss):</el-tag><span>{{ streamInfo.wss_fmp4 }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.hls" :command="streamInfo.hls"><el-tag>HLS:</el-tag><span>{{ streamInfo.hls }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.https_hls" :command="streamInfo.https_hls"><el-tag>HLS(https):</el-tag><span>{{ streamInfo.https_hls }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.ws_hls" :command="streamInfo.ws_hls"><el-tag>HLS(ws):</el-tag><span>{{ streamInfo.ws_hls }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.wss_hls" :command="streamInfo.wss_hls"><el-tag>HLS(wss):</el-tag><span>{{ streamInfo.wss_hls }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.ts" :command="streamInfo.ts"><el-tag>TS:</el-tag><span>{{ streamInfo.ts }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.https_ts" :command="streamInfo.https_ts"><el-tag>TS(https):</el-tag><span>{{ streamInfo.https_ts }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.ws_ts" :command="streamInfo.ws_ts"><el-tag>TS(ws):</el-tag><span>{{ streamInfo.ws_ts }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.wss_ts" :command="streamInfo.wss_ts"><el-tag>TS(wss):</el-tag><span>{{ streamInfo.wss_ts }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtc" :command="streamInfo.rtc"><el-tag>RTC:</el-tag><span>{{ streamInfo.rtc }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtcs" :command="streamInfo.rtcs"><el-tag>RTCS:</el-tag><span>{{ streamInfo.rtcs }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtmp" :command="streamInfo.rtmp"><el-tag>RTMP:</el-tag><span>{{ streamInfo.rtmp }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtmps" :command="streamInfo.rtmps"><el-tag>RTMPS:</el-tag><span>{{ streamInfo.rtmps }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtsp" :command="streamInfo.rtsp"><el-tag>RTSP:</el-tag><span>{{ streamInfo.rtsp }}</span></el-dropdown-item>
+              <el-dropdown-item v-if="streamInfo.rtsps" :command="streamInfo.rtsps"><el-tag>RTSPS:</el-tag><span>{{ streamInfo.rtsps }}</span></el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StreamMediaPanel',
+  props: {
+    playerUrl: { type: String, default: '' },
+    playUrl: { type: String, default: '' },
+    streamInfo: { type: Object, default: null }
+  },
+  computed: {
+    sharedIframe() {
+      return `<iframe src="${this.playerUrl}"></iframe>`
+    }
+  },
+  methods: {
+    copyUrl(text) {
+      this.$copyText(text).then(() => {
+        this.$message.success({ showClose: true, message: '成功拷贝到粘贴板' })
+      }, () => {})
+    }
+  }
+}
+</script>

web/src/views/device/dialog/devicePlayer.vue

@@ -37,56 +37,7 @@
               />
             </el-tab-pane>
             <el-tab-pane label="实时视频" name="media">
-              <div v-if="tabActiveName === 'media'" class="media-info-content">
+              <streamMediaPanel v-if="tabActiveName === 'media'" :player-url="playerUrlInfo.playerUrl" :play-url="playerUrlInfo.playUrl" :stream-info="streamInfo" />
-                <el-form label-width="90px" size="small">
-                  <el-form-item label="播放地址">
-                    <el-input v-model="playerUrlInfo.playerUrl" :disabled="true">
-                      <template slot="append">
-                        <i class="cpoy-btn el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(playerUrlInfo.playerUrl)" />
-                      </template>
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item label="iframe">
-                    <el-input v-model="sharedIframe" :disabled="true" >
-                      <template slot="append">
-                        <i class="cpoy-btn el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(sharedIframe)" />
-                      </template>
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item label="资源地址">
-                    <el-input v-model="playerUrlInfo.playUrl" :disabled="true" size="mini">
-                      <el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" style="cursor: pointer" @click="copyUrl(playerUrlInfo.playUrl)" />
-                      <el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
-                        <el-button>更多地址<i class="el-icon-arrow-down el-icon--right" size="mini"/></el-button>
-                        <el-dropdown-menu slot="dropdown">
-                          <el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv"><el-tag>FLV:</el-tag><span>{{ streamInfo.flv }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.https_flv" :command="streamInfo.https_flv"><el-tag>FLV(https):</el-tag><span>{{ streamInfo.https_flv }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.ws_flv" :command="streamInfo.ws_flv"><el-tag>FLV(ws):</el-tag><span>{{ streamInfo.ws_flv }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.wss_flv" :command="streamInfo.wss_flv"><el-tag>FLV(wss):</el-tag><span>{{ streamInfo.wss_flv }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.fmp4" :command="streamInfo.fmp4"><el-tag>FMP4:</el-tag><span>{{ streamInfo.fmp4 }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.https_fmp4" :command="streamInfo.https_fmp4"><el-tag>FMP4(https):</el-tag><span>{{ streamInfo.https_fmp4 }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.ws_fmp4" :command="streamInfo.ws_fmp4"><el-tag>FMP4(ws):</el-tag><span>{{ streamInfo.ws_fmp4 }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.wss_fmp4" :command="streamInfo.wss_fmp4"><el-tag>FMP4(wss):</el-tag><span>{{ streamInfo.wss_fmp4 }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.hls" :command="streamInfo.hls"><el-tag>HLS:</el-tag><span>{{ streamInfo.hls }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.https_hls" :command="streamInfo.https_hls"><el-tag>HLS(https):</el-tag><span>{{ streamInfo.https_hls }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.ws_hls" :command="streamInfo.ws_hls"><el-tag>HLS(ws):</el-tag><span>{{ streamInfo.ws_hls }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.wss_hls" :command="streamInfo.wss_hls"><el-tag>HLS(wss):</el-tag><span>{{ streamInfo.wss_hls }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.ts" :command="streamInfo.ts"><el-tag>TS:</el-tag><span>{{ streamInfo.ts }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.https_ts" :command="streamInfo.https_ts"><el-tag>TS(https):</el-tag><span>{{ streamInfo.https_ts }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.ws_ts" :command="streamInfo.ws_ts"><el-tag>TS(ws):</el-tag><span>{{ streamInfo.ws_ts }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.wss_ts" :command="streamInfo.wss_ts"><el-tag>TS(wss):</el-tag><span>{{ streamInfo.wss_ts }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtc" :command="streamInfo.rtc"><el-tag>RTC:</el-tag><span>{{ streamInfo.rtc }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtcs" :command="streamInfo.rtcs"><el-tag>RTCS:</el-tag><span>{{ streamInfo.rtcs }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtmp" :command="streamInfo.rtmp"><el-tag>RTMP:</el-tag><span>{{ streamInfo.rtmp }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtmps" :command="streamInfo.rtmps"><el-tag>RTMPS:</el-tag><span>{{ streamInfo.rtmps }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtsp" :command="streamInfo.rtsp"><el-tag>RTSP:</el-tag><span>{{ streamInfo.rtsp }}</span></el-dropdown-item>
-                          <el-dropdown-item v-if="streamInfo.rtsps" :command="streamInfo.rtsps"><el-tag>RTSPS:</el-tag><span>{{ streamInfo.rtsps }}</span></el-dropdown-item>
-                        </el-dropdown-menu>
-                      </el-dropdown>
-                    </el-input>
-                  </el-form-item>
-                </el-form>
-              </div>
             </el-tab-pane>
             <el-tab-pane label="编码信息" name="codec">
               <mediaInfo v-if="tabActiveName === 'codec'" ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
@@ -105,11 +56,12 @@ import playerTabs from '../../common/playerTabs.vue'
 import devicePtzPanel from '../common/devicePtzPanel.vue'
 import PtzPreset from '../../common/ptzPreset.vue'
 import mediaInfo from '../../common/mediaInfo.vue'
+import streamMediaPanel from '../../common/streamMediaPanel.vue'
 
 export default {
   name: 'DevicePlayer',
   directives: { elDragDialog },
-  components: { playerTabs, devicePtzPanel, PtzPreset, mediaInfo },
+  components: { playerTabs, devicePtzPanel, PtzPreset, mediaInfo, streamMediaPanel },
   props: {},
   data() {
     return {
@@ -132,13 +84,6 @@ export default {
       dragZoomDirection: ''
     }
   },
-  computed: {
-    sharedIframe: function(){
-      return `<iframe src="${this.playerUrlInfo.playerUrl}"></iframe>`
-    }
-  },
-  created() {
-  },
   methods: {
     tabHandleClick: function(tab) {
       if (tab.name === 'codec') {
@@ -184,12 +129,6 @@ export default {
       this.videoUrl = ''
       this.showVideoDialog = false
     },
-    copyUrl: function(dropdownItem) {
-      this.$copyText(dropdownItem).then(() => {
-        this.$message.success({ showClose: true, message: '成功拷贝到粘贴板' })
-      }, () => {})
-    },
-
     toggleDragZoom(direction) {
       this.dragZoomDirection = direction
       this.$refs.playerTabs.startDragZoom((params) => {

web/src/views/jtDevice/common/jtDevicePtzPanel.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="ptz-section">
+    <ptzControls
+      btn-layout="row"
+      :show-diagonals="false"
+      @ptz-move="onPtzMove"
+      @ptz-stop="onPtzStop"
+      @focus-move="onFocusMove"
+      @focus-stop="onFocusStop"
+      @iris-move="onIrisMove"
+      @iris-stop="onIrisStop"
+    />
+  </div>
+</template>
+
+<script>
+import ptzControls from '../../common/ptzControls.vue'
+
+export default {
+  name: 'JtDevicePtzPanel',
+  components: { ptzControls },
+  props: {
+    deviceId: { type: String, default: null },
+    channelId: { type: String, default: null }
+  },
+  methods: {
+    onPtzMove(e) {
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: e.direction,
+        speed: e.speed
+      })
+    },
+    onPtzStop() {
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: 'stop',
+        speed: 0
+      })
+    },
+    onFocusMove(e) {
+      const command = e.command === 'near' ? 'focusnear' : 'focusfar'
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: command,
+        speed: e.speed
+      })
+    },
+    onFocusStop() {
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: 'stop',
+        speed: 0
+      })
+    },
+    onIrisMove(e) {
+      const command = e.command === 'in' ? 'irisin' : 'irisout'
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: command,
+        speed: e.speed
+      })
+    },
+    onIrisStop() {
+      this.$store.dispatch('jtDevice/ptz', {
+        phoneNumber: this.deviceId,
+        channelId: this.channelId,
+        command: 'stop',
+        speed: 0
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ptz-section {
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+</style>

web/src/views/jtDevice/dialog/jtDevicePlayer.vue

@@ -1,292 +1,46 @@
 <template>
   <div id="devicePlayer" v-loading="isLoging">
-
     <el-dialog
       v-if="showVideoDialog"
       v-el-drag-dialog
       title="视频播放"
-      top="0"
+      top="10vh"
+      width="65vw"
       :close-on-click-modal="false"
       :visible.sync="showVideoDialog"
       @close="close()"
     >
-      <div style="width: 100%; height: 100%">
+      <div class="dhsdk-player-body">
-        <el-tabs
-          v-if="Object.keys(this.player).length > 1"
-          v-model="activePlayer"
-          type="card"
-          :stretch="true"
-          @tab-click="changePlayer"
-        >
-          <el-tab-pane label="Jessibuca" name="jessibuca">
-            <jessibucaPlayer
-              style="min-height: 22.5vw"
-              v-if="activePlayer === 'jessibuca'"
-              ref="jessibuca"
-              :visible.sync="showVideoDialog"
-              :error="videoError"
-              :message="videoError"
-              :has-audio="hasAudio"
-              fluent
-              autoplay
-              live
-            />
-          </el-tab-pane>
-          <el-tab-pane label="WebRTC" name="webRTC">
-            <rtc-player
-              v-if="activePlayer === 'webRTC'"
-              ref="webRTC"
-              :visible.sync="showVideoDialog"
-              :error="videoError"
-              :message="videoError"
-              height="100px"
-              :has-audio="hasAudio"
-              fluent
-              autoplay
-              live
-            />
-          </el-tab-pane>
-          <el-tab-pane label="h265web" name="h265web">
-            <h265web
-              v-if="activePlayer === 'h265web'"
-              ref="h265web"
-              :error="videoError"
-              :message="videoError"
-              :has-audio="hasAudio"
-              fluent
-              autoplay
-              live
-              :show-button="true"
-            />
 
-          </el-tab-pane>
+        <div class="player-side">
-        </el-tabs>
+          <div class="player-container" :style="{ height: playerHeight }">
+            <playerTabs ref="playerTabs" :has-audio="hasAudio" :show-button="true"
+              @playerChanged="playerChanged" />
+          </div>
         </div>
-      <div id="shared" style="text-align: right; margin-top: 1rem;">
 
-        <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
+        <div class="control-side">
+          <jtDevicePtzPanel v-if="showPtz" :device-id="deviceId" :channel-id="channelId" />
+          <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick" class="control-tabs">
             <el-tab-pane label="实时视频" name="media">
-            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+              <streamMediaPanel v-if="tabActiveName === 'media'" :player-url="playerUrlInfo.playerUrl" :play-url="playerUrlInfo.playUrl" :stream-info="streamInfo" />
-              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
-              <el-input v-model="getPlayerShared.sharedUrl" :disabled="true">
-                <template slot="append">
-                  <i
-                    class="cpoy-btn el-icon-document-copy"
-                    title="点击拷贝"
-                    style="cursor: pointer"
-                    @click="copyUrl(getPlayerShared.sharedUrl)"
-                  />
-                </template>
-              </el-input>
-            </div>
-            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
-              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
-              <el-input v-model="getPlayerShared.sharedIframe" :disabled="true">
-                <template slot="append">
-                  <i
-                    class="cpoy-btn el-icon-document-copy"
-                    title="点击拷贝"
-                    style="cursor: pointer"
-                    @click="copyUrl(getPlayerShared.sharedIframe)"
-                  />
-                </template>
-              </el-input>
-            </div>
-            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
-              <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
-              <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true">
-                <el-button
-                  slot="append"
-                  icon="el-icon-document-copy"
-                  title="点击拷贝"
-                  style="cursor: pointer"
-                  @click="copyUrl(getPlayerShared.sharedIframe)"
-                />
-                <el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
-                  <el-button>
-                    更多地址<i class="el-icon-arrow-down el-icon--right" />
-                  </el-button>
-                  <el-dropdown-menu>
-                    <el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv">
-                      <el-tag>FLV:</el-tag>
-                      <span>{{ streamInfo.flv }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.https_flv" :command="streamInfo.https_flv">
-                      <el-tag>FLV(https):</el-tag>
-                      <span>{{ streamInfo.https_flv }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.ws_flv" :command="streamInfo.ws_flv">
-                      <el-tag>FLV(ws):</el-tag>
-                      <span>{{ streamInfo.ws_flv }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.wss_flv" :command="streamInfo.wss_flv">
-                      <el-tag>FLV(wss):</el-tag>
-                      <span>{{ streamInfo.wss_flv }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.fmp4" :command="streamInfo.fmp4">
-                      <el-tag>FMP4:</el-tag>
-                      <span>{{ streamInfo.fmp4 }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.https_fmp4" :command="streamInfo.https_fmp4">
-                      <el-tag>FMP4(https):</el-tag>
-                      <span>{{ streamInfo.https_fmp4 }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.ws_fmp4" :command="streamInfo.ws_fmp4">
-                      <el-tag>FMP4(ws):</el-tag>
-                      <span>{{ streamInfo.ws_fmp4 }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.wss_fmp4" :command="streamInfo.wss_fmp4">
-                      <el-tag>FMP4(wss):</el-tag>
-                      <span>{{ streamInfo.wss_fmp4 }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.hls" :command="streamInfo.hls">
-                      <el-tag>HLS:</el-tag>
-                      <span>{{ streamInfo.hls }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.https_hls" :command="streamInfo.https_hls">
-                      <el-tag>HLS(https):</el-tag>
-                      <span>{{ streamInfo.https_hls }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.ws_hls" :command="streamInfo.ws_hls">
-                      <el-tag>HLS(ws):</el-tag>
-                      <span>{{ streamInfo.ws_hls }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.wss_hls" :command="streamInfo.wss_hls">
-                      <el-tag>HLS(wss):</el-tag>
-                      <span>{{ streamInfo.wss_hls }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.ts" :command="streamInfo.ts">
-                      <el-tag>TS:</el-tag>
-                      <span>{{ streamInfo.ts }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.https_ts" :command="streamInfo.https_ts">
-                      <el-tag>TS(https):</el-tag>
-                      <span>{{ streamInfo.https_ts }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.ws_ts" :command="streamInfo.ws_ts">
-                      <el-tag>TS(ws):</el-tag>
-                      <span>{{ streamInfo.ws_ts }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.wss_ts" :command="streamInfo.wss_ts">
-                      <el-tag>TS(wss):</el-tag>
-                      <span>{{ streamInfo.wss_ts }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtc" :command="streamInfo.rtc">
-                      <el-tag>RTC:</el-tag>
-                      <span>{{ streamInfo.rtc }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtcs" :command="streamInfo.rtcs">
-                      <el-tag>RTCS:</el-tag>
-                      <span>{{ streamInfo.rtcs }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtmp" :command="streamInfo.rtmp">
-                      <el-tag>RTMP:</el-tag>
-                      <span>{{ streamInfo.rtmp }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtmps" :command="streamInfo.rtmps">
-                      <el-tag>RTMPS:</el-tag>
-                      <span>{{ streamInfo.rtmps }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtsp" :command="streamInfo.rtsp">
-                      <el-tag>RTSP:</el-tag>
-                      <span>{{ streamInfo.rtsp }}</span>
-                    </el-dropdown-item>
-                    <el-dropdown-item v-if="streamInfo.rtsps" :command="streamInfo.rtsps">
-                      <el-tag>RTSPS:</el-tag>
-                      <span>{{ streamInfo.rtsps }}</span>
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </el-input>
-
-            </div>
-          </el-tab-pane>
-          <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
-          <!--遥控界面-->
-          <el-tab-pane v-if="showPtz" label="云台控制" name="control">
-            <div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto">
-              <div style="display: grid; grid-template-columns: 6.25rem auto;">
-
-                <div class="control-wrapper">
-                  <div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
-                    <i class="el-icon-caret-top" />
-                    <div class="control-inner-btn control-inner" />
-                  </div>
-                  <div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
-                    <i class="el-icon-caret-left" />
-                    <div class="control-inner-btn control-inner" />
-                  </div>
-                  <div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
-                    <i class="el-icon-caret-bottom" />
-                    <div class="control-inner-btn control-inner" />
-                  </div>
-                  <div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
-                    <i class="el-icon-caret-right" />
-                    <div class="control-inner-btn control-inner" />
-                  </div>
-                  <div class="control-round">
-                    <div class="control-round-inner"><i class="fa fa-pause-circle" /></div>
-                  </div>
-                  <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;">
-                    <el-slider v-model="controSpeed" :max="100" />
-                  </div>
-                </div>
-                <div>
-                  <div class="ptz-btn-box">
-                    <div style="" title="变倍+" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
-                      <i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                    <div style="" title="变倍-" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
-                      <i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                  </div>
-                  <div class="ptz-btn-box">
-                    <div title="聚焦+" @mousedown="ptzCamera('focusnear')" @mouseup="ptzCamera('stop')">
-                      <i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                    <div title="聚焦-" @mousedown="ptzCamera('focusfar')" @mouseup="ptzCamera('stop')">
-                      <i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                  </div>
-                  <div class="ptz-btn-box">
-                    <div title="光圈+" @mousedown="ptzCamera('irisin')" @mouseup="ptzCamera('stop')">
-                      <i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                    <div title="光圈-" @mousedown="ptzCamera('irisout')" @mouseup="ptzCamera('stop')">
-                      <i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div style="text-align: left">
-                <div style="width: 100%; display: grid; grid-template-rows: 1fr 1fr; grid-row-gap: 10px">
-                  <el-button-group>
-                    <el-button size="mini" @click="wiper('on')">开启雨刷
-                    </el-button>
-                    <el-button size="mini" @click="wiper('off')">关闭雨刷
-                    </el-button>
-                  </el-button-group>
-                  <el-button-group>
-                    <el-button size="mini" @click="fillLight('on')">开补光灯
-                    </el-button>
-                    <el-button size="mini" @click="fillLight('off')">关补光灯
-                    </el-button>
-                  </el-button-group>
-                </div>
-
-              </div>
-            </div>
             </el-tab-pane>
             <el-tab-pane label="编码信息" name="codec">
-            <mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
+              <mediaInfo v-if="tabActiveName === 'codec'" ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
+            </el-tab-pane>
+            <el-tab-pane label="辅助开关" name="switch">
+              <div style="display: flex; gap: 12px; justify-content: center; margin-top: 16px;">
+                <el-button-group>
+                  <el-button size="small" type="primary" @click="wiper('on')">开启雨刷</el-button>
+                  <el-button size="small" @click="wiper('off')">关闭雨刷</el-button>
+                </el-button-group>
+                <el-button-group>
+                  <el-button size="small" type="primary" @click="fillLight('on')">开补光灯</el-button>
+                  <el-button size="small" @click="fillLight('off')">关补光灯</el-button>
+                </el-button-group>
+              </div>
             </el-tab-pane>
             <el-tab-pane label="语音对讲" name="broadcast">
-<!--            <div style="padding: 0 10px">-->
-<!--              <el-radio-group v-model="broadcastMode" :disabled="broadcastStatus !== -1">-->
-<!--                <el-radio :label="2">双向对讲</el-radio>-->
-<!--                <el-radio :label="4">中心广播</el-radio>-->
-<!--              </el-radio-group>-->
-<!--            </div>-->
               <div class="trank" style="text-align: center; width: 100%;">
                 <el-button
                   :type="getBroadcastStatus()"
@@ -302,43 +56,32 @@
                   <span v-if="broadcastStatus === 0">等待接通中...</span>
                   <span v-if="broadcastStatus === 1">请说话</span>
                 </p>
-
               </div>
             </el-tab-pane>
-
           </el-tabs>
         </div>
+
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import rtcPlayer from '../../common/rtcPlayer.vue'
+import playerTabs from '../../common/playerTabs.vue'
+import streamMediaPanel from '../../common/streamMediaPanel.vue'
+import jtDevicePtzPanel from '../common/jtDevicePtzPanel.vue'
 import elDragDialog from '@/directive/el-drag-dialog'
 import crypto from 'crypto'
-import jessibucaPlayer from '../../common/jessibuca.vue'
 import mediaInfo from '../../common/mediaInfo.vue'
-import H265web from '../../common/h265web.vue'
 
 export default {
-  name: 'DevicePlayer',
+  name: 'JtDevicePlayer',
   directives: { elDragDialog },
-  components: {
+  components: { playerTabs, streamMediaPanel, jtDevicePtzPanel, mediaInfo },
-    mediaInfo, H265web,
-    jessibucaPlayer, rtcPlayer
-  },
   props: {},
   data() {
     return {
-      video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
       videoUrl: '',
-      activePlayer: 'jessibuca',
-      // 如何你只是用一种播放器，直接注释掉不用的部分即可
-      player: {
-        jessibuca: ['ws_flv', 'wss_flv'],
-        webRTC: ['rtc', 'rtcs'],
-        h265web: ['ws_flv', 'wss_flv']
-      },
       showVideoDialog: false,
       streamId: '',
       app: '',
@@ -347,211 +90,97 @@ export default {
       channelId: '',
       tabActiveName: 'media',
       hasAudio: false,
-      loadingRecords: false,
-      recordsLoading: false,
       isLoging: false,
-      controSpeed: 30,
-      timeVal: 0,
-      timeMin: 0,
-      timeMax: 1440,
-      presetPos: 1,
-      cruisingSpeed: 100,
-      cruisingTime: 5,
-      cruisingGroup: 0,
-      scanSpeed: 100,
-      scanGroup: 0,
-      tracks: [],
       showPtz: true,
-      showRrecord: true,
-      tracksNotLoaded: false,
-      sliderTime: 0,
-      seekTime: 0,
-      recordStartTime: 0,
-      showTimeText: '00:00:00',
       streamInfo: null,
-      broadcastMode: true,
+      playerHeight: '48vh',
+      playerUrlInfo: {
+        playerUrl: null,
+        playUrl: null
+      },
       broadcastRtc: null,
-      broadcastStatus: -1 // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功
+      broadcastStatus: -1
-    }
-  },
-  computed: {
-    getPlayerShared: function() {
-      const typeMap = { jessibuca: 0, webRTC: 1, h265web: 2 }
-      const type = typeMap[this.activePlayer] || 0
-      const baseUrl = window.location.origin + '/#/play/share?type=' + type + '&url=' + encodeURIComponent(this.videoUrl)
-      return {
-        sharedUrl: baseUrl,
-        sharedIframe: '<iframe src="' + baseUrl + '"></iframe>',
-        sharedRtmp: this.videoUrl
-      }
-    }
-  },
-  created() {
-    this.broadcastStatus = -1
-    if (Object.keys(this.player).length === 1) {
-      this.activePlayer = Object.keys(this.player)[0]
     }
   },
   methods: {
-    tabHandleClick: function(tab, event) {
+    tabHandleClick(tab) {
-      console.log(tab)
-      this.tracks = []
       if (tab.name === 'codec') {
-        this.$refs.mediaInfo.startTask()
+        this.$refs.mediaInfo && this.$refs.mediaInfo.startTask()
       } else {
-        this.$refs.mediaInfo.stopTask()
+        this.$refs.mediaInfo && this.$refs.mediaInfo.stopTask()
       }
     },
-    changePlayer: function(tab) {
+    openDialog(tab, deviceId, channelId, param) {
-      this.activePlayer = tab.name
+      if (this.showVideoDialog) return
-      this.videoUrl = this.getUrlByStreamInfo()
+      this.tabActiveName = tab || 'media'
-      if (this.$refs[this.activePlayer]) {
+      if (tab === 'streamPlay') {
-        this.$refs[this.activePlayer].play(this.videoUrl)
+        this.showPtz = false
+        this.tabActiveName = 'media'
       } else {
-        this.$nextTick(() => {
+        this.showPtz = true
-          this.$refs[this.activePlayer].play(this.videoUrl)
-        })
       }
-    },
-    openDialog: function(tab, deviceId, channelId, param) {
-      if (this.showVideoDialog) {
-        return
-      }
-      this.tabActiveName = tab
-      this.channelId = channelId
       this.deviceId = deviceId
+      this.channelId = channelId
       this.streamId = ''
       this.mediaServerId = ''
       this.app = ''
       this.videoUrl = ''
-      if (this.$refs[this.activePlayer]) {
+      if (param && param.streamInfo) {
-        this.$refs[this.activePlayer].pause()
-      }
-      switch (tab) {
-        case 'media':
         this.play(param.streamInfo, param.hasAudio)
-          break
-        case 'streamPlay':
-          this.tabActiveName = 'media'
-          this.showRrecord = false
-          this.showPtz = false
-          this.play(param.streamInfo, param.hasAudio)
-          break
-        case 'control':
-          break
       }
     },
-    play: function(streamInfo, hasAudio) {
+    play(streamInfo, hasAudio) {
       this.streamInfo = streamInfo
       this.hasAudio = hasAudio
       this.isLoging = false
-      this.videoUrl = this.getUrlByStreamInfo()
       this.streamId = streamInfo.stream
       this.app = streamInfo.app
       this.mediaServerId = streamInfo.mediaServerId
-      this.playFromStreamInfo(false, streamInfo)
-    },
-    getUrlByStreamInfo() {
-      let streamInfo = this.streamInfo
-      if (this.streamInfo.transcodeStream) {
-        streamInfo = this.streamInfo.transcodeStream
-      }
-      if (location.protocol === 'https:') {
-        this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
-      } else {
-        this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
-      }
-      return this.videoUrl
-    },
-
-    playFromStreamInfo: function(realHasAudio, streamInfo) {
       this.showVideoDialog = true
-      this.hasaudio = realHasAudio && this.hasaudio
-      if (this.$refs[this.activePlayer]) {
-        this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
-      } else {
       this.$nextTick(() => {
-          this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
+        if (this.$refs.playerTabs) {
-        })
+          this.$refs.playerTabs.setStreamInfo(streamInfo.transcodeStream || streamInfo)
         }
+      })
     },
-    close: function() {
+    playerChanged(playerUrlInfo) {
-      console.log('关闭视频')
+      this.playerUrlInfo = playerUrlInfo
-      if (this.$refs[this.activePlayer]) {
+    },
-        this.$refs[this.activePlayer].pause()
+    close() {
+      if (this.$refs.playerTabs) {
+        this.$refs.playerTabs.stop()
       }
       this.videoUrl = ''
       this.showVideoDialog = false
       this.stopBroadcast()
     },
-    ptzCamera: function(command) {
+    wiper(command) {
-      console.log('云台控制：' + command)
-      this.$store.dispatch('jtDevice/ptz', {
-        phoneNumber: this.deviceId,
-        channelId: this.channelId,
-        command: command,
-        speed: this.controSpeed
-      })
-        .catch(e => {
-          console.log(e)
-        })
-    },
-    wiper: function(command) {
-      console.log('雨刷控制：' + command)
       this.$store.dispatch('jtDevice/wiper', {
         phoneNumber: this.deviceId,
         channelId: this.channelId,
         command: command
-      })
+      }).catch(e => {
-        .catch(e => {
         console.log(e)
       })
     },
-    fillLight: function(command) {
+    fillLight(command) {
-      console.log('补光灯开关控制：' + command)
       this.$store.dispatch('jtDevice/fillLight', {
         phoneNumber: this.deviceId,
         channelId: this.channelId,
         command: command
-      })
+      }).catch(e => {
-        .catch(e => {
         console.log(e)
       })
     },
-    // ////////////////////播放器事件处理//////////////////////////
-    videoError: function(e) {
-      console.log('播放器错误：' + JSON.stringify(e))
-    },
-    copyUrl: function(dropdownItem) {
-      console.log(dropdownItem)
-      this.$copyText(dropdownItem).then((e) => {
-        this.$message.success({
-          showClose: true,
-          message: '成功拷贝到粘贴板'
-        })
-      }, (e) => {
-
-      })
-    },
     getBroadcastStatus() {
-      if (this.broadcastStatus === -2) {
+      if (this.broadcastStatus === -2) return 'primary'
-        return 'primary'
+      if (this.broadcastStatus === -1) return 'primary'
-      }
+      if (this.broadcastStatus === 0) return 'warning'
-      if (this.broadcastStatus === -1) {
+      if (this.broadcastStatus === 1) return 'danger'
-        return 'primary'
-      }
-      if (this.broadcastStatus === 0) {
-        return 'warning'
-      }
-      if (this.broadcastStatus === 1) {
-        return 'danger'
-      }
     },
     broadcastStatusClick() {
       if (this.broadcastStatus === -1) {
-        // 默认状态， 开始
         this.broadcastStatus = 0
-        // 发起语音对讲
         this.$store.dispatch('jtDevice/startTalk', {
           phoneNumber: this.deviceId,
           channelId: this.channelId
@@ -568,11 +197,12 @@ export default {
         })
       } else if (this.broadcastStatus === 1) {
         this.broadcastStatus = -1
+        if (this.broadcastRtc) {
           this.broadcastRtc.close()
         }
+      }
     },
     startBroadcast(url) {
-      // 获取推流鉴权Key
       this.$store.dispatch('user/getUserInfo')
         .then((data) => {
           if (data === null) {
@@ -580,12 +210,11 @@ export default {
             return
           }
           const pushKey = data.pushKey
-          // 获取推流鉴权KEY
           url += '&sign=' + crypto.createHash('md5').update(pushKey, 'utf8').digest('hex')
           console.log('开始语音喊话： ' + url)
           this.broadcastRtc = new ZLMRTCClient.Endpoint({
-            debug: true, // 是否打印日志
+            debug: true,
-            zlmsdpUrl: url, // 流地址
+            zlmsdpUrl: url,
             simulecast: false,
             useCamera: false,
             audioEnable: true,
@@ -593,36 +222,25 @@ export default {
             recvOnly: false
           })
 
-          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => { // 获取到了本地流
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => {
             console.error('不支持webrtc', e)
-            this.$message({
+            this.$message({ showClose: true, message: '不支持webrtc, 无法进行语音喊话', type: 'error' })
-              showClose: true,
-              message: '不支持webrtc, 无法进行语音喊话',
-              type: 'error'
-            })
             this.broadcastStatus = -1
           })
 
-          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => { // ICE 协商出错
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {
             console.error('ICE 协商出错')
-            this.$message({
+            this.$message({ showClose: true, message: 'ICE 协商出错', type: 'error' })
-              showClose: true,
-              message: 'ICE 协商出错',
-              type: 'error'
-            })
             this.broadcastStatus = -1
           })
 
-          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => { // offer anwser 交换失败
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {
             console.error('offer anwser 交换失败', e)
-            this.$message({
+            this.$message({ showClose: true, message: 'offer anwser 交换失败' + e, type: 'error' })
-              showClose: true,
-              message: 'offer anwser 交换失败' + e,
-              type: 'error'
-            })
             this.broadcastStatus = -1
           })
-          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => { // offer anwser 交换失败
+
+          this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => {
             console.log('状态改变', e)
             if (e === 'connecting') {
               this.broadcastStatus = 0
@@ -632,26 +250,21 @@ export default {
               this.broadcastStatus = -1
             }
           })
-          this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => { // offer anwser 交换失败
+
+          this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => {
             console.log('捕获流失败', e)
-            this.$message({
+            this.$message({ showClose: true, message: '捕获流失败' + e, type: 'error' })
-              showClose: true,
-              message: '捕获流失败' + e,
-              type: 'error'
-            })
             this.broadcastStatus = -1
           })
         }).catch(e => {
-          this.$message({
+          this.$message({ showClose: true, message: e, type: 'error' })
-            showClose: true,
-            message: e,
-            type: 'error'
-          })
           this.broadcastStatus = -1
         })
     },
     stopBroadcast() {
+      if (this.broadcastRtc) {
         this.broadcastRtc.close()
+      }
       this.broadcastStatus = -1
       this.$store.dispatch('jtDevice/stopTalk', {
         phoneNumber: this.deviceId,
@@ -663,183 +276,16 @@ export default {
 </script>
 
 <style>
-.control-wrapper {
+#devicePlayer .el-dialog__body { padding: 10px 20px; }
-  position: relative;
+.dhsdk-player-body { display: flex; gap: 16px; }
-  width: 6.25rem;
+.player-side { flex: 3; min-width: 0; }
-  height: 6.25rem;
+.player-container { width: 100%; }
-  max-width: 6.25rem;
+.control-side { flex: 2; min-width: 340px; display: flex; flex-direction: column; }
-  max-height: 6.25rem;
+.control-tabs { flex: 1; display: flex; flex-direction: column; min-height: 220px }
-  border-radius: 100%;
+.control-tabs .el-tabs__content { flex: 1; overflow: auto; }
-  margin-top: 1.5rem;
+.media-info-content { overflow: auto; }
-  margin-left: 0.5rem;
+.media-row { display: flex; margin-bottom: 0.5rem; height: 2.5rem; }
-  float: left;
+.media-label { width: 6rem; line-height: 2.5rem; text-align: right; flex-shrink: 0; }
-}
-
-.control-panel {
-  position: relative;
-  top: 0;
-  left: 5rem;
-  height: 11rem;
-  max-height: 11rem;
-}
-
-.control-btn {
-  display: flex;
-  justify-content: center;
-  position: absolute;
-  width: 44%;
-  height: 44%;
-  border-radius: 5px;
-  border: 1px solid #78aee4;
-  box-sizing: border-box;
-  transition: all 0.3s linear;
-}
-
-.control-btn:hover {
-  cursor: pointer
-}
-
-.control-btn i {
-  font-size: 20px;
-  color: #78aee4;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.control-btn i:hover {
-  cursor: pointer
-}
-
-.control-zoom-btn:hover {
-  cursor: pointer
-}
-
-.control-round {
-  position: absolute;
-  top: 21%;
-  left: 21%;
-  width: 58%;
-  height: 58%;
-  background: #fff;
-  border-radius: 100%;
-}
-
-.control-round-inner {
-  position: absolute;
-  left: 13%;
-  top: 13%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 70%;
-  height: 70%;
-  font-size: 40px;
-  color: #78aee4;
-  border: 1px solid #78aee4;
-  border-radius: 100%;
-  transition: all 0.3s linear;
-}
-
-.control-inner-btn {
-  position: absolute;
-  width: 60%;
-  height: 60%;
-  background: #fafafa;
-}
-
-.control-top {
-  top: -8%;
-  left: 27%;
-  transform: rotate(-45deg);
-  border-radius: 5px 100% 5px 0;
-}
-
-.control-top i {
-  transform: rotate(45deg);
-  border-radius: 5px 100% 5px 0;
-}
-
-.control-top .control-inner {
-  left: -1px;
-  bottom: 0;
-  border-top: 1px solid #78aee4;
-  border-right: 1px solid #78aee4;
-  border-radius: 0 100% 0 0;
-}
-
-.control-top .fa {
-  transform: rotate(45deg) translateY(-7px);
-}
-
-.control-left {
-  top: 27%;
-  left: -8%;
-  transform: rotate(45deg);
-  border-radius: 5px 0 5px 100%;
-}
-
-.control-left i {
-  transform: rotate(-45deg);
-}
-
-.control-left .control-inner {
-  right: -1px;
-  top: -1px;
-  border-bottom: 1px solid #78aee4;
-  border-left: 1px solid #78aee4;
-  border-radius: 0 0 0 100%;
-}
-
-.control-left .fa {
-  transform: rotate(-45deg) translateX(-7px);
-}
-
-.control-right {
-  top: 27%;
-  right: -8%;
-  transform: rotate(45deg);
-  border-radius: 5px 100% 5px 0;
-}
-
-.control-right i {
-  transform: rotate(-45deg);
-}
-
-.control-right .control-inner {
-  left: -1px;
-  bottom: -1px;
-  border-top: 1px solid #78aee4;
-  border-right: 1px solid #78aee4;
-  border-radius: 0 100% 0 0;
-}
-
-.control-right .fa {
-  transform: rotate(-45deg) translateX(7px);
-}
-
-.control-bottom {
-  left: 27%;
-  bottom: -8%;
-  transform: rotate(45deg);
-  border-radius: 0 5px 100% 5px;
-}
-
-.control-bottom i {
-  transform: rotate(-45deg);
-}
-
-.control-bottom .control-inner {
-  top: -1px;
-  left: -1px;
-  border-bottom: 1px solid #78aee4;
-  border-right: 1px solid #78aee4;
-  border-radius: 0 0 100% 0;
-}
-
-.control-bottom .fa {
-  transform: rotate(-45deg) translateY(7px);
-}
 
 .trank {
   width: 80%;
@@ -853,14 +299,5 @@ export default {
   width: 80%;
   padding: 0 10%;
 }
-.el-dialog__body{
+
-  padding: 10px 20px;
-}
-.ptz-btn-box {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding: 0 2rem;
-  height: 3rem;
-  line-height: 4rem;
-}
 </style>

web/src/views/streamProxy/index.vue

@@ -49,7 +49,7 @@
           <el-button icon="el-icon-refresh-right" circle @click="refresh()" />
         </el-form-item>
       </el-form>
-      <devicePlayer ref="devicePlayer" />
+      <streamProxyPlayer ref="streamProxyPlayer" />
       <el-table size="small" :data="streamProxyList" style="width: 100%" height="calc(100% - 64px)">
         <el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip />
         <el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip />
@@ -124,14 +124,14 @@
 </template>
 
 <script>
-import devicePlayer from '../device/dialog/devicePlayer.vue'
+import streamProxyPlayer from './player.vue'
 import StreamProxyEdit from './edit.vue'
 import Vue from 'vue'
 
 export default {
   name: 'Proxy',
   components: {
-    devicePlayer,
+    streamProxyPlayer,
     StreamProxyEdit
   },
   data() {
@@ -237,10 +237,7 @@ export default {
       row.playLoading = true
       this.$store.dispatch('streamProxy/play', row.id)
         .then((data) => {
-          this.$refs.devicePlayer.openDialog('streamPlay', null, null, {
+          this.$refs.streamProxyPlayer.openDialog(data, true)
-            streamInfo: data,
-            hasAudio: true
-          })
         })
         .catch((error) => {
           this.$message({

web/src/views/streamProxy/player.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="streamPushPlayer" v-loading="isLoging">
+    <el-dialog
+      v-if="showVideoDialog"
+      v-el-drag-dialog
+      title="视频播放"
+      top="5vh"
+      width="70vw"
+      :close-on-click-modal="false"
+      :visible.sync="showVideoDialog"
+      @close="close()"
+    >
+      <div class="push-player-body">
+        <div class="player-side">
+          <div class="player-container">
+            <playerTabs ref="playerTabs" :has-audio="hasAudio" :show-button="true"
+              @playerChanged="playerChanged" />
+          </div>
+        </div>
+
+        <div class="control-side">
+          <div class="info-card info-card--fill">
+            <div class="info-card__title">编码信息</div>
+            <div class="info-card__body">
+              <mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
+            </div>
+          </div>
+          <div class="info-card info-card--bottom">
+            <streamMediaPanel :player-url="playerUrlInfo.playerUrl" :play-url="playerUrlInfo.playUrl" :stream-info="streamInfo" />
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-drag-dialog'
+import playerTabs from '../common/playerTabs.vue'
+import mediaInfo from '../common/mediaInfo.vue'
+import streamMediaPanel from '../common/streamMediaPanel.vue'
+
+export default {
+  name: 'StreamPushPlayer',
+  directives: { elDragDialog },
+  components: { playerTabs, mediaInfo, streamMediaPanel },
+  props: {},
+  data() {
+    return {
+      videoUrl: '',
+      streamId: '',
+      app: '',
+      mediaServerId: '',
+      hasAudio: false,
+      isLoging: false,
+      showVideoDialog: false,
+      streamInfo: null,
+      playerHeight: '48vh',
+      playerUrlInfo: {
+        playerUrl: null,
+        playUrl: null,
+      }
+    }
+  },
+  methods: {
+    openDialog: function(streamInfo, hasAudio) {
+      if (this.showVideoDialog) return
+      this.tabActiveName = 'media'
+      this.streamId = ''
+      this.mediaServerId = ''
+      this.app = ''
+      this.videoUrl = ''
+      if (streamInfo) {
+        this.play(streamInfo, hasAudio)
+      }
+    },
+    play: function(streamInfo, hasAudio) {
+      this.streamInfo = streamInfo
+      this.hasAudio = hasAudio
+      this.isLoging = false
+      this.streamId = streamInfo.stream
+      this.app = streamInfo.app
+      this.mediaServerId = streamInfo.mediaServerId
+      this.showVideoDialog = true
+      this.$nextTick(() => {
+        if (this.$refs.playerTabs) {
+          this.$refs.playerTabs.setStreamInfo(streamInfo.transcodeStream || streamInfo)
+        }
+        this.$refs.mediaInfo && this.$refs.mediaInfo.startTask()
+      })
+    },
+    playerChanged: function(playerUrlInfo) {
+      this.playerUrlInfo = playerUrlInfo
+    },
+    close: function() {
+      if (this.$refs.playerTabs) {
+        this.$refs.playerTabs.stop()
+      }
+      this.$refs.mediaInfo && this.$refs.mediaInfo.stopTask()
+      this.videoUrl = ''
+      this.showVideoDialog = false
+    },
+  }
+}
+</script>
+
+<style>
+#streamPushPlayer .el-dialog__body { padding: 12px 20px; }
+.push-player-body { display: flex; gap: 16px; height: 100%; }
+.player-side { flex: 3; min-width: 0; }
+.player-container { width: 100%; height: calc(75vh - 80px); }
+.control-side { flex: 2; min-width: 340px; display: flex; flex-direction: column; overflow-y: auto; }
+.info-card { border-radius: 6px; padding: 12px; border: 1px solid #e8eaed; }
+.info-card__title { font-size: 18px; font-weight: 600; color: #303133; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e8eaed;text-align: center; }
+.info-card--fill { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.info-card--fill .info-card__body { flex: 1; overflow: auto; }
+.info-card--bottom { flex-shrink: 0; margin-top: auto; }
+.info-card .media-info-content { margin: -4px; }
+</style>

web/src/views/streamPush/index.vue

@@ -140,7 +140,7 @@
         @current-change="currentChange"
       />
     </div>
-    <devicePlayer ref="devicePlayer" />
+    <streamPushPlayer ref="streamPushPlayer" />
     <addStreamTOGB ref="addStreamTOGB" />
     <importChannel ref="importChannel" />
     <stream-push-edit v-if="streamPush" :stream-push="streamPush" :close-edit="closeEdit" />
@@ -149,7 +149,7 @@
 </template>
 
 <script>
-import devicePlayer from '../device/dialog/devicePlayer.vue'
+import streamPushPlayer from './player.vue'
 import addStreamTOGB from '../dialog/pushStreamEdit.vue'
 import importChannel from '../dialog/importChannel.vue'
 import StreamPushEdit from './edit.vue'
@@ -159,7 +159,7 @@ export default {
   name: 'PushList',
   components: {
     StreamPushEdit,
-    devicePlayer,
+    streamPushPlayer,
     addStreamTOGB,
     importChannel,
     buildPushStreamUrl
@@ -244,10 +244,7 @@ export default {
       row.playLoading = true
       this.$store.dispatch('streamPush/play', row.id)
         .then((data) => {
-          this.$refs.devicePlayer.openDialog('streamPlay', null, null, {
+          this.$refs.streamPushPlayer.openDialog(data, true)
-            streamInfo: data,
-            hasAudio: true
-          })
         })
         .catch((error) => {
           this.$message({

web/src/views/streamPush/player.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="streamPushPlayer" v-loading="isLoging">
+    <el-dialog
+      v-if="showVideoDialog"
+      v-el-drag-dialog
+      title="视频播放"
+      top="5vh"
+      width="70vw"
+      :close-on-click-modal="false"
+      :visible.sync="showVideoDialog"
+      @close="close()"
+    >
+      <div class="push-player-body">
+        <div class="player-side">
+          <div class="player-container">
+            <playerTabs ref="playerTabs" :has-audio="hasAudio" :show-button="true"
+              @playerChanged="playerChanged" />
+          </div>
+        </div>
+
+        <div class="control-side">
+          <div class="info-card info-card--fill">
+            <div class="info-card__title">编码信息</div>
+            <div class="info-card__body">
+              <mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
+            </div>
+          </div>
+          <div class="info-card info-card--bottom">
+            <streamMediaPanel :player-url="playerUrlInfo.playerUrl" :play-url="playerUrlInfo.playUrl" :stream-info="streamInfo" />
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from '@/directive/el-drag-dialog'
+import playerTabs from '../common/playerTabs.vue'
+import mediaInfo from '../common/mediaInfo.vue'
+import streamMediaPanel from '../common/streamMediaPanel.vue'
+
+export default {
+  name: 'StreamPushPlayer',
+  directives: { elDragDialog },
+  components: { playerTabs, mediaInfo, streamMediaPanel },
+  props: {},
+  data() {
+    return {
+      videoUrl: '',
+      streamId: '',
+      app: '',
+      mediaServerId: '',
+      hasAudio: false,
+      isLoging: false,
+      showVideoDialog: false,
+      streamInfo: null,
+      playerHeight: '48vh',
+      playerUrlInfo: {
+        playerUrl: null,
+        playUrl: null,
+      }
+    }
+  },
+  methods: {
+    openDialog: function(streamInfo, hasAudio) {
+      if (this.showVideoDialog) return
+      this.tabActiveName = 'media'
+      this.streamId = ''
+      this.mediaServerId = ''
+      this.app = ''
+      this.videoUrl = ''
+      if (streamInfo) {
+        this.play(streamInfo, hasAudio)
+      }
+    },
+    play: function(streamInfo, hasAudio) {
+      this.streamInfo = streamInfo
+      this.hasAudio = hasAudio
+      this.isLoging = false
+      this.streamId = streamInfo.stream
+      this.app = streamInfo.app
+      this.mediaServerId = streamInfo.mediaServerId
+      this.showVideoDialog = true
+      this.$nextTick(() => {
+        if (this.$refs.playerTabs) {
+          this.$refs.playerTabs.setStreamInfo(streamInfo.transcodeStream || streamInfo)
+        }
+        this.$refs.mediaInfo && this.$refs.mediaInfo.startTask()
+      })
+    },
+    playerChanged: function(playerUrlInfo) {
+      this.playerUrlInfo = playerUrlInfo
+    },
+    close: function() {
+      if (this.$refs.playerTabs) {
+        this.$refs.playerTabs.stop()
+      }
+      this.$refs.mediaInfo && this.$refs.mediaInfo.stopTask()
+      this.videoUrl = ''
+      this.showVideoDialog = false
+    },
+  }
+}
+</script>
+
+<style>
+#streamPushPlayer .el-dialog__body { padding: 12px 20px; }
+.push-player-body { display: flex; gap: 16px; height: 100%; }
+.player-side { flex: 3; min-width: 0; }
+.player-container { width: 100%; height: calc(75vh - 80px); }
+.control-side { flex: 2; min-width: 340px; display: flex; flex-direction: column; overflow-y: auto; }
+.info-card { border-radius: 6px; padding: 12px; border: 1px solid #e8eaed; }
+.info-card__title { font-size: 18px; font-weight: 600; color: #303133; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e8eaed;text-align: center; }
+.info-card--fill { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.info-card--fill .info-card__body { flex: 1; overflow: auto; }
+.info-card--bottom { flex-shrink: 0; margin-top: auto; }
+.info-card .media-info-content { margin: -4px; }
+</style>