add file

2023-03-06 17:57:39 +08:00
parent 3794faceae
commit 1066e37c96
4230 changed files with 193453 additions and 0 deletions
@@ -0,0 +1,173 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    playerList: {
+      type: Array,
+    },
+    pusher: {
+      type: Object,
+    },
+    callType: {
+      type: Number,
+    },
+    soundMode: {
+      type: String,
+    },
+    screen: {
+      type: String,
+    },
+    userList: {
+      type: Object,
+    },
+    isGroup: {
+      type: Boolean,
+    },
+    allUsers: {
+      type: Array,
+    },
+    playerProcess: {
+      type: Object,
+    },
+    ownUserId: {
+      type: String,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    userID: null,
+  },
+  /**
+   * 生命周期方法
+   */
+  lifetimes: {
+    created() {
+    },
+    attached() {
+    },
+    ready() {
+    },
+    detached() {
+    },
+    error() {
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    toggleViewSize(event) {
+      const data = {
+        name: 'toggleViewSize',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    pusherNetStatus(event) {
+      const data = {
+        name: 'pusherNetStatus',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    playNetStatus(event) {
+      const data = {
+        name: 'playNetStatus',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    pusherStateChangeHandler(event) {
+      const data = {
+        name: 'pusherStateChangeHandler',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    pusherAudioVolumeNotify(event) {
+      const data = {
+        name: 'pusherAudioVolumeNotify',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    playerStateChange(event) {
+      const data = {
+        name: 'playerStateChange',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    playerAudioVolumeNotify(event) {
+      const data = {
+        name: 'playerAudioVolumeNotify',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    pusherAudioHandler(event) {
+      const data = {
+        name: 'pusherAudioHandler',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    hangup(event) {
+      const data = {
+        name: 'hangup',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    toggleSoundMode(event) {
+      const data = {
+        name: 'toggleSoundMode',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    pusherVideoHandler(event) {
+      const data = {
+        name: 'pusherVideoHandler',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    toggleSwitchCamera(event) {
+      const data = {
+        name: 'toggleSwitchCamera',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    switchAudioCall(event) {
+      const data = {
+        name: 'switchAudioCall',
+        event,
+      };
+      this.triggerEvent('connectedEvent', data);
+    },
+    handleConnectErrorImage(e) {
+      const {  flag, key, index } = e.target.dataset;
+      if (flag === 'pusher') {
+        this.data.pusher.avatar = '../../static/default_avatar.png';
+        this.setData({
+          pusher: this.data.pusher,
+        });
+      } else {
+        this.data[key][index].avatar = '../../static/default_avatar.png';
+        if (this.data.playerList[index]) {
+          this.data.playerList[index].avatar = '../../static/default_avatar.png';
+        }
+        this.setData({
+          playerList: this.data.playerList,
+          [key]: this.data[key],
+        });
+      }
+    },
+  },
+});
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "window": {
+    "backgroundColor": "#2c292923;"
+}
+}
@@ -0,0 +1,162 @@
+<view class="{{callType === 2?'TUICalling-connected-video':'TUICalling-connected-layout'}}">
+    <!-- 语音通话 -->
+    <view wx:if="{{callType === 1}}">
+        <swiper class="swiper" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white"
+                indicator-active-color="black">
+            <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
+                <swiper-item class="invite-calling-list">
+                    <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item"
+                          wx:if="{{index >= pos*4 && index < pos*4+4}}">
+                        <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
+                            <view class="invite-calling-item-loadimg">
+                                <image src="../../static/loading.png"></image>
+                            </view>
+                            <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
+                        </view>
+                        <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}"
+                               binderror="handleErrorImage"/>
+                        <!-- 音量图标 -->
+                        <view class="player-control">
+                            <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
+                            <view class="name">{{item.userID===ownUserId?'我':item.nick || item.userID}}</view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </block>
+        </swiper>
+    </view>
+    <view class="{{callType === 1 ? 'pusher-audio' : ''}}">
+        <swiper class="swiper" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white"
+                indicator-active-color="black">
+            <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
+                <swiper-item class="invite-calling-list">
+                    <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item"
+                          wx:if="{{index >= pos*4 && index < pos*4+4}}">
+                        <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
+                            <view class="invite-calling-item-loadimg">
+                                <image src="../../static/loading.png"></image>
+                            </view>
+                            <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
+                            <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
+                        </view>
+                        <view wx:else>
+                            <!-- 本地流 -->
+                            <view wx:if="{{item.userID===ownUserId}}"
+                                  class="{{callType === 1 ? 'pusher-audio' : 'play-item'}}" data-screen="pusher"
+                                  catch:tap="toggleViewSize">
+                                <live-pusher class="{{callType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}"
+                                             url="{{pusher.url}}" mode="{{pusher.mode}}" autopush="{{true}}"
+                                             enable-camera="{{pusher.enableCamera}}" enable-mic="{{true}}"
+                                             muted="{{!pusher.enableMic}}" enable-agc="{{true}}" enable-ans="{{true}}"
+                                             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}}" filter="{{pusher.filter}}"
+                                             bindstatechange="pusherStateChangeHandler" bindnetstatus="pusherNetStatus"
+                                             binderror="pusherErrorHandler"
+                                             bindaudiovolumenotify="pusherAudioVolumeNotify"/>
+                                <view class="player-control">
+                                    <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
+                                    <view class="name">我</view>
+                                </view>
+                            </view>
+                            <!-- 远端流 -->
+                            <view catch:tap="toggleViewSize" class="{{callType === 1 ? 'pusher-audio' : 'play-item'}}"
+                                  wx:else>
+                                <live-player
+                                        wx:if="{{playerProcess[item.userID]}}"
+                                        wx:if="{{ playerProcess[item.userID].hasAudio || playerProcess[item.userID].hasVideo }}"
+                                        class="{{callType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}"
+                                        id="{{playerProcess[item.userID].id}}"
+                                        data-userid="{{playerProcess[item.userID].userID}}"
+                                        data-streamid="{{playerProcess[item.userID].streamID}}"
+                                        data-streamtype="{{playerProcess[item.userID].streamType}}"
+                                        src="{{playerProcess[item.userID].src}}" mode="RTC"
+                                        autoplay="{{playerProcess[item.userID].autoplay}}"
+                                        mute-audio="{{playerProcess[item.userID].muteAudio}}"
+                                        mute-video="{{playerProcess[item.userID].muteVideo}}"
+                                        orientation="{{playerProcess[item.userID].orientation}}"
+                                        object-fit="{{playerProcess[item.userID].objectFit}}"
+                                        background-mute="{{playerProcess[item.userID].enableBackgroundMute}}"
+                                        min-cache="{{playerProcess[item.userID].minCache}}"
+                                        max-cache="{{playerProcess[item.userID].maxCache}}"
+                                        sound-mode="{{soundMode}}"
+                                        enable-recv-message="{{playerProcess[item.userID].enableRecvMessage}}"
+                                        auto-pause-if-navigate="{{playerProcess[item.userID].autoPauseIfNavigate}}"
+                                        auto-pause-if-open-native="{{playerProcess[item.userID].autoPauseIfOpenNative}}"
+                                        bindstatechange="playerStateChange"
+                                        bindfullscreenchange="playerFullscreenChange" bindnetstatus="playNetStatus"
+                                        bindaudiovolumenotify="playerAudioVolumeNotify"/>
+                                <!-- 音量图标 -->
+                                <view class="player-control">
+                                    <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
+                                    <view class="name">{{item.nick || item.userID}}</view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </block>
+        </swiper>
+    </view>
+    <!-- 菜单 -->
+    <view class="handle-btns">
+        <view class="other-view {{callType === 1 ? 'black' : 'white'}}">
+            <text>{{pusher.chatTime}}</text>
+        </view>
+        <view class="btn-list">
+            <view class="button-container">
+                <view class="btn-normal" bindtap="pusherAudioHandler">
+                    <image class="btn-image"
+                           src="{{pusher.enableMic? '../../static/audio-true.png': '../../static/audio-false.png'}} "></image>
+                </view>
+                <view class="{{callType === 2 ? 'white' : ''}}">麦克风</view>
+            </view>
+            <view class="button-container" wx:if="{{callType === 1}}">
+                <view class="btn-hangup" bindtap="hangup">
+                    <image class="btn-image" src="../../static/hangup.png"></image>
+                </view>
+                <view class="{{callType === 2 ? 'white' : ''}}">挂断</view>
+            </view>
+            <view class="button-container">
+                <view class="btn-normal" bindtap="toggleSoundMode">
+                    <image class="btn-image"
+                           src="{{soundMode === 'ear' ? '../../static/speaker-false.png': '../../static/speaker-true.png'}} "></image>
+                </view>
+                <text class="{{callType === 2 ? 'white' : ''}}">扬声器</text>
+            </view>
+            <view class="button-container" wx:if="{{callType === 2}}">
+                <view class="btn-normal" bindtap="pusherVideoHandler">
+                    <image class="btn-image"
+                           src="{{pusher.enableCamera ? '../../static/camera-true.png': '../../static/camera-false.png'}} "></image>
+                </view>
+                <text class="white">摄像头</text>
+            </view>
+        </view>
+        <view class="btn-list" wx:if="{{callType===2}}">
+            <view class="btn-list-item other-view">
+                <view class="btn-container">
+                    <view class="btn-hangup" bindtap="hangup">
+                        <image class="btn-image" src="../../static/hangup.png"></image>
+                    </view>
+                    <view wx:if="{{pusher.enableCamera}}" class="invite-calling-header-left">
+                        <image src="../../static/switch_camera.png" data-device="{{pusher.frontCamera}}"
+                               catch:tap="toggleSwitchCamera"/>
+                    </view>
+                </view>
+                <text class="white">挂断</text>
+            </view>
+        </view>
+    </view>
+</view>
@@ -0,0 +1,414 @@
+/* 全屏设置 */
+.TUICalling-connected-layout {
+  width: 100%;
+  height: 100%;
+}
+
+.TUICalling-connected-video {
+  width: 100%;
+  height: 180%;
+}
+
+/* 本地音频 */
+.stream-box {
+  float: left;
+  width: 187px;
+  height: 187px;
+  position: absolute;
+  top: 13vh;
+}
+
+/* 远端音频列表 */
+.swiper {
+  margin-top: 107px;
+  min-height: 374px;
+}
+
+.invite-calling-list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: flex-start
+}
+
+.invite-calling-item {
+  flex: 0.5;
+  /*设置最小宽度，才会让元素排不下，导致换行排列*/
+  min-width: 50%;
+  height: 187px;
+  position: relative;
+}
+
+.invite-calling-item image {
+  width: 100%;
+  height: 100%;
+}
+
+/* 本地视频 */
+.play-item {
+  width: 100%;
+  height: 187px;
+  position: relative;
+}
+
+.pusher-ownvideo {
+  width: 100%;
+  height: 100%;
+}
+
+
+/* 远端视频列表 */
+.swiper-list {
+  min-height: 189px;
+}
+
+.player-list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center
+}
+
+.player-item {
+  flex: 0.5;
+  /*设置最小宽度，才会让元素排不下，导致换行排列*/
+  min-width: 50%;
+  min-height: 187px;
+}
+
+/* 音量图标 */
+.player-control {
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 0 6px 6px 0;
+  color: #fff;
+  z-index: 999;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  max-width: 50%;
+  z-index: 99;
+}
+
+.player-control image {
+  width: 32px;
+  height: 32px;
+}
+
+.player-control .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 10px;
+  margin-right: 10px;
+  flex: 1;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.control-buttons {
+  display: flex;
+}
+
+.icon-button {
+  margin-right: 10px;
+}
+
+/* 菜单 */
+.handle-btns {
+  position: absolute;
+  bottom: 44px;
+  width: 100vw;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+}
+
+.handle-btns .btn-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.btn-normal {
+  width: 8vh;
+  height: 8vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /* background: white; */
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+.btn-image {
+  width: 100%;
+  height: 100%;
+  background: none;
+}
+
+.btn-hangup {
+  width: 8vh;
+  height: 8vh;
+  /*background: #f75c45;*/
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+.btn-hangup>.btn-image {
+  width: 100%;
+  height: 100%;
+  background: none;
+}
+
+.TRTCCalling-call-audio {
+  width: 100%;
+  height: 100%;
+}
+
+.btn-footer {
+  position: relative;
+}
+
+.btn-footer .multi-camera {
+  width: 32px;
+  height: 32px;
+}
+
+.btn-footer .camera {
+  width: 64px;
+  height: 64px;
+  position: fixed;
+  left: 16px;
+  top: 107px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.btn-footer .camera .camera-image {
+  width: 32px;
+  height: 32px;
+}
+
+.audio {
+  padding-top: 15vh;
+  background: #ffffff;
+}
+
+.pusher-audio {
+  width: 0;
+  height: 0;
+}
+
+.player-audio {
+  width: 0;
+  height: 0;
+}
+
+.other-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 18px;
+  letter-spacing: 0;
+  font-weight: 400;
+  padding: 16px;
+}
+
+.white {
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+  padding: 5px;
+}
+
+.black {
+  color: #000000;
+  padding: 5px;
+}
+
+.TRTCCalling-call-audio-box {
+  margin-top: 100px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center
+}
+
+/*
+.mutil-img {
+    justify-content: flex-start !important;
+} */
+
+/* .TRTCCalling-call-audio-img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.TRTCCalling-call-audio-img > image {
+    width: 25vw;
+    height: 25vw;
+    margin: 0 4vw;
+    border-radius: 4vw;
+    position: relative;
+}
+
+.TRTCCalling-call-audio-img text {
+    font-size: 20px;
+    color: #333333;
+    letter-spacing: 0;
+    font-weight: 500;
+}  */
+
+.TRTCCalling-calling-list {
+  flex: 0.5;
+  /*设置最小宽度，才会让元素排不下，导致换行排列*/
+  min-width: 50%;
+  min-height: 187px;
+  position: relative;
+}
+
+.TRTCCalling-calling-list image {
+  width: 100%;
+  height: 100%;
+}
+
+.TRTCCalling-calling-item-id {
+  position: absolute;
+  left: 2%;
+  bottom: 2%;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+.btn-list-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+
+.btn-image-small {
+  transform: scale(.7);
+}
+
+.avatar {
+  background: #dddddd;
+}
+
+.btn-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.invite-calling-header-left {
+  position: absolute;
+  right: -88px;
+}
+
+.invite-calling-header-left image {
+  width: 32px;
+  height: 32px;
+}
+
+.call-switch .call-operate {
+  width: 4vh;
+  height: 3vh;
+}
+
+.call-operate image {
+  width: 100%;
+  height: 100%;
+  background: none;
+}
+
+.call-switch text {
+  padding: 0;
+  font-size: 14px;
+}
+
+.btn-operate-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.btn-operate-item text {
+  padding: 8px 0;
+  font-size: 18px;
+  color: #666666;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.invite-calling-item-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  float: left;
+  background: rgba(0, 0, 0, 0.60);
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.invite-calling-item-loadimg {
+  position: absolute;
+  left: calc(50% - 20px);
+  top: calc(50% - 20px);
+  width: 40px;
+  height: 40px;
+  -webkit-transform: rotate(360deg);
+  animation: rotation 2s linear infinite;
+  -moz-animation: rotation 2s linear infinite;
+  -webkit-animation: rotation 2s linear infinite;
+  -o-animation: rotation 2s linear infinite;
+}
+
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.invite-calling-item-loadimg image {
+  width: 100%;
+  height: 100%;
+}
+
+.invite-calling-item-id {
+  position: absolute;
+  left: 2%;
+  bottom: 2%;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+}