完善录像回放播放器切换

src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java

@@ -108,6 +108,12 @@ public class MediaServiceImpl implements IMediaService {
                 result.setEnable_audio(true);
                 return result;
             }
+            if ("mp4_record".equals(app) ) {
+                ResultForOnPublish result = new ResultForOnPublish();
+                result.setEnable_mp4(false);
+                result.setEnable_audio(true);
+                return result;
+            }
             StreamProxy streamProxyItem = streamProxyService.getStreamProxyByAppAndStream(app, stream);
             if (streamProxyItem != null) {
                 ResultForOnPublish result = new ResultForOnPublish();
@@ -269,6 +275,8 @@ public class MediaServiceImpl implements IMediaService {
             }
         }else if ("talk".equals(app) || "broadcast".equals(app)) {
             return false;
+        } else if ("mp4_record".equals(app)) {
+            return true;
         } else {
             // 非国标流 推流/拉流代理
             // 拉流代理

web/src/views/cloudRecord/cloudRecordPlayer.vue

@@ -1,7 +1,19 @@
 <template>
-  <div id="cloudRecordPlayer" >
+  <div id="cloudRecordPlayer" style="height: 100%">
     <div class="cloud-record-playBox" :style="playBoxStyle">
-      <h265web ref="recordVideoPlayer" :video-url="videoUrl" :height="'calc(100vh - 250px)'" :show-button="false" @playTimeChange="showPlayTimeChange" @playStatusChange="playingChange"/>
+      <h265web v-if="playerType === 'H265web'" ref="recordVideoPlayer" :video-url="videoUrl" :height="'calc(100% - 250px)'" :show-button="false" @playTimeChange="showPlayTimeChange" @playStatusChange="playingChange"/>
+      <jessibucaPlayer
+        v-if="playerType === 'Jessibuca'"
+        ref="recordVideoPlayer"
+        :height="'calc(100% - 250px)'"
+        :show-button="false"
+        :video-url="videoUrl"
+        @playTimeChange="showPlayTimeChange"
+        @playStatusChange="playingChange"
+        fluent
+        autoplay
+        live
+      />
     </div>
     <div class="cloud-record-player-option-box">
       <div class="cloud-record-show-time">
@@ -21,12 +33,12 @@
         {{showPlayTimeTotal}}
       </div>
     </div>
-    <div style="height: 40px; background-color: #383838; display: grid; grid-template-columns: 1fr 600px 1fr">
+    <div style="height: 40px; background-color: #383838; display: grid; grid-template-columns: 1fr auto 1fr">
       <div style="text-align: left;">
         <div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
           <a v-if="showListCallback" target="_blank" class="cloud-record-record-play-control-item iconfont icon-list" title="列表" @click="sidebarControl()" />
           <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-camera1196054easyiconnet" title="截图" @click="snap()" />
-          <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-shuaxin11" title="刷新" @click="refresh()" />
+<!--          <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-shuaxin11" title="刷新" @click="refresh()" />-->
 <!--          <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-xiazai011" title="下载" />-->
         </div>
       </div>
@@ -56,7 +68,14 @@
       <div style="text-align: right;">
         <div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
           <div class="cloud-record-record-play-control-item record-play-control-player">
-            H265web
+
+            <el-dropdown @command="changePlayerType" :popper-append-to-body='false' >
+              <a target="_blank" class="cloud-record-record-play-control-item record-play-control-speed" title="选择播放器">{{ playerType }}</a>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="H265web" >H265web</el-dropdown-item>
+                <el-dropdown-item command="Jessibuca" >Jessibuca</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
           <a v-if="!isFullScreen" target="_blank" class="cloud-record-record-play-control-item iconfont icon-fangdazhanshi" title="全屏" @click="fullScreen()" />
           <a v-else target="_blank" class="cloud-record-record-play-control-item iconfont icon-suoxiao1" title="全屏" @click="fullScreen()" />
@@ -72,12 +91,14 @@ import h265web from '../common/h265web.vue'
 import moment from 'moment'
 import momentDurationFormatSetup from 'moment-duration-format'
 import screenfull from 'screenfull'
+import jessibucaPlayer from '@/views/common/jessibuca.vue'
 
 momentDurationFormatSetup(moment)
 
 export default {
   name: 'CloudRecordPlayer',
   components: {
+    jessibucaPlayer,
     h265web
   },
   props: ['showListCallback', 'showNextCallback', 'showLastCallback', 'lastDiable', 'nextDiable'],
@@ -97,14 +118,13 @@ export default {
       isFullScreen: false,
       playing: false,
       initTime: null,
+      playerType: 'Jessibuca',
       playSpeedRange: [1, 2, 4, 6, 8, 16, 20]
     }
   },
   computed: {
     playBoxStyle() {
-      return {
+      return this.isFullScreen ? { height: 'calc(100vh - 61px)' } : { height: '100%' }
-        height: this.isFullScreen ? 'calc(100vh - 61px)' : 'calc(100vh - 164px)'
-      }
     },
     showPlayTimeValue() {
       return this.streamInfo === null ? '--:--:--' : moment.duration(this.playerTime, 'milliseconds').format('hh:mm:ss', {
@@ -182,6 +202,7 @@ export default {
       this.$refs.recordVideoPlayer.screenshot()
     },
     refresh() {
+      this.$refs.recordVideoPlayer.destroy()
       this.$refs.recordVideoPlayer.playBtnClick()
     },
     playLast() {
@@ -203,6 +224,26 @@ export default {
       })
       this.$refs.recordVideoPlayer.setPlaybackRate(this.playSpeed)
     },
+    changePlayerType(playerType) {
+      if (this.playerType === playerType) {
+        return
+      }
+      let streamInfo = this.streamInfo
+      let videoUrl = this.videoUrl
+      this.$refs.recordVideoPlayer.destroy()
+      this.seekRecord(0, () => {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.playerType = playerType
+            this.playerTime = 0
+            this.streamInfo = streamInfo
+            this.videoUrl = videoUrl
+          }, 1000)
+
+        })
+      })
+
+    },
     seekBackward() {
       // 快退五秒
       this.seekRecord(this.playerTime - 5 * 1000)
@@ -258,10 +299,7 @@ export default {
       this.timeLen = timeLen
       this.startTime = startTime
     },
-    seekRecord(playSeekValue) {
+    seekRecord(playSeekValue, callback) {
-      let streamInfo = this.streamInfo
-      let videoUrl = this.videoUrl
-      this.$refs.recordVideoPlayer.destroy()
       this.$store.dispatch('cloudRecord/seek', {
         mediaServerId: this.streamInfo.mediaServerId,
         app: this.streamInfo.app,
@@ -271,20 +309,19 @@ export default {
       })
         .then((data) => {
           this.playerTime = playSeekValue
-          setTimeout(() => {
+          if (callback) {
-            this.streamInfo = streamInfo
+            callback(playSeekValue)
-            this.videoUrl = videoUrl
+          }
-          }, 500)
-
-
-
         })
         .catch((error) => {
           console.log(error)
         })
     },
     showPlayTimeChange(val) {
-      this.playerTime += val * 1000
+      console.log(val)
+      if (Number(val)) {
+        this.playerTime = Number(val)
+      }
     },
     playingChange(val) {
       this.playing = val
@@ -356,7 +393,7 @@ export default {
   height: 6px;
   background-color: rgb(162, 162, 162);
 }
-.cloud-record-time-process-value::after {
+.cloud-record-time-process-value1::after {
   content: '';
   display: block;
   width: 12px;

web/src/views/cloudRecord/detail.vue

@@ -45,7 +45,7 @@
           </div>
         </div>
       </div>
-      <div id="playerBox">
+      <div id="playerBox" :style="playBoxStyle">
         <cloudRecordPlayer ref="cloudRecordPlayer" :showListCallback="sidebarControl" :showNextCallback="playNext"
                              :showLastCallback="playLast" :lastDiable="lastBtnDiable" :nextDiable="nextBtnDiable" ></cloudRecordPlayer>
       </div>
@@ -114,6 +114,11 @@ export default {
     }
   },
   computed: {
+    playBoxStyle() {
+      return {
+        height: this.isFullScreen ? 'calc(100vh - 61px)' : 'calc(100vh - 164px)'
+      }
+    },
     boxStyle() {
       if (this.showSidebar) {
         return {

web/src/views/cloudRecord/playerDialog.vue

@@ -3,8 +3,8 @@
     <el-dialog
       v-el-drag-dialog
       top="2rem"
-      width="1460px"
+      width="800px"
-      height="400px"
+      height="450px"
       :append-to-body="false"
       :modal-append-to-body="false"
       :modal="false"
@@ -13,7 +13,7 @@
       :destroy-on-close="true"
       @close="close()"
     >
-      <cloudRecordPlayer ref="cloudRecordPlayer" ></cloudRecordPlayer>
+      <cloudRecordPlayer style="height: 450px" ref="cloudRecordPlayer" ></cloudRecordPlayer>
     </el-dialog>
   </div>
 </template>

web/src/views/common/h265web.vue

@@ -144,7 +144,7 @@ export default {
           extInfo: {
             coreProbePart: 0.4,
             probeSize: 8192,
-            ignoreAudio: this.hasAudio == null ? 0 : (this.hasAudio ? 0 : 1)
+            ignoreAudio: this.hasAudio === null ? 0 : (this.hasAudio ? 0 : 1)
           }
         },
         options
@@ -169,10 +169,7 @@ export default {
         this.mediaInfo = h265web.mediaInfo()
       }
       h265web.onPlayTime = (videoPTS) => {
-        if (h265web.videoPTS) {
+        this.$emit('playTimeChange', videoPTS * 1000)
-          this.$emit('playTimeChange', videoPTS - h265web.videoPTS)
-        }
-        h265web.videoPTS = videoPTS
       }
       h265web.do()
     },
@@ -194,6 +191,9 @@ export default {
     playBtnClick: function(event) {
       this.play(this.videoUrl)
     },
+    refresh: function() {
+      this.play(this.videoUrl)
+    },
     play: function(url) {
       if (h265webPlayer[this._uid]) {
         this.destroy()
@@ -261,7 +261,6 @@ export default {
     },
     setPlaybackRate: function(speed) {
       h265webPlayer[this._uid].setPlaybackRate(speed)
-
     }
   }
 }

web/src/views/common/jessibuca.vue

@@ -5,7 +5,7 @@
     @dblclick="fullscreenSwich"
   >
     <div style="width:100%; padding-top: 56.25%; position: relative;" />
-    <div id="buttonsBox" class="buttons-box" v-if="typeof showBtn == 'undefined' || showBtn">
+    <div id="buttonsBox" class="buttons-box" v-if="typeof showButton == 'undefined' || showButton">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
         <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
@@ -34,11 +34,11 @@
 const jessibucaPlayer = {}
 export default {
   name: 'Jessibuca',
-  props: ['videoUrl', 'error', 'hasAudio', 'height', 'showBtn'],
+  props: ['videoUrl', 'error', 'hasAudio', 'height', 'showButton'],
   data() {
     return {
       playing: false,
-      isNotMute: false,
+      isNotMute: true,
       quieting: false,
       fullscreen: false,
       loaded: false, // mute
@@ -48,6 +48,7 @@ export default {
       btnDom: null,
       videoInfo: null,
       volume: 1,
+      playerTime: 0,
       rotate: 0,
       vod: true, // 点播
       forceNoOffscreen: false
@@ -66,81 +67,57 @@ export default {
   created() {
     const paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
-      this.updatePlayerDomSize()
-      window.onresize = this.updatePlayerDomSize
       if (typeof (this.videoUrl) === 'undefined') {
         this.videoUrl = paramUrl
       }
       this.btnDom = document.getElementById('buttonsBox')
     })
   },
-  // mounted() {
+  mounted() {},
-  //   const ro = new ResizeObserver(entries => {
-  //     entries.forEach(entry => {
-  //       this.updatePlayerDomSize()
-  //     });
-  //   });
-  //   ro.observe(this.$refs.container);
-  // },
-  mounted() {
-    this.updatePlayerDomSize()
-  },
   destroyed() {
     if (jessibucaPlayer[this._uid]) {
+      jessibucaPlayer[this._uid].videoPTS = 0
       jessibucaPlayer[this._uid].destroy()
     }
     this.playing = false
     this.loaded = false
     this.performance = ''
+    this.playerTime = 0
   },
   methods: {
-    updatePlayerDomSize() {
-      const dom = this.$refs.container
-      if (!this.parentNodeResizeObserver) {
-        this.parentNodeResizeObserver = new ResizeObserver(entries => {
-          this.updatePlayerDomSize()
-        })
-        this.parentNodeResizeObserver.observe(dom.parentNode)
-      }
-      const boxWidth = dom.parentNode.clientWidth
-      const boxHeight = dom.parentNode.clientHeight
-      let width = boxWidth
-      let height = (9 / 16) * width
-      if (boxHeight > 0 && boxWidth > boxHeight / 9 * 16) {
-        height = boxHeight
-        width = boxHeight / 9 * 16
-      }
-
-      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
-      if (height > clientHeight) {
-        height = clientHeight
-        width = (16 / 9) * height
-      }
-      this.playerWidth = width
-      this.playerHeight = height
-      if (this.playing) {
-        jessibucaPlayer[this._uid].resize(this.playerWidth, this.playerHeight)
-      }
-    },
     create() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].destroy()
+      }
+      this.$refs.container.dataset['jessibuca'] = undefined
+      if (this.$refs.container.getAttribute('data-jessibuca')) {
+        this.$refs.container.removeAttribute('data-jessibuca')
+      }
       const options = {
         container: this.$refs.container,
-        autoWasm: true,
+        videoBuffer: 0,
-        background: '',
+        isResize: false,
+        useMSE: true,
+        useWCS: true,
+        text: '',
+        // background: '',
         controlAutoHide: false,
         debug: false,
-        decoder: 'static/js/jessibuca/decoder.js',
+        hotKey: true,
-        forceNoOffscreen: false,
+        decoder: '/static/js/jessibuca/decoder.js',
+        sNotMute: true,
+        timeout: 10,
+        recordType: 'mp4',
+        isFlv: false,
+        forceNoOffscreen: true,
         hasAudio: typeof (this.hasAudio) === 'undefined' ? true : this.hasAudio,
         heartTimeout: 5,
         heartTimeoutReplay: true,
         heartTimeoutReplayTimes: 3,
         hiddenAutoPause: false,
-        hotKey: true,
-        isFlv: false,
         isFullResize: false,
+
         isNotMute: this.isNotMute,
-        isResize: true,
         keepScreenOn: true,
         loadingText: '请稍等, 视频加载中......',
         loadingTimeout: 10,
@@ -152,38 +129,37 @@ export default {
           screenshot: false,
           play: false,
           audio: false,
-          record: false
+          recorder: false
         },
-        recordType: 'mp4',
+        // rotate: 0,
-        rotate: 0,
         showBandwidth: false,
         supportDblclickFullscreen: false,
-        timeout: 10,
+
-        useMSE: true,
+        useWebFullSreen: true,
-        useWCS: false,
+
-        useWebFullScreen: true,
-        videoBuffer: 0.1,
         wasmDecodeErrorReplay: true,
-        wcsUseVideoRender: true
+        wcsUseVideoRendcer: true
       }
       console.log('Jessibuca -> options: ', options)
-      jessibucaPlayer[this._uid] = new window.Jessibuca({ ...options })
+      jessibucaPlayer[this._uid] = new window.Jessibuca(options)
 
       const jessibuca = jessibucaPlayer[this._uid]
       const _this = this
-      jessibuca.on('pause', function() {
+      jessibuca.on('pause', () => {
         _this.playing = false
+        this.$emit('playStatusChange', false)
       })
-      jessibuca.on('play', function() {
+      jessibuca.on('play', () => {
         _this.playing = true
+        this.$emit('playStatusChange', true)
       })
-      jessibuca.on('fullscreen', function(msg) {
+      jessibuca.on('fullscreen', (msg) => {
         _this.fullscreen = msg
       })
-      jessibuca.on('mute', function(msg) {
+      jessibuca.on('mute', (msg) => {
         _this.isNotMute = !msg
       })
-      jessibuca.on('performance', function(performance) {
+      jessibuca.on('performance', (performance) => {
         let show = '卡顿'
         if (performance === 2) {
           show = '非常流畅'
@@ -192,30 +168,38 @@ export default {
         }
         _this.performance = show
       })
-      jessibuca.on('kBps', function(kBps) {
+      jessibuca.on('kBps', (kBps) => {
         _this.kBps = Math.round(kBps)
       })
-      jessibuca.on('videoInfo', function(msg) {
+      jessibuca.on('videoInfo', (msg) => {
         console.log('Jessibuca -> videoInfo: ', msg)
       })
-      jessibuca.on('audioInfo', function(msg) {
+      jessibuca.on('audioInfo', (msg) => {
         console.log('Jessibuca -> audioInfo: ', msg)
       })
-      jessibuca.on('error', function(msg) {
+      jessibuca.on('error', (msg) => {
         console.log('Jessibuca -> error: ', msg)
       })
-      jessibuca.on('timeout', function(msg) {
+      jessibuca.on('timeout', (msg) => {
         console.log('Jessibuca -> timeout: ', msg)
       })
-      jessibuca.on('loadingTimeout', function(msg) {
+      jessibuca.on('loadingTimeout', (msg) => {
         console.log('Jessibuca -> timeout: ', msg)
       })
-      jessibuca.on('delayTimeout', function(msg) {
+      jessibuca.on('delayTimeout', (msg) => {
         console.log('Jessibuca -> timeout: ', msg)
       })
-      jessibuca.on('playToRenderTimes', function(msg) {
+      jessibuca.on('playToRenderTimes', (msg) => {
         console.log('Jessibuca -> playToRenderTimes: ', msg)
       })
+      jessibuca.on('timeUpdate', (videoPTS) => {
+        console.log(videoPTS)
+        if (jessibuca.videoPTS) {
+          this.playerTime += (videoPTS - jessibuca.videoPTS)
+          this.$emit('playTimeChange', this.playerTime)
+        }
+        jessibuca.videoPTS = videoPTS
+      })
     },
     playBtnClick: function(event) {
       this.play(this.videoUrl)
@@ -266,9 +250,9 @@ export default {
       if (jessibucaPlayer[this._uid]) {
         jessibucaPlayer[this._uid].destroy()
       }
-      if (document.getElementById('buttonsBox') === null && (typeof this.showBtn === 'undefined' || this.showBtn)) {
+      // if (document.getElementById('buttonsBox') === null && (typeof this.showButton === 'undefined' || this.showButton)) {
-        this.$refs.container.appendChild(this.btnDom)
+      //   this.$refs.container.appendChild(this.btnDom)
-      }
+      // }
       jessibucaPlayer[this._uid] = null
       this.playing = false
       this.err = ''
@@ -284,6 +268,9 @@ export default {
         document.msFullscreenElement ||
         document.mozFullScreenElement ||
         document.webkitFullscreenElement || false
+    },
+    setPlaybackRate: function() {
+
     }
   }
 }