zyt/wx/node_modules/@tencentcloud/trtc-component-uniapp/src/components/TRTCPlayer.vue

<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>