Pre Merge pull request !34 from WangXuewen/master

docker/nginx/templates/nginx.conf.template

@@ -34,10 +34,6 @@ server {
         sub_filter "http://$original_host:80/mp4_record" "mp4_record";
         sub_filter "https://$original_host/mp4_record" "mp4_record";
         sub_filter "https://$original_host:443/mp4_record" "mp4_record";
-        sub_filter "ws://$original_host/mp4_record" "mp4_record";
-        sub_filter "ws://$original_host:80/mp4_record" "mp4_record";
-        sub_filter "wss://$original_host/mp4_record" "mp4_record";
-        sub_filter "wss://$original_host:443/mp4_record" "mp4_record";
         
         # 设置为off表示替换所有匹配项，而不仅仅是第一个
         sub_filter_once off;

src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/response/impl/RegisterResponseProcessor.java

@@ -95,4 +95,5 @@ public class RegisterResponseProcessor extends SIPResponseProcessorAbstract {
 			}
 		}
 	}
+
 }

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

@@ -139,7 +139,7 @@ public class RtpServerServiceImpl implements IReceiveRtpServerService {
             ssrc = ssrcFactory.getPlaySsrc(mediaServer);
         }
 
-        String streamId = String.format("%08x", Long.parseLong(ssrc)).toUpperCase();
+        String streamId = String.format("%08x", Long.parseLong(ssrc)).toLowerCase();
         String streamReplace = String.format("%s_%s", device.getDeviceId(), channel.getDeviceId());
 
         int tcpMode = device.getStreamMode().equals("TCP-ACTIVE")? 2: (device.getStreamMode().equals("TCP-PASSIVE")? 1:0);
@@ -309,7 +309,7 @@ public class RtpServerServiceImpl implements IReceiveRtpServerService {
             // 收流超时
             // 关闭收流端口
             String closeStreamId = rtpServerParam.getMediaServer().isRtpEnable()
-                    ? String.format("%08x", rtpServerParam.getSsrc()).toUpperCase() : rtpServerParam.getStreamId();
+                    ? String.format("%08x", rtpServerParam.getSsrc()) : rtpServerParam.getStreamId();
             mediaServerService.closeRTPServer(rtpServerParam.getMediaServer(), rtpServerParam.getApp(), closeStreamId);
             subscribe.removeSubscribe(rtpHook);
             callback.run(InviteErrorCode.ERROR_FOR_STREAM_TIMEOUT.getCode(), InviteErrorCode.ERROR_FOR_STREAM_TIMEOUT.getMsg(), null);
@@ -324,15 +324,8 @@ public class RtpServerServiceImpl implements IReceiveRtpServerService {
 
         int rtpServerPort;
         if (rtpServerParam.getMediaServer().isRtpEnable()) {
-            String zlmStreamId;
-            long checkSsrc;
-            if (rtpServerParam.getSsrc() != null) {
-                zlmStreamId = String.format("%08x", rtpServerParam.getSsrc()).toUpperCase();
-                checkSsrc = rtpServerParam.isSsrcCheck() ? rtpServerParam.getSsrc() : 0L;
-            }else {
-                zlmStreamId = rtpServerParam.getStreamId();
-                checkSsrc = 0L;
-            }
+            String zlmStreamId = String.format("%08x", rtpServerParam.getSsrc());
+            Long checkSsrc = rtpServerParam.isSsrcCheck() ? rtpServerParam.getSsrc() : 0L;
             rtpServerPort = mediaServerService.createRTPServer(rtpServerParam.getMediaServer(), rtpServerParam.getApp(), zlmStreamId, checkSsrc, rtpServerParam.getPort(), rtpServerParam.isOnlyAuto(),
                     rtpServerParam.isDisableAudio(), rtpServerParam.isReUsePort(), rtpServerParam.getTcpMode());
         } else {

web/src/permission.js

@@ -7,7 +7,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/play/share'] // no redirect whitelist
+const whiteList = ['/login'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar

web/src/router/index.js

@@ -288,10 +288,15 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/play/share',
-    name: 'sharePlayer',
+    path: '/play/wasm/:url',
+    name: 'wasmPlayer',
     hidden: true,
-    component: () => import('@/views/common/share.vue')
+    component: () => import('@/views/common/jessibuca.vue')
+  },
+  {
+    path: '/play/rtc/:url',
+    name: 'rtcPlayer',
+    component: () => import('@/views/common/rtcPlayer.vue')
   },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }

web/src/views/alarm/index.vue

@@ -164,6 +164,7 @@
       <div v-else-if="playbackStreamInfo">
         <h265web
           ref="playbackPlayer"
+          :video-url="playbackVideoUrl"
           :height="'400px'"
           :show-button="false"
           :has-audio="true"
@@ -314,11 +315,6 @@ export default {
           this.playbackVideoUrl = data['ws_flv']
         }
         this.playbackLoading = false
-        this.$nextTick(() => {
-          if (this.$refs.playbackPlayer) {
-            this.$refs.playbackPlayer.play(this.playbackVideoUrl)
-          }
-        })
       }).catch(err => {
         this.playbackLoading = false
         this.playbackError = (err && err.msg) ? err.msg : '回放请求失败，请检查通道是否有该时段录像'

web/src/views/channel/record.vue

@@ -60,6 +60,7 @@
           </div>
           <h265web
             ref="recordVideoPlayer"
+            :video-url="videoUrl"
             :height="'calc(100vh - 250px)'"
             :show-button="false"
             :has-audio="true"
@@ -464,11 +465,6 @@ 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)
-              }
-            })
           })
       }
     },

