miniprogram-doctor/node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/SingleCall/SingleCall.wxml

<!-- 音频通话 -->
<view class="{{callMediaType === 1?'audio-call':'invite-call' }} transition-animation">
  <!-- 本地流 -->
  <view class="{{callMediaType === 1 ? 'pusher-audio' : (bigScreenUserId || callStatus === 'calling'  ? 'pusher-video' : 'player')}}" data-screen="pusher" catch:tap="toggleViewSize">
    <live-pusher class="{{callMediaType === 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:for="{{playerList}}" wx:key="streamID" class="view-container player-container" catch:tap="toggleViewSize">
    <view class="{{callMediaType === 1 ? 'player-audio' : (!bigScreenUserId ? 'pusher-video' : 'player')}}" data-screen="player">
      <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="{{isEarPhone?'ear':'speaker'}}" 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 wx:if="{{callMediaType === 1}}" class="invite-calling-single">
    <image class="avatar" src="{{remoteUserInfoList[0].avatar || IMG_DEFAULT_AVATAR}}" id="{{remoteUserInfoList[0].userId}}" binderror="handleErrorImage" />
    <view class="tips">{{remoteUserInfoList[0].displayUserInfo}}</view>
    <view wx:if="{{callRole === 'caller' && callStatus === 'calling' }}" class="tips-subtitle">等待对方接受</view>
  </view>
  <!-- 视频通话邀请信息 -->
  <view wx:if="{{callStatus === 'calling' && callMediaType === 2}}" class="invite-calling">
    <view class="invite-calling-header">
      <view class="invite-calling-header-right">
        <view class="invite-calling-header-message">
          <label class="tips">
            {{remoteUserInfoList[0].displayUserInfo}}
          </label>
          <text class="tips-subtitle" wx:if="{{callRole !== 'caller'}}">邀请你视频通话</text>
          <text class="tips-subtitle" wx:else>等待对方接受</text>
        </view>
        <image class="avatar" src="{{remoteUserInfoList[0].avatar || IMG_DEFAULT_AVATAR}}" id="{{remoteUserInfoList[0].userId}}" binderror="handleErrorImage" />
      </view>
    </view>
  </view>
  <!-- 语音通话呼叫状态按钮 -->
  <view wx:if="{{callStatus === 'calling' && callMediaType === 1}}" class="footer">
    <view wx:if="{{callRole !== 'caller'}}" class="btn-operate">
      <view class="button-container">
        <view class="call-operate" style="background-color: red" catch:tap="reject">
          <image src="{{IMG_HANGUP}}" />
        </view>
        <view style="margin-top:10px">挂断</view>
      </view>
      <view class="button-container">
        <view class="call-operate" catch:tap="accept">
          <image src="{{IMG_ACCEPT}}" />
        </view>
        <view style="margin-top:10px">接听</view>
      </view>
    </view>
    <view wx:if="{{callRole === 'caller'}}" class="btn-operate">
      <view class="button-container">
        <view class="call-operate" style="background-color: red" catch:tap="hangup">
          <image src="{{IMG_HANGUP}}" />
        </view>
        <view style="margin-top:10px">挂断</view>
      </view>
    </view>
  </view>
  <!-- 视频通话呼叫状态按钮 -->
  <view wx:if="{{callStatus === 'calling' && callMediaType === 2}}" class="invite-calling">
    <view class="footer">
      <view class="btn-operate" wx:if="{{callRole === 'caller'}}">
        <view class="btn-operate-item call-switch" catch:tap="switchCallMediaType">
          <view class="call-operate">
            <image src="{{IMG_TRANS}}" />
          </view>
          <text>切到语音通话</text>
        </view>
      </view>
      <view class="btn-operate" wx:if="{{callRole === 'caller'}}">
        <view class="btn-operate-item">
          <view class="btn-container">
            <view class="call-operate" catch:tap="hangup">
              <image src="{{IMG_HANGUP}}" />
            </view>
            <view class="invite-calling-header-left">
              <image src="{{IMG_SWITCH_CAMERA}}" data-device="{{pusher.frontCamera}}" catch:tap="switchCamera" />
            </view>
          </view>
          <text>挂断</text>
        </view>
      </view>
      <view class="btn-operate" wx:if="{{callRole !== 'caller'}}">
        <view class="btn-operate-item">
          <view class="call-operate" style="background-color: red" catch:tap="reject">
            <image src="{{IMG_HANGUP}}" />
          </view>
          <text>挂断</text>
        </view>
        <view class="btn-operate-item">
          <view class="call-operate" catch:tap="accept">
            <image src="{{IMG_ACCEPT}}" />
          </view>
          <text>接听</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 语音通话接通状态按钮 -->
  <view wx:if="{{callStatus === 'connected' && callMediaType === 1}}" class="handle-btns">
    <view class="other-view black">
      <text>{{callDuration}}</text>
    </view>
    <view class="btn-list">
      <view class="button-container">
        <view class="btn-normal" bindtap="microPhoneHandler">
          <image class="btn-image" src="{{localUserInfo.isAudioAvailable? IMG_AUDIO_TRUE: IMG_AUDIO_FALSE}} "></image>
        </view>
        <view>麦克风</view>
      </view>
      <view class="button-container">
        <view class="btn-hangup" bindtap="hangup">
          <image class="btn-image" src="{{IMG_HANGUP}}"></image>
        </view>
        <view>挂断</view>
      </view>
      <view class="button-container">
        <view class="btn-normal" bindtap="toggleSoundMode">
          <image class="btn-image" src="{{isEarPhone ? IMG_SPEAKER_FALSE: IMG_SPEAKER_TRUE}} "></image>
        </view>
        <text>扬声器</text>
      </view>
    </view>
  </view>
  <!-- 视频通话接听状态按钮 -->
  <view wx:if="{{callStatus === 'connected' && callMediaType === 2}}" class="invite-calling">
    <view class="handle-btns">
      <view class="other-view white">
        <text>{{callDuration}}</text>
      </view>
      <view class="btn-operate-item call-switch" catch:tap="switchCallMediaType">
        <view class="call-operate">
          <image src="{{IMG_TRANS}}" />
        </view>
        <text>切到语音通话</text>
      </view>
      <view class="btn-list">
        <view class="button-container" bindtap="microPhoneHandler">
          <view class="btn-normal">
            <image class="btn-image" src="{{localUserInfo.isAudioAvailable? IMG_AUDIO_TRUE: IMG_AUDIO_FALSE}} "></image>
          </view>
          <view class="white">麦克风</view>
        </view>
        <view class="button-container" bindtap="toggleSoundMode">
          <view class="btn-normal">
            <image class="btn-image" src="{{isEarPhone ? IMG_SPEAKER_FALSE: IMG_SPEAKER_TRUE}} "></image>
          </view>
          <text class="white">扬声器</text>
        </view>
        <view class="button-container" bindtap="cameraHandler">
          <view class="btn-normal">
            <image class="btn-image" src="{{localUserInfo.isVideoAvailable ? IMG_CAMERA_TRUE: IMG_CAMERA_FALSE}} "></image>
          </view>
          <text class="white">摄像头</text>
        </view>
      </view>
      <view class="btn-list">
        <view class="btn-list-item other-view">
          <view class="btn-container">
            <view class="btn-hangup" bindtap="hangup">
              <image class="btn-image" src="{{IMG_HANGUP}}"></image>
            </view>
            <view wx:if="{{localUserInfo.isVideoAvailable}}" class="invite-calling-connected">
              <image src="{{IMG_SWITCH_CAMERA}}" data-device="{{pusher.frontCamera}}" catch:tap="switchCamera" />
            </view>
          </view>
          <text class="white">挂断</text>
        </view>
      </view>
    </view>
  </view>
</view>