完善录像回放播放器切换

2025-09-26 13:11:15 +08:00 · 2025-09-23 18:04:30 +08:00
parent e7d26b34b3
commit 0ed37d58ec
6 changed files with 144 additions and 108 deletions
--- a/src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java
+++ b/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 {
            // 非国标流 推流/拉流代理
            // 拉流代理
--- a/web/src/views/cloudRecord/cloudRecordPlayer.vue
+++ b/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 {
-        height: this.isFullScreen ? 'calc(100vh - 61px)' : 'calc(100vh - 164px)'
-      }
+      return this.isFullScreen ? { height: 'calc(100vh - 61px)' } : { height: '100%' }
    },
    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) {
-      let streamInfo = this.streamInfo
-      let videoUrl = this.videoUrl
-      this.$refs.recordVideoPlayer.destroy()
+    seekRecord(playSeekValue, callback) {
      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(() => {
-            this.streamInfo = streamInfo
-            this.videoUrl = videoUrl
-          }, 500)
-
-
-
+          if (callback) {
+            callback(playSeekValue)
+          }
        })
        .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;
--- a/web/src/views/cloudRecord/detail.vue
+++ b/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 {
--- a/web/src/views/cloudRecord/playerDialog.vue
+++ b/web/src/views/cloudRecord/playerDialog.vue
@@ -3,8 +3,8 @@
    <el-dialog
      v-el-drag-dialog
      top="2rem"
-      width="1460px"
-      height="400px"
+      width="800px"
+      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>
--- a/web/src/views/common/h265web.vue
+++ b/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 - h265web.videoPTS)
-        }
-        h265web.videoPTS = videoPTS
+        this.$emit('playTimeChange', videoPTS * 1000)
      }
      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)
-
    }
  }
 }
--- a/web/src/views/common/jessibuca.vue
+++ b/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() {
-  //   const ro = new ResizeObserver(entries => {
-  //     entries.forEach(entry => {
-  //       this.updatePlayerDomSize()
-  //     });
-  //   });
-  //   ro.observe(this.$refs.container);
-  // },
-  mounted() {
-    this.updatePlayerDomSize()
-  },
+  mounted() {},
  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,
-        background: '',
+        videoBuffer: 0,
+        isResize: false,
+        useMSE: true,
+        useWCS: true,
+        text: '',
+        // background: '',
        controlAutoHide: false,
        debug: false,
-        decoder: 'static/js/jessibuca/decoder.js',
-        forceNoOffscreen: false,
+        hotKey: true,
+        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,
-        useWCS: false,
-        useWebFullScreen: true,
-        videoBuffer: 0.1,
+
+        useWebFullSreen: true,
+
        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)) {
-        this.$refs.container.appendChild(this.btnDom)
-      }
+      // if (document.getElementById('buttonsBox') === null && (typeof this.showButton === 'undefined' || this.showButton)) {
+      //   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() {
+
    }
  }
 }