web/src/views/cloudRecord/cloudRecordPlayer.vue

@@ -1,28 +1,19 @@
 <template>
   <div id="cloudRecordPlayer" style="height: 100%">
     <div class="cloud-record-playBox" :style="playBoxStyle">
+      <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
       />
-      <rtcPlayer
-        v-if="playerType === 'WebRTC'"
-        ref="recordVideoPlayer"
-        :has-audio="true"
-        :show-controls="false"
-        style="height: calc(100% - 250px)"
-        autoplay
-        @playTimeChange="showPlayTimeChange"
-        @playStatusChange="playingChange"
-      />
-      <h265web v-if="playerType === 'H265web'" ref="recordVideoPlayer" :height="'calc(100% - 250px)'" :show-button="false" @playTimeChange="showPlayTimeChange" @playStatusChange="playingChange"/>
     </div>
     <div class="cloud-record-player-option-box">
       <div class="cloud-record-show-time">
@@ -79,11 +70,10 @@
           <div class="cloud-record-record-play-control-item record-play-control-player">
 
             <el-dropdown @command="changePlayerType" :popper-append-to-body='false' >
-              <a target="_blank" class="cloud-record-record-play-control-item record-play-control-speed" title="选择播放器">{{ playerLabel }}</a>
+              <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="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-item command="Jessibuca" >Jessibuca</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -98,18 +88,18 @@
 <script>
 
 import h265web from '../common/h265web.vue'
-import jessibucaPlayer from '@/views/common/jessibuca.vue'
-import rtcPlayer from '../common/rtcPlayer.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, rtcPlayer, h265web
+    jessibucaPlayer,
+    h265web
   },
   props: ['showListCallback', 'showNextCallback', 'showLastCallback', 'lastDiable', 'nextDiable'],
   data() {
@@ -129,11 +119,6 @@ export default {
       playing: false,
       initTime: null,
       playerType: 'Jessibuca',
-      playerUrls: {
-        Jessibuca: ['ws_flv', 'wss_flv'],
-        WebRTC: ['rtc', 'rtcs'],
-        H265web: ['ws_flv', 'wss_flv']
-      },
       playSpeedRange: [1, 2, 4, 6, 8, 16, 20]
     }
   },
@@ -172,10 +157,6 @@ export default {
       }else {
         return ''
       }
