国标录像回放支持切换播放器

src/main/resources/配置详情.yml

@@ -5,10 +5,14 @@
 
 
 spring:
+  spring:
+    threads:
+      virtual:
+        enabled: true
     cache:
-        type: redis
+      type: redis
     thymeleaf:
-        cache: false
+      cache: false
     # 设置接口超时时间
     mvc:
         async:
@@ -181,9 +185,6 @@ media:
     # 录像辅助服务， 部署此服务可以实现zlm录像的管理与下载， 0 表示不使用
     record-assist-port: 0
 
-# [可选] 日志配置, 如果不需要在jar外修改日志内容那么可以不配置此项
-logging:
-    config: classpath:logback-spring.xml
 
 # [根据业务需求配置]
 user-settings:
@@ -281,3 +282,12 @@ springdoc:
         enabled: false
     swagger-ui:
         enabled: false
+
+logging:
+  level:
+    # 日志级别 debug/info/warn/error
+    root: info
+  logback:
+    rollingpolicy:
+      # 日志文件最大历史保留天数，默认30天
+      max-history: 30

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" >
+    <div id="buttonsBox" class="buttons-box" v-if="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" />

web/src/views/common/rtcPlayer.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="rtcPlayer">
-    <video id="webRtcPlayerBox" controls autoplay style="text-align:left;">
+    <video id="webRtcPlayerBox" :controls="showControls" autoplay style="text-align:left;">
       Your browser is too old which doesn't support HTML5 video.
     </video>
   </div>
