285 lines
19 KiB
Plaintext
285 lines
19 KiB
Plaintext
<!-- 语音通话 -->
|
|
<view class="incoming-call audio-call transition-animation" wx:if="{{callMediaType === 1}}">
|
|
<!-- 主叫方呼叫状态 -->
|
|
<swiper class="swiper" wx:if="{{callRole === 'caller' && callStatus === 'calling' }}" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
|
|
<block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
|
|
<swiper-item class="invite-calling-list">
|
|
<view wx:for="{{renderStreamList}}" 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.userId !== localUserInfo.userId}}">
|
|
<view class="invite-calling-item-loadimg">
|
|
<image src="{{IMG_LOADING}}"></image>
|
|
</view>
|
|
<view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<!-- 被叫方呼叫状态 -->
|
|
<view wx:if="{{callRole !== 'caller' && callStatus === 'calling' }}">
|
|
<view class="invite-calling-single">
|
|
<image class="avatar" src="{{callerUserInfo.avatar || IMG_DEFAULT_AVATAR}}" id="{{renderStreamList[0].userId}}" binderror="handleErrorImage" />
|
|
<view class="tips">{{callerUserInfo.nick || callerUserInfo.userId}}</view>
|
|
<view class="invite-txt">邀请你参加多人通话</view>
|
|
</view>
|
|
<view class="invite-other-txt">参与通话的有：</view>
|
|
<view class="invite-other-list">
|
|
<view class="invite-other-item" wx:for="{{renderStreamList}}" wx:key="item">
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-other-item-name">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 主叫/被叫方通话状态 -->
|
|
<view wx:if="{{callStatus === 'connected' }}">
|
|
<view>
|
|
<swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
|
|
<block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
|
|
<swiper-item class="invite-calling-list">
|
|
<view wx:for="{{renderStreamList}}" 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="{{IMG_LOADING}}"></image>
|
|
</view>
|
|
<view class="invite-calling-item-id">
|
|
{{item.displayUserInfo || item.nick || item.userId}}
|
|
</view>
|
|
</view>
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="player-control">
|
|
<image src="{{item.avatar || IMG_DEFAULT_AVATAR}}"></image>
|
|
<view class="name">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<view class="pusher-audio">
|
|
<swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
|
|
<block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
|
|
<swiper-item class="invite-calling-list">
|
|
<view wx:for="{{renderStreamList}}" 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="{{IMG_LOADING}}"></image>
|
|
</view>
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-calling-item-id">
|
|
{{item.displayUserInfo || item.nick || item.userId}}
|
|
</view>
|
|
</view>
|
|
<view wx:else>
|
|
<!-- 本地流 -->
|
|
<view wx:if="{{item.userId===localUserInfo.userId}}" class="pusher-audio" data-screen="pusher" catch:tap="toggleViewSize">
|
|
<live-pusher class="pusher-audio" 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 || IMG_DEFAULT_AVATAR}}"></image>
|
|
<view class="name">我</view>
|
|
</view>
|
|
</view>
|
|
<!-- 远端流 -->
|
|
<view class="pusher-audio" wx:else>
|
|
<live-player wx:if="{{playerProcess[item.userId]}}" wx:if="{{ playerProcess[item.userId].hasAudio || playerProcess[item.userId].hasVideo }}" class="{{callMediaType === 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="{{isEarPhone?'ear':'speaker'}}" 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>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<!-- 呼叫阶段按钮 -->
|
|
<view wx:if="{{callStatus === 'calling'}}" 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;color: #666666">挂断</view>
|
|
</view>
|
|
<view class="button-container">
|
|
<view class="call-operate" catch:tap="accept">
|
|
<image src="{{IMG_ACCEPT}}" />
|
|
</view>
|
|
<view style="margin-top:10px;color: #666666">接听</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;color: #666666">挂断</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 通话阶段按钮 -->
|
|
<view wx:if="{{callStatus === 'connected'}}" 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>
|
|
<!-- 视频通话 -->
|
|
<view class="invite-call audio-call transition-animation" wx:if="{{callMediaType === 2}}">
|
|
<!-- 通话状态 -->
|
|
<view wx:if="{{callStatus === 'connected' }}">
|
|
<swiper class="swiper" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
|
|
<block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
|
|
<swiper-item class="invite-calling-list">
|
|
<view wx:for="{{renderStreamList}}" 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="{{IMG_LOADING}}"></image>
|
|
</view>
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
<view wx:else>
|
|
<!-- 本地流 -->
|
|
<view wx:if="{{item.userId === localUserInfo.userId}}" class="play-item" data-screen="pusher">
|
|
<live-pusher class="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 || IMG_DEFAULT_AVATAR}}"></image>
|
|
<view class="name">我</view>
|
|
</view>
|
|
</view>
|
|
<!-- 远端流 -->
|
|
<view class="play-item" wx:else>
|
|
<live-player class="pusher-ownvideo" wx:if="{{playerProcess[item.userId]}}" wx:if="{{ playerProcess[item.userId].hasAudio || playerProcess[item.userId].hasVideo }}" 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="{{isEarPhone?'ear':'speaker'}}" 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 || IMG_DEFAULT_AVATAR}}"></image>
|
|
<view class="name">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<!-- 邀请信息 -->
|
|
<view class="invite-calling">
|
|
<!-- 主叫方 -->
|
|
<swiper class="swiper" wx:if="{{callRole === 'caller' && callStatus === 'calling' }}" indicator-dots="{{renderStreamList.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
|
|
<block wx:for="{{(renderStreamList.length)/4}}" wx:key="*this" wx:for-index="pos">
|
|
<swiper-item class="invite-calling-list">
|
|
<view wx:for="{{renderStreamList}}" 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.userId !== localUserInfo.userId}}">
|
|
<view class="invite-calling-item-loadimg">
|
|
<image src="{{IMG_LOADING}}"></image>
|
|
</view>
|
|
<view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-calling-item-id">{{item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<!-- 被叫方 -->
|
|
<view wx:if="{{callRole !== 'caller' && callStatus === 'calling' }}">
|
|
<view class="invite-calling-single">
|
|
<image class="avatar" src="{{callerUserInfo.avatar || IMG_DEFAULT_AVATAR}}" id="{{renderStreamList[0].userId}}" binderror="handleErrorImage" />
|
|
<view class="tips">{{ callerUserInfo.nick || callerUserInfo.userId }}</view>
|
|
<view class="invite-txt">邀请你参加多人通话</view>
|
|
</view>
|
|
<view class="invite-other-txt">参与通话的有：</view>
|
|
<view class="invite-other-list">
|
|
<view class="invite-other-item" wx:for="{{renderStreamList}}" wx:key="item">
|
|
<image class="avatar" src="{{item.avatar || IMG_DEFAULT_AVATAR}}" binderror="handleErrorImage" />
|
|
<view class="invite-other-item-name">{{ item.displayUserInfo || item.nick || item.userId}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 呼叫阶段按钮 -->
|
|
<view wx:if="{{callStatus === 'calling' }}" class="footer">
|
|
<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>
|
|
<text style="color: #666666">挂断</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 style="color: #666666">挂断</text>
|
|
</view>
|
|
<view class="btn-operate-item">
|
|
<view class="call-operate" catch:tap="accept">
|
|
<image src="{{IMG_ACCEPT}}" />
|
|
</view>
|
|
<text style="color: #666666">接听</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 通话阶段按钮 -->
|
|
<view wx:if="{{callStatus === 'connected' }}" class="handle-btns">
|
|
<view class="other-view white">
|
|
<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 class="white">麦克风</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 class="white">扬声器</text>
|
|
</view>
|
|
<view class="button-container">
|
|
<view class="btn-normal" bindtap="cameraHandler">
|
|
<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="{{pusher.enableCamera}}" class="invite-calling-header-left">
|
|
<image src="{{IMG_SWITCH_CAMERA}}" data-device="{{pusher.frontCamera}}" catch:tap="toggleSwitchCamera" />
|
|
</view>
|
|
</view>
|
|
<text class="white">挂断</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> |