新增功能

2026-03-04 15:32:30 +08:00
parent a07e844c47
commit ab77f5488d
2266 changed files with 177942 additions and 3444 deletions
@@ -0,0 +1,164 @@
+<template>
+    <div class="trtc-player-container">
+      <live-player 
+        v-if="streamId"
+        class="trtc-player" 
+        :id="player.streamID"
+        :data-userid="player.userID"
+        :data-streamid="player.streamID"
+        :data-streamtype="player.streamType"
+        :src="player.src"
+        mode="RTC"
+        :autoplay="player.autoplay"
+        :mute-audio="player.muteAudio"
+        :mute-video="player.muteVideo"
+        :orientation="player.orientation"
+        :object-fit="player.objectFit"
+        :background-mute="player.enableBackgroundMute"
+        :min-cache="player.minCache"
+        :max-cache="player.maxCache"
+        :sound-mode="soundMode"
+        :enable-recv-message="player.enableRecvMessage"
+        :auto-pause-if-navigate="player.autoPauseIfNavigate"
+        :auto-pause-if-open-native="player.autoPauseIfOpenNative"
+        :debug="player.debug"
+        @statechange="_playerStateChange"
+        @fullscreenchange="_playerFullscreenChange"
+        @netstatus="_playerNetStatus"
+        @audiovolumenotify="_playerAudioVolumeNotify"
+      />
+      <div v-if="player.stopVideo" class="trtc-dark-mask"></div>
+    </div>
+  </template>
+  
+  <script>
+  import TRTCCloud, { translateTRTCStreamId } from '@tencentcloud/trtc-cloud-wx'
+  
+  const trtcCloud = TRTCCloud.getTRTCShareInstance()
+  const trtc = trtcCloud.trtc
+  const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
+
+  export default {
+    name: 'TRTCPlayer',
+    props: {
+      streamId: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        player: {},
+        TRTCStreamId: '',
+        soundMode: ''
+      }
+    },
+    watch: {
+      streamId(newVal) {
+        this.setTRTCStreamId(newVal)
+      }
+    },
+    mounted() {
+      trtcCloud.logger.info('trtc-player attached', this.streamId)
+      if (this.streamId) {
+        InterfaceEventEmitter.emit('playerDomReady', { isReady: true, view: this.streamId })
+      }
+      this.TRTCStreamId = this.getTRTCStreamId(this.streamId)
+      this.bindTRTCCloudEvent()
+    },
+    beforeUnmount() {
+      this.executeCleanup()
+    },
+    beforeDestroy() {
+      this.executeCleanup()
+    },
+    methods: {
+      executeCleanup() {
+        trtcCloud.logger.info('trtc-player detached', this.streamId)
+        InterfaceEventEmitter.emit('playerDomReady', { isReady: false, streamId: this.streamId })
+        this.unbindTRTCCloudEvent()
+      },
+      setTRTCStreamId(id) {
+        trtcCloud.logger.info('trtc-player setTRTCStreamId', id)
+        return new Promise((resolve, reject) => {
+          try {
+            this.$emit('update:streamId', id)
+            this.TRTCStreamId = this.getTRTCStreamId(id)
+            this.$nextTick(() => {
+              trtcCloud.logger.info('trtc-player setTRTCStreamId success', id)
+              resolve()
+              InterfaceEventEmitter.emit('playerDomReady', { isReady: true, view: id })
+            })
+          } catch (err) {
+            trtcCloud.logger.info('trtc-player setTRTCStreamId fail', id, err)
+            reject(err)
+          }
+        })
+      },
+      // 其他方法保持原有逻辑...
+      getTRTCStreamId(streamId) {
+        const tempArray = streamId.split('_')
+        const userId = tempArray.slice(0, -1).join('_')
+        const streamType = Number(tempArray[tempArray.length - 1])
+        return translateTRTCStreamId(userId, streamType)
+      },
+      bindTRTCCloudEvent() {
+        InterfaceEventEmitter.on('playerAttributesChange', this.playerAttributesChange)
+        InterfaceEventEmitter.on('playerAudioRouteChange', this.playerAudioRouteChange)
+      },
+      unbindTRTCCloudEvent() {
+        InterfaceEventEmitter.off('playerAttributesChange', this.playerAttributesChange)
+        InterfaceEventEmitter.off('playerAudioRouteChange', this.playerAudioRouteChange)
+      },
+      playerAttributesChange(event) {
+        const { view, playerAttributes, callback } = event
+        if (view === this.streamId) {
+          this.player = { ...this.player, ...playerAttributes }
+          callback && callback()
+        }
+      },
+      playerAudioRouteChange(event) {
+        const { soundMode, callback } = event
+        this.soundMode = soundMode
+        callback && callback()
+      },
+      _playerStateChange(event) {
+        trtc.playerEventHandler(event)
+      },
+      _playerFullscreenChange(event) {
+        trtc.playerFullscreenChange(event)
+      },
+      _playerNetStatus(event) {
+        trtc.playerNetStatus(event)
+      },
+      _playerAudioVolumeNotify(event) {
+        try {
+          event.currentTarget.dataset.streamid = this.player.streamID
+          trtc.playerAudioVolumeNotify(event)
+        } catch (err) {
+          trtcCloud.logger.warn(err)
+        }
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .trtc-player-container {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+  .trtc-player {
+    height: 100%;
+    width: 100%;
+  }
+  .trtc-dark-mask {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    position: absolute;
+    top: 0;
+  }
+  </style>
+