@@ -10,7 +10,12 @@
 let webrtcPlayer = null
 export default {
   name: 'RtcPlayer',
-  props: ['videoUrl', 'error', 'hasaudio'],
+  props: {
+    videoUrl: { type: String, default: '' },
+    error: { type: String, default: '' },
+    hasaudio: { type: Boolean, default: false },
+    showControls: { type: Boolean, default: true }
+  },
   data() {
     return {
       timer: null
@@ -97,10 +102,12 @@ export default {
     }
     #rtcPlayer{
         width: 100%;
+        height: 100%;
     }
     #webRtcPlayerBox{
         width: 100%;
-        max-height: 56vh;
+        height: 100%;
+        max-height: 100%;
         background-color: #000;
     }
     /* 隐藏logo */

web/src/views/device/channel/record.vue

@@ -49,8 +49,8 @@
           </div>
         </div>
       </div>
-      <div id="playerBox" style="width: 100%">
-        <div class="playBox" style="height: calc(100% - 90px); width: 100%; background-color: #000000">
+      <div id="playerBox" style="width: 100%;">
+        <div class="playBox" style="height: calc(100vh - 220px); width: 100%; background-color: #000000">
           <div
             v-if="playLoading"
             style="position: relative; left: calc(50% - 32px); top: 43%; z-index: 100;color: #fff;float: left; text-align: center;"
@@ -58,10 +58,32 @@
             <div class="el-icon-loading" />
             <div style="width: 100%; line-height: 2rem">正在加载</div>
           </div>
-          <h265web
+          <jessibucaPlayer
+            v-if="activePlayer === 'jessibuca'"
+            ref="recordVideoPlayer"
+            :has-audio="true"
+            :height="'calc(100vh - 90px)'"
+            :show-button="false"
+            autoplay
+            @playStatusChange="playingChange"
+            @playTimeChange="showPlayTimeChange"
+          />
+          <rtcPlayer
+            v-if="activePlayer === 'webRTC'"
             ref="recordVideoPlayer"
             :video-url="videoUrl"
-            :height="'calc(100vh - 250px)'"
+            :has-audio="true"
+            :show-controls="false"
+            style="height: calc(100vh - 220px)"
+            autoplay
+            @playStatusChange="playingChange"
+            @playTimeChange="showPlayTimeChange"
+          />
+          <h265web
+            v-if="activePlayer === 'h265web'"
+            ref="recordVideoPlayer"
+            :video-url="videoUrl"
+            :height="'calc(100vh - 220px)'"
             :show-button="false"
             :has-audio="true"
             @playStatusChange="playingChange"
@@ -181,6 +203,18 @@
           </div>
           <div style="text-align: right;">
             <div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
+              <el-dropdown @command="changePlayer">
+                <a
+                  target="_blank"
+                  class="record-play-control-item record-play-control-speed"
+                  title="切换播放器"
+                >{{ playerLabel }}</a>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="jessibuca">Jessibuca</el-dropdown-item>
+                  <el-dropdown-item command="webRTC">WebRTC</el-dropdown-item>
+                  <el-dropdown-item command="h265web">H265Web</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
               <a
                 v-if="!isFullScreen"
                 target="_blank"
@@ -208,6 +242,8 @@
 <script>
 
 import h265web from '../../common/h265web.vue'
+import jessibucaPlayer from '../../common/jessibuca.vue'
+import rtcPlayer from '../../common/rtcPlayer.vue'
 import VideoTimeline from '../../common/VideoTimeLine/index.vue'
 import recordDownload from '../../dialog/recordDownload.vue'
 import ChooseTimeRange from '../../dialog/chooseTimeRange.vue'
@@ -217,7 +253,7 @@ import screenfull from 'screenfull'
 export default {
   name: 'DeviceRecord',
   components: {
-    h265web, VideoTimeline, recordDownload, ChooseTimeRange
+    h265web, jessibucaPlayer, rtcPlayer, VideoTimeline, recordDownload, ChooseTimeRange
   },
   data() {
     return {
@@ -251,6 +287,12 @@ export default {
       timelineControl: false,
       showOtherSpeed: true,
       timeSegments: [],
+      activePlayer: 'jessibuca',
+      playerUrls: {
+        jessibuca: ['ws_flv', 'wss_flv'],
+        webRTC: ['rtc', 'rtcs'],
+        h265web: ['ws_flv', 'wss_flv']
+      },
       pickerOptions: {
         cellClassName: (date) => {
           // 通过显示一个点标识这一天有录像
@@ -266,6 +308,10 @@ export default {
     }
   },
   computed: {
+    playerLabel() {
+      const labels = { jessibuca: 'Jessibuca', webRTC: 'WebRTC', h265web: 'H265Web' }
+      return labels[this.activePlayer] || 'Jessibuca'
+    },
     boxStyle() {
       if (this.showSidebar) {
         return {
@@ -300,6 +346,18 @@ export default {
     window.removeEventListener('beforeunload', this.stopPlayRecord)
   },
   methods: {
+    changePlayer(player) {
+      if (this.activePlayer === player) return
+      this.activePlayer = player
+      if (this.streamInfo) {
+        this.videoUrl = this.getUrlByStreamInfo()
+        this.$nextTick(() => {
+          if (this.$refs.recordVideoPlayer) {
+            this.$refs.recordVideoPlayer.play(this.videoUrl)
+          }
+        })
+      }
+    },
     sidebarControl() {
       this.showSidebar = !this.showSidebar
     },
@@ -468,14 +526,20 @@ export default {
             this.streamInfo = data
             this.videoUrl = this.getUrlByStreamInfo()
             this.hasAudio = this.streamInfo.tracks && this.streamInfo.tracks.length > 1
+            this.$nextTick(() => {
+              if (this.$refs.recordVideoPlayer) {
+                this.$refs.recordVideoPlayer.play(this.videoUrl)
+              }
+            })
           })
       }
     },
     getUrlByStreamInfo() {
+      const keys = this.playerUrls[this.activePlayer]
       if (location.protocol === 'https:') {
-        this.videoUrl = this.streamInfo['wss_flv']
+        this.videoUrl = this.streamInfo[keys[1]]
       } else {
-        this.videoUrl = this.streamInfo['ws_flv']
+        this.videoUrl = this.streamInfo[keys[0]]
       }
       return this.videoUrl
     },