-    },
-    playerLabel() {
-      const labels = { Jessibuca: 'Jessibuca', WebRTC: 'WebRTC', H265web: 'H265Web' }
-      return labels[this.playerType] || 'Jessibuca'
     }
   },
   created() {
@@ -187,6 +168,9 @@ export default {
     this.$destroy('recordVideoPlayer')
   },
   methods: {
+    changePlayer(command) {
+      this.playerType = command
+    },
     timeProcessMouseup(event) {
       this.isMousedown = false
     },
@@ -244,15 +228,21 @@ export default {
       if (this.playerType === playerType) {
         return
       }
-      this.playerType = playerType
-      if (this.streamInfo) {
-        this.videoUrl = this.getUrlByStreamInfo()
+      let streamInfo = this.streamInfo
+      let videoUrl = this.videoUrl
+      this.$refs.recordVideoPlayer.destroy()
+      this.seekRecord(0, () => {
         this.$nextTick(() => {
-          if (this.$refs.recordVideoPlayer) {
-            this.$refs.recordVideoPlayer.play(this.videoUrl)
-          }
+          setTimeout(() => {
+            this.playerType = playerType
+            this.playerTime = 0
+            this.streamInfo = streamInfo
+            this.videoUrl = videoUrl
+          }, 1000)
+
         })
-      }
+      })
+
     },
     seekBackward() {
       // 快退五秒
@@ -300,31 +290,15 @@ export default {
       this.isFullScreen = true
     },
     setStreamInfo(streamInfo, timeLen, startTime) {
-      const keys = this.playerUrls[this.playerType]
       if (location.protocol === 'https:') {
-        this.videoUrl = streamInfo[keys[1]]
+        this.videoUrl = streamInfo['wss_flv']
       } else {
-        this.videoUrl = streamInfo[keys[0]]
+        this.videoUrl = streamInfo['ws_flv']
       }
       console.log(location.protocol)
       this.streamInfo = streamInfo
       this.timeLen = timeLen
       this.startTime = startTime
-      this.$nextTick(() => {
-        if (this.$refs.recordVideoPlayer) {
-          this.$refs.recordVideoPlayer.play(this.videoUrl)
-        }
-      })
-    },
-    getUrlByStreamInfo() {
-      if (!this.streamInfo) return ''
-      const keys = this.playerUrls[this.playerType]
-      if (location.protocol === 'https:') {
-        this.videoUrl = this.streamInfo[keys[1]]
-      } else {
-        this.videoUrl = this.streamInfo[keys[0]]
-      }
-      return this.videoUrl
     },
     seekRecord(playSeekValue, callback) {
       this.$store.dispatch('cloudRecord/seek', {

web/src/views/common/channelPlayer/index.vue

@@ -23,6 +23,7 @@
               v-if="activePlayer === 'jessibuca'"
               ref="jessibuca"
               :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -36,6 +37,7 @@
               v-if="activePlayer === 'webRTC'"
               ref="webRTC"
               :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               height="100px"
@@ -49,6 +51,7 @@
             <h265web
               v-if="activePlayer === 'h265web'"
               ref="h265web"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -64,6 +67,7 @@
           v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
           ref="jessibuca"
           :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
           :error="videoError"
           :message="videoError"
           :has-audio="hasAudio"
@@ -73,8 +77,9 @@
         />
         <rtc-player
           v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
-          ref="rtcPlayer"
+          ref="jessibuca"
           :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
           :error="videoError"
           :message="videoError"
           height="100px"
@@ -85,8 +90,9 @@
         />
         <h265web
           v-if="Object.keys(this.player).length == 1 && this.player.h265web"
-          ref="h265web"
+          ref="jessibuca"
           :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
           :error="videoError"
           :message="videoError"
           height="100px"
@@ -424,12 +430,9 @@ export default {
   },
   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>',
+        sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+        sharedIframe: '' + window.location.origin + '<iframe src="/public#/play/wasm/"></iframe>' + encodeURIComponent(this.videoUrl) + '',
         sharedRtmp: this.videoUrl
       }
     }

web/src/views/common/channelPlayer/jtDevicePlayer.vue

@@ -7,21 +7,21 @@
                  v-if="Object.keys(this.player).length > 1">
           <el-tab-pane label="Jessibuca" name="jessibuca">
             <jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog"
-                             :error="videoError" :message="videoError"
+                             :videoUrl="videoUrl" :error="videoError" :message="videoError"
                              :hasAudio="hasAudio" fluent autoplay live></jessibucaPlayer>
           </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"
+                        :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px"
                         :hasAudio="hasAudio" fluent autoplay live></rtc-player>
           </el-tab-pane>
           <el-tab-pane label="h265web">h265web敬请期待</el-tab-pane>
         </el-tabs>
         <jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca"
-                         :visible.sync="showVideoDialog" :error="videoError" :message="videoError"
+                         :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
                          :hasAudio="hasAudio" fluent autoplay live></jessibucaPlayer>
         <rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca"
-                    :visible.sync="showVideoDialog" :error="videoError" :message="videoError"
+                    :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
                     height="100px" :hasAudio="hasAudio" fluent autoplay live></rtc-player>
 
       </div>
@@ -266,12 +266,9 @@ export default {
   },
   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>',
+        sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+        sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
         sharedRtmp: this.videoUrl
       };
     }
@@ -362,13 +359,6 @@ export default {
       this.activePlayer = tab.name;
       this.videoUrl = this.getUrlByStreamInfo()
       console.log(this.videoUrl)
-      if (this.$refs[this.activePlayer]) {
-        this.$refs[this.activePlayer].play(this.videoUrl)
-      } else {
-        this.$nextTick(() => {
-          this.$refs[this.activePlayer].play(this.videoUrl)
-        })
-      }
     },
     openDialog: function (tab, deviceId, channelId, param) {
       if (this.showVideoDialog) {

web/src/views/common/channelPlayer/ptzCruising.vue

@@ -26,11 +26,11 @@
 
     <el-form v-if="selectPresetVisible" size="mini" :inline="true">
       <el-form-item>
-        <el-select v-model="selectPreset" value-key="presetId" placeholder="请选择预置点">
+        <el-select v-model="selectPreset" placeholder="请选择预置点">
           <el-option
             v-for="item in allPresetList"
             :key="item.presetId"
-            :label="item.presetName ? item.presetName : item.presetId"
+            :label="item.presetName"
             :value="item"
           />
         </el-select>

web/src/views/common/h265web.vue

@@ -64,14 +64,32 @@ export default {
     }
   },
   watch: {
+    videoUrl(newData, oldData) {
+      this.play(newData)
+    },
     playing(newData, oldData) {
       this.$emit('playStatusChange', newData)
     },
     immediate: true
   },
-  mounted() {},
+  mounted() {
+    const paramUrl = decodeURIComponent(this.$route.params.url)
+    window.onresize = () => {
+      this.updatePlayerDomSize()
+    }
+    this.btnDom = document.getElementById('buttonsBox')
+    console.log('初始化时的地址为: ' + paramUrl)
+    if (paramUrl) {
+      this.play(this.videoUrl)
+    }
+  },
   destroyed() {
-    this.destroy()
+    if (h265webPlayer[this._uid]) {
+      h265webPlayer[this._uid].destroy()
+    }
+    this.playing = false
+    this.loaded = false
+    this.playerLoading = false
   },
   methods: {
     updatePlayerDomSize() {
@@ -226,9 +244,6 @@ export default {
       this.playing = false
       this.err = ''
     },
-    stop: function() {
-      this.destroy()
-    },
     fullscreenSwich: function() {
       const isFull = this.isFullscreen()
       if (isFull) {

web/src/views/common/jessibuca.vue

@@ -50,14 +50,38 @@ export default {
       playerTime: 0,
       rotate: 0,
       vod: true, // 点播
-      forceNoOffscreen: false,
-      localVideoUrl: this.videoUrl
+      forceNoOffscreen: false
     }
   },
   created() {
+    if (this.$route.params.url) {
+      const paramUrl = decodeURIComponent(this.$route.params.url)
+      console.log(paramUrl)
+      if (!this.videoUrl) {
+        this.videoUrl = paramUrl
+      }
+    }
     this.btnDom = document.getElementById('buttonsBox')
   },
-  mounted() {},
+  mounted() {
+    if (this.videoUrl) {
+      this.$nextTick(() => {
+        this.play(this.videoUrl)
+      })
+    }
+  },
+  watch: {
+    videoUrl: {
+      handler(newVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            this.play(newVal)
+          })
+        }
+      },
+      immediate: false
+    }
+  },
   destroyed() {
     if (jessibucaPlayer[this._uid]) {
       jessibucaPlayer[this._uid].videoPTS = 0
@@ -199,10 +223,7 @@ export default {
         console.warn('Jessibuca -> invalid url, skip play')
         return
       }
-      if (this.playing) {
-        this.stop()
-      }
-      this.localVideoUrl = url
+      this.videoUrl = url
       console.log('Jessibuca -> url: ', url)
       if (!jessibucaPlayer[this._uid]) {
         this.create()

web/src/views/common/ptzCruising.vue

@@ -26,11 +26,11 @@
 
     <el-form v-if="selectPresetVisible" size="mini" :inline="true">
       <el-form-item>
-        <el-select v-model="selectPreset" value-key="presetId" placeholder="请选择预置点">
+        <el-select v-model="selectPreset" placeholder="请选择预置点">
           <el-option
             v-for="item in allPresetList"
             :key="item.presetId"
-            :label="item.presetName ? item.presetName : item.presetId"
+            :label="item.presetName"
             :value="item"
           />
         </el-select>

web/src/views/common/rtcPlayer.vue

@@ -12,7 +12,7 @@ export default {
   name: 'RtcPlayer',
   props: {
     videoUrl: { type: String, default: '' },
-    error: { default: '' },
+    error: { type: String, default: '' },
     hasaudio: { type: Boolean, default: false },
     showControls: { type: Boolean, default: true }
   },
@@ -21,16 +21,28 @@ export default {
       timer: null
     }
   },
-
-  mounted() {},
+  watch: {
+    videoUrl(newData, oldData) {
+      this.pause()
+      this.play(newData)
+    },
+    immediate: true
+  },
+  mounted() {
+    const paramUrl = decodeURIComponent(this.$route.params.url)
+    this.$nextTick(() => {
+      if (typeof (this.videoUrl) === 'undefined') {
+        this.videoUrl = paramUrl
+      }
+      console.log('初始化时的地址为: ' + this.videoUrl)
+      this.play(this.videoUrl)
+    })
+  },
   destroyed() {
     clearTimeout(this.timer)
   },
   methods: {
     play: function(url) {
-      if (webrtcPlayer != null) {
-        this.pause()
-      }
       webrtcPlayer = new ZLMRTCClient.Endpoint({
         element: document.getElementById('webRtcPlayerBox'), // video 标签
         debug: true, // 是否打印日志
@@ -75,9 +87,6 @@ export default {
         webrtcPlayer = null
       }
     },
-    stop: function() {
-      this.pause()
-    },
     eventcallbacK: function(type, message) {
       console.log('player 事件回调')
       console.log(type)

web/src/views/common/share.vue

@@ -1,54 +0,0 @@
-<template>
-  <div style="width: 100vw; height: 100vh; background-color: #000; overflow: hidden;">
-    <jessibucaPlayer
-      v-if="playerType === 0"
-      ref="player"
-      :show-button="true"
-      style="width: 100%; height: 100%"
-    />
-    <rtc-player
-      v-if="playerType === 1"
-      ref="player"
-      :show-controls="true"
-      style="width: 100%; height: 100%"
-    />
-    <h265web
-      v-if="playerType === 2"
-      ref="player"
-      :show-button="true"
-      style="width: 100%; height: 100%"
-    />
-  </div>
-</template>
-
-<script>
-import jessibucaPlayer from './jessibuca.vue'
-import rtcPlayer from './rtcPlayer.vue'
-import h265web from './h265web.vue'
-
-export default {
-  name: 'SharePlayer',
-  components: { jessibucaPlayer, rtcPlayer, h265web },
-  data() {
-    return {
-      playerType: 0
-    }
-  },
-  created() {
-    const type = parseInt(this.$route.query.type)
-    if (!isNaN(type) && type >= 0 && type <= 2) {
-      this.playerType = type
-    }
-  },
-  mounted() {
-    const url = this.$route.query.url
-    if (url) {
-      this.$nextTick(() => {
-        if (this.$refs.player) {
-          this.$refs.player.play(decodeURIComponent(url))
-        }
-      })
-    }
-  }
-}
-</script>

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

@@ -71,6 +71,7 @@
           <rtcPlayer
             v-if="activePlayer === 'webRTC'"
             ref="recordVideoPlayer"
+            :video-url="videoUrl"
             :has-audio="true"
             :show-controls="false"
             style="height: calc(100vh - 220px)"
@@ -81,6 +82,7 @@
           <h265web
             v-if="activePlayer === 'h265web'"
             ref="recordVideoPlayer"
+            :video-url="videoUrl"
             :height="'calc(100vh - 220px)'"
             :show-button="false"
             :has-audio="true"

web/src/views/dialog/devicePlayer.vue

@@ -41,6 +41,7 @@
               v-if="activePlayer === 'webRTC'"
               ref="webRTC"
               :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               height="100px"
@@ -54,6 +55,7 @@
             <h265web
               v-if="activePlayer === 'h265web'"
               ref="h265web"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -395,12 +397,9 @@ export default {
   },
   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>',
+        sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+        sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
         sharedRtmp: this.videoUrl
       }
     }

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

@@ -52,29 +52,9 @@
             <div class="el-icon-loading" />
             <div style="width: 100%; line-height: 2rem">正在加载</div>
           </div>
-          <jessibucaPlayer
-            v-if="activePlayer === 'jessibuca'"
-            ref="recordVideoPlayer"
-            :has-audio="true"
-            :height="'calc(100vh - 250px)'"
-            :show-button="false"
-            autoplay
-            @playStatusChange="playingChange"
-            @playTimeChange="showPlayTimeChange"
-          />
-          <rtcPlayer
-            v-if="activePlayer === 'webRTC'"
-            ref="recordVideoPlayer"
-            :has-audio="true"
-            :show-controls="false"
-            style="height: calc(100vh - 250px)"
-            autoplay
-            @playStatusChange="playingChange"
-            @playTimeChange="showPlayTimeChange"
-          />
           <h265web
-            v-if="activePlayer === 'h265web'"
             ref="recordVideoPlayer"
+            :video-url="videoUrl"
             :height="'calc(100vh - 250px)'"
             :show-button="false"
             :has-audio="true"
@@ -196,18 +176,6 @@
           </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"
@@ -235,8 +203,6 @@
 <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'
@@ -246,7 +212,7 @@ import screenfull from 'screenfull'
 export default {
   name: 'DeviceRecord',
   components: {
-    h265web, jessibucaPlayer, rtcPlayer, VideoTimeline, recordDownload, ChooseTimeRange
+    h265web, VideoTimeline, recordDownload, ChooseTimeRange
   },
   data() {
     return {
@@ -259,7 +225,6 @@ export default {
       detailFiles: [],
       videoUrl: null,
       streamInfo: null,
-      streamId: '',
       loading: false,
       chooseDate: null,
       playTime: null,
@@ -281,12 +246,6 @@ 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) => {
           // 通过显示一个点标识这一天有录像
@@ -301,10 +260,6 @@ export default {
     }
   },
   computed: {
-    playerLabel() {
-      const labels = { jessibuca: 'Jessibuca', webRTC: 'WebRTC', h265web: 'H265Web' }
-      return labels[this.activePlayer] || 'Jessibuca'
-    },
     boxStyle() {
       if (this.showSidebar) {
         return {
@@ -338,18 +293,6 @@ 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
     },
@@ -495,23 +438,16 @@ export default {
         })
           .then((data) => {
             this.streamInfo = data
-            this.streamId = data.stream
             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[keys[1]]
+        this.videoUrl = this.streamInfo['wss_flv']
       } else {
-        this.videoUrl = this.streamInfo[keys[0]]
+        this.videoUrl = this.streamInfo['ws_flv']
       }
       return this.videoUrl
     },

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

@@ -20,10 +20,10 @@
         >
           <el-tab-pane label="Jessibuca" name="jessibuca">
             <jessibucaPlayer
-              style="min-height: 22.5vw"
               v-if="activePlayer === 'jessibuca'"
               ref="jessibuca"
               :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -37,6 +37,7 @@
               v-if="activePlayer === 'webRTC'"
               ref="webRTC"
               :visible.sync="showVideoDialog"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               height="100px"
@@ -50,6 +51,7 @@
             <h265web
               v-if="activePlayer === 'h265web'"
               ref="h265web"
+              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -61,6 +63,44 @@
 
           </el-tab-pane>
         </el-tabs>
+        <jessibucaPlayer
+          v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
+        <rtc-player
+          v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          height="100px"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
+        <h265web
+          v-if="Object.keys(this.player).length == 1 && this.player.h265web"
+          ref="jessibuca"
+          :visible.sync="showVideoDialog"
+          :video-url="videoUrl"
+          :error="videoError"
+          :message="videoError"
+          height="100px"
+          :has-audio="hasAudio"
+          fluent
+          autoplay
+          live
+        />
       </div>
       <div id="shared" style="text-align: right; margin-top: 1rem;">
 
@@ -314,7 +354,6 @@
 
 <script>
 import rtcPlayer from '../../common/rtcPlayer.vue'
-import elDragDialog from '@/directive/el-drag-dialog'
 import crypto from 'crypto'
 import jessibucaPlayer from '../../common/jessibuca.vue'
 import mediaInfo from '../../common/mediaInfo.vue'
@@ -322,7 +361,6 @@ import H265web from '../../common/h265web.vue'
 
 export default {
   name: 'DevicePlayer',
-  directives: { elDragDialog },
   components: {
     mediaInfo, H265web,
     jessibucaPlayer, rtcPlayer
@@ -376,12 +414,9 @@ export default {
   },
   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>',
+        sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
+        sharedIframe: '' + window.location.origin + '<iframe src="/public#/play/wasm/"></iframe>' + encodeURIComponent(this.videoUrl) + '',
         sharedRtmp: this.videoUrl
       }
     }
@@ -405,13 +440,6 @@ export default {
     changePlayer: function(tab) {
       this.activePlayer = tab.name
       this.videoUrl = this.getUrlByStreamInfo()
-      if (this.$refs[this.activePlayer]) {
-        this.$refs[this.activePlayer].play(this.videoUrl)
-      } else {
-        this.$nextTick(() => {
-          this.$refs[this.activePlayer].play(this.videoUrl)
-        })
-      }
     },
     openDialog: function(tab, deviceId, channelId, param) {
       if (this.showVideoDialog) {

web/src/views/live/index.vue

@@ -33,7 +33,8 @@
               <div v-if="!videoUrl[i-1]" class="no-signal">{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}</div>
               <player
                 v-else
-                :ref="'player' + i"
+                :ref="'player'[i-1]"
+                :video-url="videoUrl[i-1]"
                 fluent
                 autoplay
                 :show-button="true"
@@ -219,15 +220,6 @@ export default {
       setTimeout(() => {
         window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
       }, 100)
-      this.$nextTick(() => {
-        const refName = 'player' + (idx + 1)
-        if (this.$refs[refName]) {
-          const player = this.$refs[refName] instanceof Array ? this.$refs[refName][0] : this.$refs[refName]
-          if (player && player.play) {
-            player.play(url)
-          }
-        }
-      })
     },
     checkPlayByParam() {
       const query = this.$route.query

web/src/views/streamPush/index.vue

@@ -87,8 +87,8 @@
         <el-table-column prop="stream" label="流ID" min-width="200" />
         <el-table-column label="推流状态" min-width="100">
           <template v-slot:default="scope">
-            <el-tag v-if="scope.row.pushing && myServerId !== scope.row.serverId" size="medium" style="border-color: #ecf1af">推流中</el-tag>
-            <el-tag v-if="scope.row.pushing && myServerId === scope.row.serverId" size="medium">推流中</el-tag>
+            <el-tag v-if="scope.row.pushing && $myServerId !== scope.row.serverId" size="medium" style="border-color: #ecf1af">推流中</el-tag>
+            <el-tag v-if="scope.row.pushing && $myServerId === scope.row.serverId" size="medium">推流中</el-tag>
             <el-tag v-if="!scope.row.pushing" size="medium" type="info">已停止</el-tag>
           </template>
         </el-table-column>
@@ -189,11 +189,6 @@ export default {
   destroyed() {
     clearTimeout(this.updateLooper)
   },
-  computed: {
-    myServerId() {
-      return this.$store.getters.serverId
-    }
-  },
   methods: {
     initData: function() {
       this.loading = true

数据库/2.7.4/初始化-postgresql-kingbase-2.7.4.sql

@@ -107,7 +107,7 @@ create table IF NOT EXISTS wvp_mobile_position
 (
     id              serial primary key,
     channel_id      character varying(50) not null,
-    timestamp       int8,
+    timestamp       int8 varying(50),
     longitude       double precision,
     latitude        double precision,
     altitude        double precision,
@@ -115,16 +115,16 @@ create table IF NOT EXISTS wvp_mobile_position
     direction       double precision,
     create_time     character varying(50)
 );
-COMMENT ON TABLE wvp_mobile_position IS '存储移动位置订阅上报的数据';
-COMMENT ON COLUMN wvp_mobile_position.id IS '主键ID';
-COMMENT ON COLUMN wvp_mobile_position.channel_id IS '通道ID';
-COMMENT ON COLUMN wvp_mobile_position.timestamp IS '上报时间';
-COMMENT ON COLUMN wvp_mobile_position.longitude IS '经度';
-COMMENT ON COLUMN wvp_mobile_position.latitude IS '纬度';
-COMMENT ON COLUMN wvp_mobile_position.altitude IS '海拔';
-COMMENT ON COLUMN wvp_mobile_position.speed IS '速度';
-COMMENT ON COLUMN wvp_mobile_position.direction IS '方向角';
-COMMENT ON COLUMN wvp_mobile_position.create_time IS '入库时间';
+COMMENT ON TABLE wvp_device_mobile_position IS '存储移动位置订阅上报的数据';
+COMMENT ON COLUMN wvp_device_mobile_position.id IS '主键ID';
+COMMENT ON COLUMN wvp_device_mobile_position.channel_id IS '通道ID';
+COMMENT ON COLUMN wvp_device_mobile_position.timestamp IS '上报时间';
+COMMENT ON COLUMN wvp_device_mobile_position.longitude IS '经度';
+COMMENT ON COLUMN wvp_device_mobile_position.latitude IS '纬度';
+COMMENT ON COLUMN wvp_device_mobile_position.altitude IS '海拔';
+COMMENT ON COLUMN wvp_device_mobile_position.speed IS '速度';
+COMMENT ON COLUMN wvp_device_mobile_position.direction IS '方向角';
+COMMENT ON COLUMN wvp_device_mobile_position.create_time IS '入库时间';
 
 
 drop table IF EXISTS wvp_device_channel;

数据库/2.7.4/更新-postgresql-kingbase-2.7.4.sql

@@ -41,7 +41,7 @@ ALTER table wvp_device_channel ADD COLUMN IF NOT EXISTS map_level integer defaul
 ALTER table wvp_common_group ADD COLUMN IF NOT EXISTS alias varchar(255) default null;
 ALTER table wvp_stream_proxy DROP COLUMN IF EXISTS enable_remove_none_reader;
 
-DROP INDEX IF EXISTS uk_media_server_unique_ip_http_port;
+drop index uk_media_server_unique_ip_http_port on wvp_media_server;
 
 ALTER table wvp_device DROP COLUMN IF EXISTS register_time;
 ALTER table wvp_device DROP COLUMN IF EXISTS keepalive_time;
@@ -56,7 +56,7 @@ create table IF NOT EXISTS wvp_alarm (
     latitude double precision,
     alarm_type integer,
     alarm_time bigint
-);
+)
 COMMENT ON COLUMN wvp_alarm.id IS '主键ID';
 COMMENT ON COLUMN wvp_alarm.channel_id IS '关联通道的数据库id';
 COMMENT ON COLUMN wvp_alarm.description IS '报警描述';