@tencentcloud/trtc-component-wx 1.0.3-beta.0 → 1.0.3-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/trtc-component-wx",
-  "version": "1.0.3-beta.0",
+  "version": "1.0.3-beta.2",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "scripts": {
@@ -67,6 +67,6 @@
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "@tencentcloud/trtc-cloud-wx": "1.0.2-beta.0"
+    "@tencentcloud/trtc-cloud-wx": "latest"
   }
 }

package/src/TRTCPlayer.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="trtc-player-container">
+      <live-player 
+        v-if="streamId"
+        :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 { translateTRTCStreamId } from '@tencentcloud/trtc-cloud-wx'
+  import TRTCCloud, { trtc } from '@tencentcloud/trtc-cloud-wx'
+  import { InterfaceEventEmitter } from '@tencentcloud/trtc-cloud-wx'
+  
+  const trtcCloud = TRTCCloud.getTRTCShareInstance()
+  
+  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() {
+      trtcCloud.logger.info('trtc-player detached', this.streamId)
+      InterfaceEventEmitter.emit('playerDomReady', { isReady: false, streamId: this.streamId })
+      this.unbindTRTCCloudEvent()
+    },
+    methods: {
+      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>
+  

package/src/TRTCPusher.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="trtc-pusher-container">
+      <live-pusher
+        class="trtc-pusher"
+        :url="pusher.url"
+        mode="HD"
+        :autopush="pusher.autopush"
+        :enable-camera="pusher.enableCamera"
+        :enable-mic="pusher.enableMic"
+        :muted="pusher.muted"
+        :enable-agc="pusher.enableAgc"
+        :enable-ans="pusher.enableAns"
+        :enable-ear-monitor="pusher.enableEarMonitor"
+        :auto-focus="pusher.enableAutoFocus"
+        :zoom="pusher.enableZoom"
+        :min-bitrate="pusher.minBitrate"
+        :max-bitrate="pusher.maxBitrate"
+        :video-width="pusher.videoWidth"
+        :video-height="pusher.videoHeight"
+        :beauty="pusher.beautyLevel"
+        :whiteness="pusher.whitenessLevel"
+        :orientation="pusher.videoOrientation"
+        :aspect="pusher.videoAspect"
+        :device-position="pusher.frontCamera"
+        :remote-mirror="pusher.enableRemoteMirror"
+        :local-mirror="pusher.localMirror"
+        :background-mute="pusher.enableBackgroundMute"
+        :audio-quality="pusher.audioQuality"
+        :audio-volume-type="pusher.audioVolumeType"
+        :audio-reverb-type="pusher.audioReverbType"
+        :waiting-image="pusher.waitingImage"
+        :beauty-style="pusher.beautyStyle"
+        :fps="pusher.fps"
+        :filter="pusher.filter"
+        @statechange="handleStateChange"
+        @netstatus="handleNetStatus"
+        @error="handleError"
+        @bgmstart="handleBGMStart"
+        @bgmprogress="handleBGMProgress"
+        @bgmcomplete="handleBGMComplete"
+        @audiovolumenotify="handleAudioVolumeNotify"
+      />
+      <live-player class="trtc-player" :sound-mode="soundMode"></live-player>
+    </div>
+  </template>
+  
+  <script>
+  import TRTCCloud from '@tencentcloud/trtc-cloud-wx'
+  
+  const trtcCloud = TRTCCloud.getTRTCShareInstance()
+  const trtc = trtcCloud.trtc
+  const InterfaceEventEmitter = trtcCloud.InterfaceEventEmitter
+  
+  export default {
+    name: 'TRTCPusher',
+    data() {
+      return {
+        pusher: {},
+        soundMode: ''
+      }
+    },
+    mounted() {
+      trtcCloud.logger.info('trtc-pusher attached')
+      this.bindTRTCCloudEvent()
+      InterfaceEventEmitter.emit('pusherDomReady', true)
+    },
+    beforeUnmount() {
+      trtcCloud.logger.info('trtc-pusher detached')
+      InterfaceEventEmitter.emit('pusherDomReady', false)
+      this.unbindTRTCCloudEvent()
+      trtcCloud.exitRoom()
+    },
+    methods: {
+      pusherAttributesChange(event) {
+        const { pusher, callback } = event
+        this.pusher = { ...this.pusher, ...pusher }
+        callback && this.$nextTick(callback)
+      },
+      playerAudioRouteChange(event) {
+        const { soundMode, callback } = event
+        this.soundMode = soundMode
+        callback && callback()
+      },
+      bindTRTCCloudEvent() {
+        InterfaceEventEmitter.on('pusherAttributesChange', this.pusherAttributesChange)
+        InterfaceEventEmitter.on('playerAudioRouteChange', this.playerAudioRouteChange)
+      },
+      unbindTRTCCloudEvent() {
+        InterfaceEventEmitter.off('pusherAttributesChange', this.pusherAttributesChange)
+        InterfaceEventEmitter.off('playerAudioRouteChange', this.playerAudioRouteChange)
+      },
+      handleStateChange(event) {
+        trtc.pusherEventHandler(event)
+      },
+      handleNetStatus(event) {
+        trtc.pusherNetStatusHandler(event)
+      },
+      handleError(event) {
+        trtc.pusherErrorHandler(event)
+      },
+      handleBGMStart(event) {
+        trtc.pusherBGMStartHandler(event)
+      },
+      handleBGMProgress(event) {
+        trtc.pusherBGMProgressHandler(event)
+      },
+      handleBGMComplete(event) {
+        trtc.pusherBGMCompleteHandler(event)
+      },
+      handleAudioVolumeNotify(event) {
+        if (!trtcCloud.isEnterRoom) return
+        trtc.pusherAudioVolumeNotify(event)
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .trtc-pusher-container {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+  
+  .trtc-pusher {
+    height: 100%;
+    width: 100%;
+  }
+  
+  .trtc-player {
+    width: 0;
+    height: 0;
+    display: flex;
+  }
+  </style>
+