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,147 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    playerList: {
+      type: Array,
+    },
+    pusher: {
+      type: Object,
+    },
+    callType: {
+      type: Number,
+    },
+    soundMode: {
+      type: String,
+    },
+    screen: {
+      type: String,
+    },
+    userList: {
+      type: Object,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  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,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
@@ -0,0 +1,118 @@
+<view class="TUICalling-connected-layout {{callType === 1 ? 'audio' : 'video'}}">
+    <view
+        class="{{callType === 1 ? 'pusher-audio' : playerList.length > 1 ? 'stream-box' : (screen === 'pusher' ? 'pusher-video' : 'player')}}"
+        data-screen="pusher" catch:tap="toggleViewSize">
+        <live-pusher class="{{callType === 1 ? 'pusher-audio' : 'live'}}" 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>
+    <view wx:if="{{callType === 1}}" class="TRTCCalling-call-audio-box {{playerList.length > 1 && 'mutil-img'}}">
+        <view class="TRTCCalling-call-audio-img" wx:if="{{playerList.length > 1}}">
+            <image src="{{pusher.avatar || '../../static/default_avatar.png'}}" class="img-place-holder avatar"
+                data-value="{{pusher.userID}}" data-flag="pusher" binderror="handleConnectErrorImage" />
+            <text class="audio-name">{{pusher.nick || pusher.userID}}(自己)</text>
+        </view>
+        <view class="TRTCCalling-call-audio-img" wx:for="{{userList || playerList}}" wx:key="userID">
+            <image src="{{item.avatar || '../../static/default_avatar.png'}}" class="img-place-holder avatar"
+                data-value="{{item}}" data-flag="player" data-key="userList" data-index="{{index}}" binderror="handleConnectErrorImage" />
+            <text class="audio-name">{{item.nick || item.userID}}</text>
+        </view>
+    </view>
+    <view wx:for="{{playerList}}" wx:key="streamID"
+        class="view-container player-container {{callType === 1 ? 'player-audio' : ''}}">
+        <view
+            class="{{callType === 1 ? 'player-audio' : playerList.length > 1 ? 'stream-box' : (screen === 'player' ? 'pusher-video' : 'player')}}"
+            data-screen="player" catch:tap="toggleViewSize">
+            <live-player class="live" wx:if="{{ item.hasAudio || item.hasVideo }}" id="{{item.id}}" data-userid="{{item.userID}}" data-streamid="{{item.streamID}}"
+                data-streamtype="{{item.streamType}}" src="{{item.src}}" mode="RTC" autoplay="{{item.autoplay}}"
+                mute-audio="{{item.muteAudio}}" mute-video="{{item.muteVideo}}" orientation="{{item.orientation}}"
+                object-fit="{{item.objectFit}}" background-mute="{{item.enableBackgroundMute}}"
+                min-cache="{{item.minCache}}" max-cache="{{item.maxCache}}" sound-mode="{{soundMode}}"
+                enable-recv-message="{{item.enableRecvMessage}}" auto-pause-if-navigate="{{item.autoPauseIfNavigate}}"
+                auto-pause-if-open-native="{{item.autoPauseIfOpenNative}}" bindstatechange="playerStateChange"
+                bindfullscreenchange="playerFullscreenChange" bindnetstatus="playNetStatus"
+                bindaudiovolumenotify="playerAudioVolumeNotify" />
+        </view>
+    </view>
+    <view class="handle-btns">
+        <view class="other-view {{callType === 1 ? 'black' : 'white'}}">
+            <text>{{pusher.chatTime}}</text>
+        </view>
+        <view class="btn-operate-item call-switch" catch:tap="switchAudioCall">
+            <view class="call-operate">
+                <image src="../../static/trans.png" />
+            </view>
+            <text>切到语音通话</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">
+                <view wx:if="{{playerList.length === 1}}" class="btn-normal" bindtap="switchAudioCall">
+                    <image class="btn-image btn-image-small" src="{{ '../../static/trans.png'}} "></image>
+                </view>
+            </view> -->
+            <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 class="btn-list-item btn-footer">
+                <view wx:if="{{pusher.enableCamera}}" class="{{playerList.length > 1 ? 'multi-camera' : 'camera'}}">
+                    <image class="camera-image" src="../../static/swtich-camera.png"
+                        data-device="{{pusher.frontCamera}}" catch:tap="toggleSwitchCamera" />
+                </view>
+            </view> -->
+        </view>
+    </view>
+</view>
@@ -0,0 +1,253 @@
+.player {
+    position: absolute;
+    right: 16px;
+    top: 107px;
+    width: 100px;
+    height: 178px;
+    padding: 16px;
+    z-index: 3;
+}
+
+.pusher-video {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    /* background-color: #f75c45; */
+    z-index: 1;
+}
+
+.stream-box {
+    position: relative;
+    float: left;
+    width: 50vw;
+    height: 260px;
+    /* background-color: #f75c45; */
+    z-index: 3;
+}
+
+.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;
+}
+
+.TUICalling-connected-layout {
+    width: 100%;
+    height: 100%;
+}
+
+.audio {
+    padding-top: 15vh;
+    background: #ffffff;
+}
+
+.pusher-audio {
+    width: 0;
+    height: 0;
+}
+
+.player-audio {
+    width: 0;
+    height: 0;
+}
+
+.live {
+    width: 100%;
+    height: 100%;
+}
+
+.other-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 18px;
+    letter-spacing: 0;
+    font-weight: 400;
+    padding: 16px;
+}
+
+.white {
+    color: #f0e9e9;
+    padding: 5px;
+    font-size: 14px;
+}
+
+.black {
+    color: #000000;
+    padding: 5px;
+}
+
+.TRTCCalling-call-audio-box {
+    display: flex;
+    flex-wrap: wrap;
+    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;
+}
+
+.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: #FFFFFF;
+    letter-spacing: 0;
+    font-weight: 400;
+    font-size: 14px;
+}