@zfqh/uniapp 0.1.1

package/lib/components/g-trtc/g-trtc.vue

@@ -0,0 +1,347 @@
+<template>
+  <view class="trtc" :style="[customStyle]">
+    <view class="trtc-streams">
+      <view
+        v-for="(stream, index) in streams"
+        class="trtc-stream"
+        :class="{
+          front: frontUserId === stream.userID,
+          hidden: !enableCamera || !!stream.muteVideo,
+        }"
+        :key="stream.userID"
+        @tap="setFront(stream)"
+      >
+        <live-pusher
+          v-if="index === 0"
+          class="trtc-stream-live"
+          :url="stream.url"
+          :autopush="stream.autopush"
+          :enable-camera="stream.enableCamera"
+          :enable-mic="stream.enableMic"
+          :muted="!pusher.enableMic"
+          :enable-agc="stream.enableAgc"
+          :enable-ans="stream.enableAns"
+          :enable-ear-monitor="stream.enableEarMonitor"
+          :auto-focus="stream.enableAutoFocus"
+          :zoom="stream.enableZoom"
+          :min-bitrate="stream.minBitrate"
+          :max-bitrate="stream.maxBitrate"
+          :beauty="stream.beautyLevel"
+          :whiteness="stream.whitenessLevel"
+          :orientation="stream.videoOrientation"
+          :aspect="stream.videoAspect"
+          :device-position="stream.frontCamera"
+          :remote-mirror="stream.enableRemoteMirror"
+          :local-mirror="stream.localMirror"
+          :background-mute="stream.enableBackgroundMute"
+          :audio-quality="stream.audioQuality"
+          :audio-volume-type="stream.audioVolumeType"
+          :audio-reverb-type="stream.audioReverbType"
+          :waiting-image="stream.waitingImage"
+          @statechange="pusherStateChange"
+          @netstatus="pusherNetStatus"
+          @error="pusherError"
+          @bgmstart="pusherBGMStart"
+          @bgmprogress="pusherBGMProgress"
+          @bgmcomplete="pusherBGMComplete"
+          @audiovolumenotify="pusherAudioVolumeNotify"
+        />
+        <live-player
+          v-else
+          class="trtc-stream-live"
+          :id="stream.streamID"
+          :data-userid="stream.userID"
+          :data-streamid="stream.streamID"
+          :data-streamtype="stream.streamType"
+          :src="stream.src"
+          :mode="stream.mode"
+          :autoplay="stream.autoplay"
+          :mute-audio="stream.muteAudio"
+          :mute-video="stream.muteVideo"
+          :orientation="stream.orientation"
+          :object-fit="stream.objectFit"
+          :background-mute="stream.enableBackgroundMute"
+          :min-cache="stream.minCache"
+          :max-cache="stream.maxCache"
+          :sound-mode="soundMode"
+          :enable-recv-message="stream.enableRecvMessage"
+          :auto-pause-if-navigate="stream.autoPauseIfNavigate"
+          :auto-pause-if-open-native="stream.autoPauseIfOpenNative"
+          @statechange="playerStateChange"
+          @fullscreenchange="playerFullscreenChange"
+          @netstatus="playerNetStatus"
+          @audiovolumenotify="playerAudioVolumeNotify"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import TRTC from 'trtc-wx-sdk';
+
+export default {
+  props: {
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // SDK APPID
+    appId: {
+      type: [String, Number],
+      default: '',
+    },
+    // 房间ID
+    roomId: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 用户ID
+    userId: {
+      type: [String, Number],
+      default: '',
+    },
+    // 签名
+    userSig: {
+      type: String,
+      default: '',
+    },
+    // 是否开启语音通话
+    enableMic: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否开启视频通话
+    enableCamera: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否开启扬声器
+    enableSpeaker: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否使用前置摄像头
+    frontCamera: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否自动推流
+    autopush: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      frontUserId: this.userId,
+      client: null,
+      pusher: null,
+      players: [],
+    };
+  },
+  watch: {
+    enableMic(enable) {
+      this.setPusher({
+        enableMic: enable,
+      });
+    },
+    enableCamera(enable) {
+      this.setPusher({
+        enableCamera: enable,
+      });
+    },
+    frontCamera(enable) {
+      const frontCamera = enable ? 'front' : 'back';
+      this.client.getPusherInstance().switchCamera(frontCamera);
+    },
+  },
+  computed: {
+    streams() {
+      if (this.pusher) {
+        return [this.pusher].concat(this.players);
+      }
+      return [];
+    },
+    soundMode() {
+      return this.enableSpeaker ? 'speaker' : 'ear';
+    },
+  },
+  methods: {
+    pusherStateChange(e) {
+      this.client.pusherEventHandler(e);
+    },
+    pusherNetStatus(e) {
+      this.client.pusherNetStatusHandler(e);
+    },
+    pusherError(e) {
+      this.client.pusherErrorHandler(e);
+    },
+    pusherBGMStart(e) {
+      this.client.pusherBGMStartHandler(e);
+    },
+    pusherBGMProgress(e) {
+      this.client.pusherBGMProgressHandler(e);
+    },
+    pusherBGMComplete(e) {
+      this.client.pusherBGMCompleteHandler(e);
+    },
+    pusherAudioVolumeNotify(e) {
+      this.client.pusherAudioVolumeNotify(e);
+    },
+    playerStateChange(e) {
+      this.client.playerEventHandler(e);
+    },
+    playerFullscreenChange(e) {
+      this.client.playerFullscreenChange(e);
+    },
+    playerNetStatus(e) {
+      this.client.playerNetStatus(e);
+    },
+    playerAudioVolumeNotify(e) {
+      this.client.playerAudioVolumeNotify(e);
+    },
+    setFront(stream) {
+      if (this.frontUserId !== stream.userID) {
+        this.frontUserId = stream.userID;
+      }
+    },
+    setPusher(params) {
+      this.pusher = this.client.setPusherAttributes(params);
+    },
+    setPlayer(player, options) {
+      if (player) {
+        this.players = this.client.setPlayerAttributes(player.streamID, options);
+      }
+    },
+    leaveRoom() {
+      if (this.client) {
+        this.client.getPusherInstance().stop();
+        this.client.exitRoom();
+        this.client = null;
+      }
+    },
+    enterRoom() {
+      const params = {
+        sdkAppID: this.appId,
+        userID: this.userId,
+        userSig: this.userSig,
+      };
+      if (typeof this.roomId === 'string') {
+        params.strRoomID = this.roomId;
+      } else {
+        params.roomID = this.roomId;
+      }
+      this.pusher = this.client.enterRoom(params);
+      if (this.autopush) {
+        this.start();
+      }
+    },
+    start() {
+      this.client?.getPusherInstance().start();
+    },
+    listenner() {
+      const { EVENT } = this.client;
+      this.client.on(EVENT.LOCAL_JOIN, (e) => {
+        console.log('LOCAL_JOIN', e);
+      });
+      this.client.on(EVENT.LOCAL_LEAVE, (e) => {
+        console.log('LOCAL_LEAVE', e);
+      });
+      this.client.on(EVENT.ERROR, (e) => {
+        console.log('ERROR', e);
+      });
+      this.client.on(EVENT.REMOTE_USER_JOIN, (e) => {
+        console.log('REMOTE_USER_JOIN', e);
+        const { userID } = e.data;
+        this.players = this.players.concat({ userID });
+        this.$emit('join', [...this.players]);
+      });
+      this.client.on(EVENT.REMOTE_USER_LEAVE, (e) => {
+        console.log('REMOTE_USER_LEAVE', e);
+        const { playerList } = e.data;
+        this.players = playerList;
+        this.$emit('leave', [...this.players]);
+      });
+      this.client.on(EVENT.REMOTE_AUDIO_ADD, (e) => {
+        console.log('REMOTE_AUDIO_ADD', e);
+        const { player } = e.data;
+        this.setPlayer(player, { muteAudio: false });
+      });
+      this.client.on(EVENT.REMOTE_AUDIO_REMOVE, (e) => {
+        console.log('REMOTE_AUDIO_REMOVE', e);
+        const { player } = e.data;
+        this.setPlayer(player, { muteAudio: true });
+      });
+      this.client.on(EVENT.REMOTE_VIDEO_ADD, (e) => {
+        console.log('REMOTE_VIDEO_ADD', e);
+        const { player } = e.data;
+        this.setPlayer(player, { muteVideo: false });
+      });
+      this.client.on(EVENT.REMOTE_VIDEO_REMOVE, (e) => {
+        console.log('REMOTE_VIDEO_REMOVE', e);
+        const { player } = e.data;
+        this.setPlayer(player, { muteVideo: true });
+      });
+    },
+    initRTC() {
+      this.client = new TRTC();
+      this.pusher = this.client.createPusher({
+        enableAns: true,
+        enableAgc: true,
+        enableMic: this.enableMic,
+        enableCamera: this.enableCamera,
+        beautyLevel: 3,
+        whitenessLevel: 3,
+      }).pusherAttributes;
+      this.listenner();
+      this.enterRoom();
+    },
+  },
+  beforeMount() {
+    this.initRTC();
+  },
+  beforeUnmount() {
+    this.leaveRoom();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.trtc {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+  overflow: hidden;
+  &-stream {
+    position: relative;
+    z-index: 1;
+    width: 140rpx;
+    height: 200rpx;
+    overflow: hidden;
+    &.front {
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0 !important;
+      border: none !important;
+      width: 100% !important;
+      height: 100% !important;
+      margin: 0 !important;
+    }
+    &.hidden {
+      opacity: 0;
+    }
+    &-live {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>