@zfqh/uniapp 0.1.1

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

@@ -0,0 +1,524 @@
+<template>
+  <view
+    class="trtc-room"
+    :class="{ 'trtc-room-zoom': zoom, 'trtc-room-zoom-video': zoom && enableCamera }"
+    :style="[roomStyle]"
+    @click="handler('zoom')"
+    @touchstart="touchStart"
+    @touchmove="touchMove"
+    @touchend="touchEnd"
+  >
+    <view class="trtc-room-header" :style="[headerStyle]">
+      <view @click.stop="zoom = true">
+        <g-icon v-if="enableZoom" font="rtc" name="zoom" size="46rpx" />
+      </view>
+      <view :style="[titleStyle]">
+        <slot v-if="!start || !enableCamera" name="title">
+          <view class="flex flex-col justify-center">
+            <uv-avatar :src="avatar" size="120rpx" mode="aspectFill" class="u-flex" />
+            <text v-if="title" class="text-28rpx mt-12rpx"> {{ title }} </text>
+            <text v-if="description" :class="[title ? 'mt-6rpx' : 'mt-12rpx']" class="text-24rpx">
+              {{ description }}
+            </text>
+          </view>
+        </slot>
+      </view>
+    </view>
+    <view class="trtc-room-handler">
+      <view>
+        <g-icon v-if="zoom" font="rtc" name="calling" size="56rpx" />
+        <view>
+          <g-timer v-if="start" :start="start" @change="timerChange" />
+          <text v-else> {{ tips }} </text>
+        </view>
+      </view>
+      <view>
+        <view
+          v-for="btn in buttons"
+          :key="btn.key"
+          class="trtc-room-button"
+          :class="{ light: btn.light }"
+          @click="handler(btn.key)"
+        >
+          <view>
+            <g-icon font="rtc" :name="btn.icon" size="54rpx" />
+          </view>
+          <text> {{ btn.text }} </text>
+        </view>
+      </view>
+      <view>
+        <template v-if="start">
+          <view></view>
+          <view>
+            <view class="trtc-room-button error" @click="handler('hangup')">
+              <view>
+                <g-icon font="rtc" name="hangup" size="54rpx" />
+              </view>
+            </view>
+          </view>
+          <view>
+            <g-icon
+              v-if="enableCamera"
+              font="rtc"
+              name="switch-camera"
+              size="46rpx"
+              @click="handler('switch-camera')"
+            />
+          </view>
+        </template>
+        <template v-else>
+          <view>
+            <view class="trtc-room-button error" @click="handler('hangup')">
+              <view>
+                <g-icon font="rtc" name="hangup" size="54rpx" />
+              </view>
+            </view>
+          </view>
+          <view>
+            <view class="trtc-room-button success" @click="handler('accept')">
+              <view>
+                <g-icon font="rtc" name="call" size="54rpx" />
+              </view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </view>
+    <g-trtc
+      ref="trtc"
+      :roomId="roomId"
+      :appId="appId"
+      :userId="userId"
+      :userSig="userSig"
+      :customStyle="trtcStyle"
+      :enableCamera="enableCamera"
+      :enableMic="enableMic"
+      :enableSpeaker="enableSpeaker"
+      :frontCamera="frontCamera"
+      :autopush="!!start"
+      @leave="leave"
+      @join="join"
+    />
+  </view>
+</template>
+
+<script>
+import cdn from '../../configs/cdn';
+
+export default {
+  // #ifdef MP
+  options: {
+    styleIsolation: 'shared',
+  },
+  // #endif
+  props: {
+    // 房间ID
+    roomId: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 应用APPID
+    appId: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 用户IMID
+    userId: {
+      type: [String, Number],
+      default: '',
+    },
+    // 用户签名
+    userSig: {
+      type: String,
+      default: '',
+    },
+    // 房间名称
+    title: {
+      type: String,
+      default: '',
+    },
+    // 房间简介
+    description: {
+      type: String,
+      default: '',
+    },
+    // 房间头像
+    avatar: {
+      type: String,
+      default: '',
+    },
+    // 开启缩放功能
+    enableZoom: {
+      type: Boolean,
+      default: true,
+    },
+    // 通话类型 1语音，2视频
+    callType: {
+      type: [String, Number],
+      default: 1,
+    },
+    // 窗口背景色
+    bgColor: {
+      type: String,
+      default: '#000',
+    },
+    // 铃声
+    bellsUrl: {
+      type: String,
+      default: () => `${cdn.baseUrl}/files/audios/calling.wav`,
+    },
+  },
+  data() {
+    return {
+      start: 0,
+      zoom: false,
+      touched: null,
+      offset: {
+        top: 280,
+        left: 280,
+      },
+      enableMic: false,
+      enableCamera: this.callType == 2,
+      enableSpeaker: this.callType == 2,
+      frontCamera: true,
+    };
+  },
+  computed: {
+    systemInfo() {
+      return this.$store.state.system.info;
+    },
+    roomStyle({ systemInfo, zoom, offset }) {
+      const style = {
+        paddingTop: `${systemInfo.topStatusBarHeight}px`,
+      };
+      if (zoom) {
+        style.transform = `translateX(${offset.left}px) translateY(${offset.top}px)`;
+      }
+      return style;
+    },
+    trtcStyle({ systemInfo, bgColor }) {
+      return {
+        backgroundColor: bgColor,
+        paddingTop: `${systemInfo.topBarTitleHeight}px`,
+      };
+    },
+    headerStyle({ systemInfo }) {
+      return {
+        height: `${systemInfo.titleHeight}px`,
+      };
+    },
+    titleStyle() {
+      return {
+        transform: 'translateY(10vh)',
+      };
+    },
+    buttons({ enableCamera, enableSpeaker, enableMic, frontCamera, callType, start }) {
+      const buttons = [];
+      if (start) {
+        buttons.push({
+          icon: `${enableMic ? '' : 'disable-'}microphone`,
+          key: 'microphone',
+          text: `麦克风${enableMic ? '开启' : '关闭'}`,
+          light: enableMic,
+        });
+      } else if (callType == 2) {
+        buttons.push({
+          icon: 'switch-camera',
+          key: 'switch-camera',
+          text: `前置摄像头${frontCamera ? '开启' : '关闭'}`,
+          light: frontCamera,
+        });
+      }
+      if (start || callType == 2) {
+        buttons.push({
+          icon: `${enableSpeaker ? '' : 'disable-'}speaker`,
+          key: 'speaker',
+          text: `扬声器${enableSpeaker ? '开启' : '关闭'}`,
+          light: enableSpeaker,
+        });
+      }
+      if (callType == 2) {
+        buttons.push({
+          icon: `${enableCamera ? '' : 'disable-'}camera`,
+          key: 'camera',
+          text: `摄像头${enableCamera ? '开启' : '关闭'}`,
+          light: enableCamera,
+        });
+      }
+      return buttons;
+    },
+    tips() {
+      return `邀请你进行通话...`;
+    },
+  },
+  watch: {
+    zoom(e) {
+      this.$emit('zoom', e);
+    },
+  },
+  methods: {
+    leave(players) {
+      if (!players.length) {
+        this.handler('leave');
+      }
+    },
+    join(players) {
+      if (players.length === 1) {
+        this.$refs.trtc.frontUserId = players[0].userID;
+      }
+    },
+    handler(type) {
+      uni.$uv.throttle(() => {
+        switch (type) {
+          case 'zoom':
+            if (this.zoom) {
+              this.zoom = false;
+            }
+            break;
+          case 'accept':
+            this.start = Date.now();
+            this.audioContext?.stop();
+            this.enableMic = true;
+            this.$refs.trtc.start();
+            this.$emit(type);
+            break;
+          case 'leave':
+            this.$emit(type);
+            break;
+          case 'hangup':
+            this.audioContext?.stop();
+            this.$emit(type);
+            break;
+          case 'switch-camera':
+            this.frontCamera = !this.frontCamera;
+            break;
+          case 'microphone':
+            this.enableMic = !this.enableMic;
+            break;
+          case 'speaker':
+            this.enableSpeaker = !this.enableSpeaker;
+            break;
+          case 'camera':
+            this.enableCamera = !this.enableCamera;
+            break;
+        }
+      });
+    },
+    timerChange(e) {
+      this.duration = e;
+    },
+    touchStart(e) {
+      if (this.zoom) {
+        this.touched = Object.assign({}, e.touches[0], this.offset);
+      }
+    },
+    touchMove(e) {
+      if (this.touched) {
+        const { pageX, pageY, top, left } = this.touched;
+        this.offset = {
+          top: top + (e.touches[0].pageY - pageY),
+          left: left + (e.touches[0].pageX - pageX),
+        };
+      }
+    },
+    touchEnd() {
+      this.touched = null;
+    },
+    createBells() {
+      if (!this.audioContext) {
+        const audioContext = uni.createInnerAudioContext();
+        audioContext.autoplay = true;
+        audioContext.loop = true;
+        audioContext.src = this.bellsUrl;
+        this.audioContext = audioContext;
+        uni.setKeepScreenOn({ keepScreenOn: true });
+      }
+    },
+    destroyBells() {
+      if (this.audioContext) {
+        this.audioContext.stop();
+        this.audioContext.destroy();
+        this.audioContext = null;
+        uni.setKeepScreenOn({ keepScreenOn: false });
+      }
+    },
+  },
+  mounted() {
+    this.createBells();
+  },
+  beforeUnmount() {
+    this.destroyBells();
+  },
+};
+</script>
+
+<style lang="scss">
+@import './iconfont.scss';
+</style>
+
+<style lang="scss" scoped>
+.trtc-room {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  color: rgba(255, 255, 255, 1);
+  padding: 32rpx;
+  & > view {
+    position: relative;
+    z-index: 1;
+  }
+  &-zoom {
+    width: 160rpx;
+    height: auto;
+    border: 1px solid $uv-border-color;
+    border-radius: 16rpx;
+    background-color: #fff;
+    color: $uv-success;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    padding: 32rpx 24rpx 24rpx !important;
+    text-align: center;
+    overflow: hidden;
+    .trtc-room-header,
+    .trtc-room-handler > view {
+      display: none;
+    }
+    .trtc-room-handler {
+      position: static !important;
+      & > view:first-child {
+        margin-top: 0;
+        display: flex;
+        flex-direction: column;
+        & > view:last-child {
+          margin-top: 20rpx;
+        }
+      }
+    }
+    ::v-deep .trtc {
+      display: none;
+    }
+    &-video {
+      width: 160rpx;
+      height: 250rpx;
+      border: none;
+      background-color: #000;
+      padding: 0 !important;
+      ::v-deep .trtc {
+        display: block;
+        padding: 10rpx !important;
+        &:before {
+          content: '';
+          background-color: transparent;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          z-index: 2;
+        }
+        &-stream {
+          width: 31rpx !important;
+          height: 47rpx !important;
+          margin: 0 !important;
+          &.front {
+            width: 100% !important;
+            height: 100% !important;
+          }
+        }
+      }
+    }
+  }
+  &-header {
+    & > view {
+      &:nth-child(2) {
+        flex: 1;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &:first-child {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  &-handler {
+    position: absolute !important;
+    bottom: 120rpx;
+    left: 32rpx;
+    right: 32rpx;
+    font-size: 28rpx;
+    & > view {
+      margin-top: 80rpx;
+      display: flex;
+      & > view {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  &-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    & > view {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 120rpx;
+      background-color: #161413;
+    }
+    & > text {
+      margin-top: 16rpx;
+    }
+    &.error {
+      & > view {
+        background-color: $uv-error;
+        color: #fff;
+      }
+    }
+    &.success {
+      & > view {
+        background-color: $uv-success;
+        color: #fff;
+      }
+    }
+    &.light {
+      & > view {
+        background-color: rgba(255, 255, 255, 1);
+        color: #161413;
+      }
+    }
+  }
+  ::v-deep .trtc {
+    padding: 32rpx;
+    &-streams {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    &-stream {
+      width: 194rpx;
+      height: 258rpx;
+      border-radius: 8rpx;
+      margin: 32rpx 0 0 32rpx;
+      border: 4rpx solid rgba(255, 255, 255, 1);
+    }
+  }
+}
+</style>

package/lib/components/g-trtc-room/iconfont.scss

@@ -0,0 +1,59 @@
+@font-face {
+  font-family: "icon-rtc"; /* Project id 4732578 */
+  src:
+    url("//at.alicdn.com/t/c/font_4732578_jkzp60fo53h.woff2?t=1730615518353") format("woff2"),
+    url("//at.alicdn.com/t/c/font_4732578_jkzp60fo53h.woff?t=1730615518353") format("woff"),
+    url("//at.alicdn.com/t/c/font_4732578_jkzp60fo53h.ttf?t=1730615518353") format("truetype");
+}
+
+.icon-rtc {
+  font-family: "icon-rtc" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-rtc-call:before {
+  content: "\e655";
+}
+
+.icon-rtc-zoom:before {
+  content: "\e607";
+}
+
+.icon-rtc-microphone:before {
+  content: "\e600";
+}
+
+.icon-rtc-disable-microphone:before {
+  content: "\e601";
+}
+
+.icon-rtc-calling:before {
+  content: "\e602";
+}
+
+.icon-rtc-disable-speaker:before {
+  content: "\e603";
+}
+
+.icon-rtc-speaker:before {
+  content: "\e604";
+}
+
+.icon-rtc-disable-camera:before {
+  content: "\e605";
+}
+
+.icon-rtc-camera:before {
+  content: "\e606";
+}
+
+.icon-rtc-hangup:before {
+  content: "\e7f6";
+}
+
+.icon-rtc-switch-camera:before {
+  content: "\e65d";
+}