视频
This commit is contained in:
zoujiandong
Generated
Vendored
+116
@@ -0,0 +1,116 @@
|
||||
import { TUICallKitServer } from "../../../TUICallService/index";
|
||||
const PATH = '../../../static';
|
||||
Component({
|
||||
properties: {
|
||||
callRole: {
|
||||
type: String,
|
||||
},
|
||||
callStatus: {
|
||||
type: String,
|
||||
},
|
||||
callMediaType: {
|
||||
type: Number,
|
||||
},
|
||||
callDuration: {
|
||||
type: String,
|
||||
},
|
||||
pusher: {
|
||||
type: Object,
|
||||
},
|
||||
playerList: {
|
||||
type: Array,
|
||||
},
|
||||
localUserInfo: {
|
||||
type: Object,
|
||||
},
|
||||
callerUserInfo: {
|
||||
type: Object
|
||||
},
|
||||
remoteUserInfoList: {
|
||||
type: Array,
|
||||
},
|
||||
playerProcess: {
|
||||
type: Object,
|
||||
},
|
||||
isEarPhone: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data: {
|
||||
renderStreamList: [],
|
||||
IMG_DEFAULT_AVATAR:`${PATH}/default_avatar.png`,
|
||||
IMG_LOADING:`${PATH}/loading.png`,
|
||||
IMG_HANGUP:`${PATH}/hangup.png`,
|
||||
IMG_ACCEPT: `${PATH}/dialing.png`,
|
||||
IMG_SPEAKER_FALSE:`${PATH}/speaker-false.png`,
|
||||
IMG_SPEAKER_TRUE:`${PATH}/speaker-true.png`,
|
||||
IMG_AUDIO_TRUE:`${PATH}/audio-true.png`,
|
||||
IMG_AUDIO_FALSE:`${PATH}/audio-false.png`,
|
||||
IMG_CAMERA_TRUE:`${PATH}/camera-true.png`,
|
||||
IMG_CAMERA_FALSE:`${PATH}/camera-false.png`,
|
||||
IMG_TRANS:`${PATH}/trans.png`,
|
||||
IMG_SWITCH_CAMERA:`${PATH}/switch_camera.png`,
|
||||
},
|
||||
observers: {
|
||||
"localUserInfo, remoteUserInfoList": function (
|
||||
localUserInfo,
|
||||
remoteUserInfoList
|
||||
) {
|
||||
this.setData({
|
||||
renderStreamList: [localUserInfo, ...remoteUserInfoList],
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async accept() {
|
||||
await TUICallKitServer.accept();
|
||||
},
|
||||
async hangup() {
|
||||
await TUICallKitServer.hangup();
|
||||
},
|
||||
async reject() {
|
||||
await TUICallKitServer.reject();
|
||||
},
|
||||
async switchCamera() {
|
||||
await TUICallKitServer.switchCamera();
|
||||
},
|
||||
async microPhoneHandler() {
|
||||
if (this.data.localUserInfo.isAudioAvailable) {
|
||||
await TUICallKitServer.closeMicrophone();
|
||||
} else {
|
||||
await TUICallKitServer.openMicrophone();
|
||||
}
|
||||
},
|
||||
async cameraHandler() {
|
||||
if (this.data.localUserInfo.isVideoAvailable) {
|
||||
await TUICallKitServer.closeCamera();
|
||||
} else {
|
||||
await TUICallKitServer.openCamera();
|
||||
}
|
||||
},
|
||||
async toggleSoundMode() {
|
||||
await TUICallKitServer.setSoundMode();
|
||||
},
|
||||
pusherStateChangeHandler(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherStateChangeHandler(e);
|
||||
},
|
||||
pusherNetStatus(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherNetStatus(e);
|
||||
},
|
||||
pusherErrorHandler(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherNetStatus(e);
|
||||
},
|
||||
pusherAudioVolumeNotify(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherAudioVolumeNotify(e);
|
||||
},
|
||||
playerStateChange(e) {
|
||||
TUICallKitServer._tuiCallEngine._playerStateChange(e);
|
||||
},
|
||||
playNetStatus(e) {
|
||||
TUICallKitServer._tuiCallEngine._playNetStatus(e);
|
||||
},
|
||||
playerAudioVolumeNotify(e) {
|
||||
TUICallKitServer._tuiCallEngine._playerAudioVolumeNotify(e);
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Generated
Vendored
+285
@@ -0,0 +1,285 @@
|
||||
<!-- 语音通话 -->
|
||||
<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>
|
||||
Generated
Vendored
+754
@@ -0,0 +1,754 @@
|
||||
.transition-animation {
|
||||
transform: translateY(-100%);
|
||||
animation: slideInDown 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-operate-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-operate-item text {
|
||||
font-size: 14px;
|
||||
color: #f0e9e9;
|
||||
padding: 5px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.call-switch text {
|
||||
padding: 5px;
|
||||
color: #f0e9e9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.call-operate {
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
border-radius: 8vh;
|
||||
margin: 0 15vw;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.call-switch .call-operate {
|
||||
width: 4vh;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.call-operate image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto;
|
||||
font-weight: 600;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tips-subtitle {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.invite-call {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
.invite-call .local-video {
|
||||
width: 100px;
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
.invite-call .invite-calling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.invite-calling-header {
|
||||
margin-top: 107px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invite-calling-header-left {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.invite-calling-header-left image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.invite-calling-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invite-calling-header-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.invite-calling-header-right image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.invite-calling .footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-calling .btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trtc-calling {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.audio-call > .btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-call > image {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
display: block;
|
||||
margin: 20vw 30vw;
|
||||
margin-top: 40vw;
|
||||
}
|
||||
|
||||
.invite-calling-single > image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
margin: 120px auto 15px;
|
||||
}
|
||||
|
||||
.invite-calling-single .tips {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.invite-calling-single .tips-subtitle {
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #97989c;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.invite-calling-item-message {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
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;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* 被叫者 */
|
||||
.invite-txt {
|
||||
width: 126px;
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
margin: 16px auto 60px auto;
|
||||
}
|
||||
|
||||
.invite-other-txt {
|
||||
width: 112px;
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto 24px auto;
|
||||
}
|
||||
|
||||
.invite-other-list {
|
||||
position: absolute;
|
||||
left: 14vw;
|
||||
margin-top: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 272px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.invite-other-item {
|
||||
flex: 0.25;
|
||||
text-align: center;
|
||||
max-width: 64px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.invite-other-item image {
|
||||
border-radius: 10%;
|
||||
max-width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.invite-other-item-name {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* 全屏设置 */
|
||||
.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;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.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, 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;
|
||||
}
|
||||
|
||||
.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(0.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.6);
|
||||
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;
|
||||
}
|
||||
Generated
Vendored
+107
@@ -0,0 +1,107 @@
|
||||
import { TUICallKitServer } from "../../../TUICallService/index";
|
||||
const PATH = '../../../static';
|
||||
Component({
|
||||
properties: {
|
||||
callRole: {
|
||||
type: String,
|
||||
},
|
||||
callStatus: {
|
||||
type: String,
|
||||
},
|
||||
callMediaType: {
|
||||
type: Number,
|
||||
},
|
||||
callDuration: {
|
||||
type: String,
|
||||
},
|
||||
pusher: {
|
||||
type: Object,
|
||||
},
|
||||
playerList: {
|
||||
type: Array,
|
||||
},
|
||||
localUserInfo: {
|
||||
type:Object
|
||||
},
|
||||
remoteUserInfoList: {
|
||||
type: Array,
|
||||
},
|
||||
isEarPhone: {
|
||||
type: Boolean,
|
||||
},
|
||||
bigScreenUserId: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data:{
|
||||
IMG_DEFAULT_AVATAR:`${PATH}/default_avatar.png`,
|
||||
IMG_HANGUP:`${PATH}/hangup.png`,
|
||||
IMG_ACCEPT: `${PATH}/dialing.png`,
|
||||
IMG_SPEAKER_FALSE:`${PATH}/speaker-false.png`,
|
||||
IMG_SPEAKER_TRUE:`${PATH}/speaker-true.png`,
|
||||
IMG_AUDIO_TRUE:`${PATH}/audio-true.png`,
|
||||
IMG_AUDIO_FALSE:`${PATH}/audio-false.png`,
|
||||
IMG_CAMERA_TRUE:`${PATH}/camera-true.png`,
|
||||
IMG_CAMERA_FALSE:`${PATH}/camera-false.png`,
|
||||
IMG_TRANS:`${PATH}/trans.png`,
|
||||
IMG_SWITCH_CAMERA:`${PATH}/switch_camera.png`,
|
||||
},
|
||||
methods: {
|
||||
async accept() {
|
||||
await TUICallKitServer.accept();
|
||||
},
|
||||
async hangup() {
|
||||
await TUICallKitServer.hangup();
|
||||
},
|
||||
async reject() {
|
||||
await TUICallKitServer.reject();
|
||||
},
|
||||
async switchCamera() {
|
||||
await TUICallKitServer.switchCamera();
|
||||
},
|
||||
async switchCallMediaType() {
|
||||
await TUICallKitServer.switchCallMediaType();
|
||||
},
|
||||
async microPhoneHandler() {
|
||||
if (this.data.localUserInfo.isAudioAvailable) {
|
||||
await TUICallKitServer.closeMicrophone();
|
||||
} else {
|
||||
await TUICallKitServer.openMicrophone();
|
||||
}
|
||||
},
|
||||
async cameraHandler() {
|
||||
if (this.data.localUserInfo.isVideoAvailable) {
|
||||
await TUICallKitServer.closeCamera();
|
||||
} else {
|
||||
await TUICallKitServer.openCamera();
|
||||
}
|
||||
},
|
||||
async toggleSoundMode() {
|
||||
await TUICallKitServer.setSoundMode();
|
||||
},
|
||||
toggleViewSize() {
|
||||
TUICallKitServer.switchScreen(this.data.bigScreenUserId ? 'player':'localVideo')
|
||||
},
|
||||
pusherStateChangeHandler(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherStateChangeHandler(e);
|
||||
},
|
||||
pusherNetStatus(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherNetStatus(e);
|
||||
},
|
||||
pusherErrorHandler(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherNetStatus(e);
|
||||
},
|
||||
pusherAudioVolumeNotify(e) {
|
||||
TUICallKitServer._tuiCallEngine._pusherAudioVolumeNotify(e);
|
||||
},
|
||||
playerStateChange(e) {
|
||||
TUICallKitServer._tuiCallEngine._playerStateChange(e);
|
||||
},
|
||||
playNetStatus(e) {
|
||||
TUICallKitServer._tuiCallEngine._playNetStatus(e);
|
||||
},
|
||||
playerAudioVolumeNotify(e) {
|
||||
TUICallKitServer._tuiCallEngine._playerAudioVolumeNotify(e);
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Generated
Vendored
+172
@@ -0,0 +1,172 @@
|
||||
<!-- 音频通话 -->
|
||||
<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>
|
||||
Generated
Vendored
+508
@@ -0,0 +1,508 @@
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.btn-operate-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-operate-item text {
|
||||
font-size: 14px;
|
||||
color: #f0e9e9;
|
||||
padding: 5px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.call-switch text {
|
||||
padding: 5px;
|
||||
color: #f0e9e9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.call-operate {
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
border-radius: 8vh;
|
||||
margin: 0 15vw;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.call-switch .call-operate {
|
||||
width: 4vh;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.call-operate image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.40); */
|
||||
font-weight: 600;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tips-subtitle {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
text-align: right;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.30); */
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.invite-call {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.transition-animation {
|
||||
transform: translateY(-100%);
|
||||
animation: slideInDown 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.invite-call .local-video {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.invite-call .invite-calling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.invite-calling-header {
|
||||
margin-top: 107px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.invite-calling-header-left {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.invite-calling-header-left image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.invite-calling-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.invite-calling-header-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.invite-calling-header-right image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.invite-calling .footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
.invite-calling .btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trtc-calling {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #ffffff;
|
||||
}
|
||||
.audio-call > .btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-call > image {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
display: block;
|
||||
margin: 20vw 30vw;
|
||||
margin-top: 40vw;
|
||||
}
|
||||
|
||||
.invite-calling-single > image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
margin: 140px auto 15px;
|
||||
/* margin: 20vw 30vw; */
|
||||
}
|
||||
|
||||
.invite-calling-single .tips {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.invite-calling-single .tips-subtitle {
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #97989c;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.invite-calling-list {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.invite-calling-item {
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.invite-calling-item image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.invite-calling-item-message {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.player {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 107px;
|
||||
width: 100px;
|
||||
height: 178px;
|
||||
padding: 16px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.pusher-video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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(0.7);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invite-calling-connected {
|
||||
position: absolute;
|
||||
right: -88px;
|
||||
}
|
||||
|
||||
.invite-calling-connected 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;
|
||||
}
|
||||
Generated
Vendored
-148
@@ -1,148 +0,0 @@
|
||||
// components/tui-calling/TUICalling/component/calling.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
isSponsor: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
pusher: {
|
||||
type: Object,
|
||||
},
|
||||
callType: {
|
||||
type: Number,
|
||||
},
|
||||
remoteUsers: {
|
||||
type: Array,
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
isClick: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期方法
|
||||
*/
|
||||
lifetimes: {
|
||||
created() {
|
||||
|
||||
},
|
||||
attached() {
|
||||
},
|
||||
ready() {
|
||||
},
|
||||
detached() {
|
||||
},
|
||||
error() {
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
async handleCheckAuthor(e) {
|
||||
const type =this.data.callType;
|
||||
wx.getSetting({
|
||||
success: async (res) => {
|
||||
const isRecord = res.authSetting['scope.record'];
|
||||
const isCamera = res.authSetting['scope.camera'];
|
||||
if (!isRecord && type === 1) {
|
||||
const title = '麦克风权限授权';
|
||||
const content = '使用语音通话，需要在设置中对麦克风进行授权允许';
|
||||
try {
|
||||
await wx.authorize({ scope: 'scope.record' });
|
||||
this.accept(e);
|
||||
} catch (e) {
|
||||
this.handleShowModal(title, content);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if ((!isRecord || !isCamera) && type === 2) {
|
||||
const title = '麦克风、摄像头权限授权';
|
||||
const content = '使用视频通话，需要在设置中对麦克风、摄像头进行授权允许';
|
||||
try {
|
||||
await wx.authorize({ scope: 'scope.record' });
|
||||
await wx.authorize({ scope: 'scope.camera' });
|
||||
this.accept(e);
|
||||
} catch (e) {
|
||||
this.handleShowModal(title, content);
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.accept(e);
|
||||
},
|
||||
});
|
||||
},
|
||||
handleShowModal(title, content) {
|
||||
wx.showModal({
|
||||
title,
|
||||
content,
|
||||
confirmText: '去设置',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
wx.openSetting();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
accept(event) {
|
||||
this.setData({
|
||||
isClick: false,
|
||||
});
|
||||
const data = {
|
||||
name: 'accept',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
hangup(event) {
|
||||
const data = {
|
||||
name: 'hangup',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
reject(event) {
|
||||
const data = {
|
||||
name: 'reject',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
handleErrorImage(e) {
|
||||
const { id } = e.target;
|
||||
const remoteUsers = this.data.remoteUsers.map((item) => {
|
||||
if (item.userID === id) {
|
||||
item.avatar = '../../static/default_avatar.png';
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.setData({
|
||||
remoteUsers,
|
||||
});
|
||||
},
|
||||
toggleSwitchCamera(event) {
|
||||
const data = {
|
||||
name: 'toggleSwitchCamera',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
switchAudioCall(event) {
|
||||
const data = {
|
||||
name: 'switchAudioCall',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Generated
Vendored
-105
@@ -1,105 +0,0 @@
|
||||
<view class="invite-call" wx:if="{{callType === 2}}">
|
||||
<live-pusher class="local-video" wx:if="{{remoteUsers.length === 1}}" device-position="{{pusher.frontCamera}}" />
|
||||
<view class="invite-calling">
|
||||
<view class="invite-calling-header" wx:if="{{remoteUsers.length === 1}}">
|
||||
<!-- <view class="invite-calling-header-left">
|
||||
<image src="../../static/swtich-camera.png" data-device="{{pusher.frontCamera}}"
|
||||
catch:tap="toggleSwitchCamera" />
|
||||
</view> -->
|
||||
<view class="invite-calling-header-right">
|
||||
<view class="invite-calling-header-message">
|
||||
<label class="tips">{{remoteUsers[0].nick || remoteUsers[0].userID}}</label>
|
||||
<text class="tips-subtitle" wx:if="{{!isSponsor}}">邀请你视频通话</text>
|
||||
<text class="tips-subtitle" wx:else>等待对方接受</text>
|
||||
</view>
|
||||
<image class="avatar" src="{{remoteUsers[0].avatar || '../../static/default_avatar.png'}}"
|
||||
id="{{remoteUsers[0].userID}}" binderror="handleErrorImage" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="invite-calling-header invite-calling-list" wx:else>
|
||||
<view class="invite-calling-item" wx:for="{{remoteUsers}}" wx:key="userID">
|
||||
<image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" id="{{item.userID}}"
|
||||
binderror="handleErrorImage" />
|
||||
<view class="invite-calling-item-message">
|
||||
<label class="tips">{{item.nick || item.userID}}</label>
|
||||
<text class="tips-subtitle" wx:if="{{!isSponsor}}">邀请你视频通话</text>
|
||||
<text class="tips-subtitle" wx:else>等待对方接受</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="btn-operate" wx:if="{{isSponsor}}">
|
||||
<view class="btn-operate-item call-switch" catch:tap="switchAudioCall">
|
||||
<view class="call-operate">
|
||||
<image src="../../static/trans.png" />
|
||||
</view>
|
||||
<text>切到语音通话</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-operate" wx:if="{{isSponsor}}">
|
||||
<view class="btn-operate-item">
|
||||
<view class="btn-container">
|
||||
<view class="call-operate" catch:tap="hangup">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<view class="invite-calling-header-left">
|
||||
<image src="../../static/switch_camera.png" data-device="{{pusher.frontCamera}}"
|
||||
catch:tap="toggleSwitchCamera" />
|
||||
</view>
|
||||
</view>
|
||||
<text>挂断</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn-operate" wx:if="{{!isSponsor}}">
|
||||
<view class="btn-operate-item">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="reject">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<text>挂断</text>
|
||||
</view>
|
||||
<view class="btn-operate-item">
|
||||
<view class="call-operate" catchtap="{{isClick ? 'handleCheckAuthor' :''}}">
|
||||
<image src="../../static/dialing.png" />
|
||||
</view>
|
||||
<text>接听</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="incoming-call audio-call" wx:if="{{callType === 1}}">
|
||||
<view class="invite-calling-single">
|
||||
<image class="avatar" src="{{remoteUsers[0].avatar || '../../static/default_avatar.png'}}"
|
||||
id="{{remoteUsers[0].userID}}" binderror="handleErrorImage" />
|
||||
<view class="tips">{{remoteUsers[0].nick || remoteUsers[0].userID}}</view>
|
||||
<view wx:if="{{isSponsor && callType === 1}}" class="tips-subtitle">{{'等待对方接受'}}</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<view wx:if="{{!isSponsor && callType === 1}}" class="btn-operate">
|
||||
<view class="button-container">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="reject">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<view style="margin-top:10px">挂断</view>
|
||||
</view>
|
||||
<view class="button-container">
|
||||
<view class="call-operate" catchtap="{{isClick ? 'handleCheckAuthor' :''}}">
|
||||
<image src="../../static/dialing.png"/>
|
||||
</view>
|
||||
<view style="margin-top:10px">接听</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{isSponsor && callType === 1}}" class="btn-operate">
|
||||
<view class="button-container">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="hangup">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<view style="margin-top:10px">挂断</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Generated
Vendored
-242
@@ -1,242 +0,0 @@
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* flex-direction: column;
|
||||
text-align: center; */
|
||||
|
||||
}
|
||||
.btn-operate-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btn-operate-item text {
|
||||
font-size: 14px;
|
||||
color: #f0e9e9;
|
||||
padding: 5px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.call-switch text{
|
||||
padding: 5px;
|
||||
color: #f0e9e9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.call-operate {
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
border-radius: 8vh;
|
||||
margin: 0 15vw;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.call-switch .call-operate {
|
||||
width: 4vh;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.call-operate image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.40); */
|
||||
font-weight: 600;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tips-subtitle {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: right;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.30); */
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.invite-call {
|
||||
/* background: #ffffff; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.invite-call .local-video {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.invite-call .invite-calling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.invite-calling-header {
|
||||
margin-top:107px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
|
||||
}
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.invite-calling-header-left {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.invite-calling-header-left image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.invite-calling-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.invite-calling-header-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.invite-calling-header-right image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.invite-calling .footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
.invite-calling .btn-operate{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trtc-calling {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.audio-call > .btn-operate{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-call > image {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
display: block;
|
||||
margin: 20vw 30vw;
|
||||
margin-top: 40vw;
|
||||
}
|
||||
|
||||
.invite-calling-single > image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
margin: 140px auto 15px;
|
||||
/* margin: 20vw 30vw; */
|
||||
}
|
||||
|
||||
.invite-calling-single .tips {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.invite-calling-single .tips-subtitle {
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #97989C;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.invite-calling-list {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.invite-calling-item {
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.invite-calling-item image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.invite-calling-item-message {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: #dddddd;
|
||||
}
|
||||
Generated
Vendored
-147
@@ -1,147 +0,0 @@
|
||||
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],
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Generated
Vendored
-118
@@ -1,118 +0,0 @@
|
||||
<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>
|
||||
Generated
Vendored
-253
@@ -1,253 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
Generated
Vendored
-153
@@ -1,153 +0,0 @@
|
||||
// components/tui-calling/TUICalling/component/calling.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
isSponsor: {
|
||||
type: Boolean,
|
||||
},
|
||||
pusher: {
|
||||
type: Object,
|
||||
},
|
||||
callType: {
|
||||
type: Number,
|
||||
},
|
||||
allUsers: {
|
||||
type: Array,
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
},
|
||||
ownUserId: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
userID: null,
|
||||
isClick: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期方法
|
||||
*/
|
||||
lifetimes: {
|
||||
created() {
|
||||
},
|
||||
attached() {
|
||||
},
|
||||
ready() {
|
||||
|
||||
},
|
||||
detached() {
|
||||
|
||||
},
|
||||
error() {
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
async handleCheckAuthor(e) {
|
||||
const type =this.data.callType;
|
||||
wx.getSetting({
|
||||
success: async (res) => {
|
||||
const isRecord = res.authSetting['scope.record'];
|
||||
const isCamera = res.authSetting['scope.camera'];
|
||||
if (!isRecord && type === 1) {
|
||||
const title = '麦克风权限授权';
|
||||
const content = '使用语音通话，需要在设置中对麦克风进行授权允许';
|
||||
try {
|
||||
await wx.authorize({ scope: 'scope.record' });
|
||||
this.accept(e);
|
||||
} catch (e) {
|
||||
this.handleShowModal(title, content);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if ((!isRecord || !isCamera) && type === 2) {
|
||||
const title = '麦克风、摄像头权限授权';
|
||||
const content = '使用视频通话，需要在设置中对麦克风、摄像头进行授权允许';
|
||||
try {
|
||||
await wx.authorize({ scope: 'scope.record' });
|
||||
await wx.authorize({ scope: 'scope.camera' });
|
||||
this.accept(e);
|
||||
} catch (e) {
|
||||
this.handleShowModal(title, content);
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.accept(e);
|
||||
},
|
||||
});
|
||||
},
|
||||
handleShowModal(title, content) {
|
||||
wx.showModal({
|
||||
title,
|
||||
content,
|
||||
confirmText: '去设置',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
wx.openSetting();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
accept(event) {
|
||||
this.setData({
|
||||
isClick: false,
|
||||
});
|
||||
const data = {
|
||||
name: 'accept',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
hangup(event) {
|
||||
const data = {
|
||||
name: 'hangup',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
reject(event) {
|
||||
const data = {
|
||||
name: 'reject',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
handleErrorImage(e) {
|
||||
const { id } = e.target;
|
||||
const allUsers = this.data.allUsers.map((item) => {
|
||||
if (item.userID === id) {
|
||||
item.avatar = '../../static/default_avatar.png';
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.setData({
|
||||
allUsers,
|
||||
});
|
||||
},
|
||||
toggleSwitchCamera(event) {
|
||||
const data = {
|
||||
name: 'toggleSwitchCamera',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
switchAudioCall(event) {
|
||||
const data = {
|
||||
name: 'switchAudioCall',
|
||||
event,
|
||||
};
|
||||
this.triggerEvent('callingEvent', data);
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Generated
Vendored
-137
@@ -1,137 +0,0 @@
|
||||
<view class="trtc-calling-index">
|
||||
<!-- 视频通话 -->
|
||||
<view class="invite-call" wx:if="{{callType === 2}}">
|
||||
<live-pusher class="local-video" wx:if="{{isGroup===false}}" device-position="{{pusher.frontCamera}}" />
|
||||
<view class="invite-calling">
|
||||
<!-- 主叫方 -->
|
||||
<swiper class="swiper" wx:if="{{isSponsor}}" 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.userID !== ownUserId}}">
|
||||
<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="invite-calling-item-id">{{item.nick || item.userID}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- 被叫方 -->
|
||||
<view wx:else>
|
||||
<view class="invite-calling-single">
|
||||
<image class="avatar" src="{{allUsers[0].avatar || '../../static/default_avatar.png'}}" id="{{allUsers[0].userID}}" binderror="handleErrorImage" />
|
||||
<view class="tips">{{allUsers[0].nick || allUsers[0].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:if="{{index>0}}" wx:for="{{allUsers}}" wx:key="item">
|
||||
<image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
|
||||
<view class="invite-other-item-name">{{ item.nick || item.userID}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<!-- <view class="btn-operate" wx:if="{{isSponsor}}">
|
||||
<view class="btn-operate-item call-switch" catch:tap="switchAudioCall">
|
||||
<view class="call-operate">
|
||||
<image src="../../static/trans.png" />
|
||||
</view>
|
||||
<text>切到语音通话</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="btn-operate" wx:if="{{isSponsor}}">
|
||||
<view class="btn-operate-item">
|
||||
<view class="btn-container">
|
||||
<view class="call-operate" catch:tap="hangup">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<!-- <view class="invite-calling-header-left">
|
||||
<image src="../../static/switch_camera.png" data-device="{{pusher.frontCamera}}" catch:tap="toggleSwitchCamera" />
|
||||
</view> -->
|
||||
</view>
|
||||
<text style="color: #666666">挂断</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-operate" wx:if="{{!isSponsor}}">
|
||||
<view class="btn-operate-item">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="reject">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<text style="color: #666666">挂断</text>
|
||||
</view>
|
||||
<view class="btn-operate-item">
|
||||
<view class="call-operate" catchtap="{{isClick ? 'handleCheckAuthor' :''}}">
|
||||
<image src="../../static/dialing.png" />
|
||||
</view>
|
||||
<text style="color: #666666">接听</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 语音通话 -->
|
||||
<view class="incoming-call audio-call" wx:if="{{callType === 1}}">
|
||||
<!-- 主叫方 -->
|
||||
<swiper class="swiper" wx:if="{{isSponsor}}" 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.userID !== ownUserId}}">
|
||||
<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="invite-calling-item-id">{{item.nick || item.userID}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- 被叫方 -->
|
||||
<view wx:else>
|
||||
<view class="invite-calling-single">
|
||||
<image class="avatar" src="{{allUsers[0].avatar || '../../static/default_avatar.png'}}" id="{{allUsers[0].userID}}" binderror="handleErrorImage" />
|
||||
<view class="tips">{{allUsers[0].nick || allUsers[0].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:if="{{index>0}}" wx:for="{{allUsers}}" wx:key="item">
|
||||
<image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
|
||||
<view class="invite-other-item-name">{{item.nick || item.userID}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 菜单 -->
|
||||
<view class="footer">
|
||||
<view wx:if="{{!isSponsor && callType === 1}}" class="btn-operate">
|
||||
<view class="button-container">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="reject">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<view style="margin-top:10px;color: #666666">挂断</view>
|
||||
</view>
|
||||
<view class="button-container">
|
||||
<view class="call-operate" catchtap="{{isClick ? 'handleCheckAuthor' :''}}">
|
||||
<image src="../../static/dialing.png" />
|
||||
</view>
|
||||
<view style="margin-top:10px;color: #666666">接听</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{isSponsor && callType === 1}}" class="btn-operate">
|
||||
<view class="button-container">
|
||||
<view class="call-operate" style="background-color: red" catch:tap="hangup">
|
||||
<image src="../../static/hangup.png" />
|
||||
</view>
|
||||
<view style="margin-top:10px;color: #666666">挂断</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Generated
Vendored
-366
@@ -1,366 +0,0 @@
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-operate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* flex-direction: column;
|
||||
text-align: center; */
|
||||
|
||||
}
|
||||
|
||||
.btn-operate-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-operate-item text {
|
||||
font-size: 14px;
|
||||
color: #f0e9e9;
|
||||
padding: 5px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.call-switch text {
|
||||
padding: 5px;
|
||||
color: #f0e9e9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.call-operate {
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
border-radius: 8vh;
|
||||
margin: 0 15vw;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.call-switch .call-operate {
|
||||
width: 4vh;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.call-operate image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.40); */
|
||||
font-weight: 600;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tips-subtitle {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: right;
|
||||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.30); */
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.invite-call {
|
||||
/* background: #ffffff; */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100px;
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
.invite-call .local-video {
|
||||
width: 100px;
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
.invite-call .invite-calling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 101;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.invite-calling-header {
|
||||
margin-top: 107px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invite-calling-header-left {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.invite-calling-header-left image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.invite-calling-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invite-calling-header-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.invite-calling-header-right image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.invite-calling .footer {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invite-calling .btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trtc-calling {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.audio-call {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.audio-call>.btn-operate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-call>image {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
display: block;
|
||||
margin: 20vw 30vw;
|
||||
margin-top: 40vw;
|
||||
}
|
||||
|
||||
.invite-calling-single>image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
margin: 120px auto 15px;
|
||||
/* margin: 20vw 30vw; */
|
||||
}
|
||||
|
||||
.invite-calling-single .tips {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.invite-calling-single .tips-subtitle {
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #97989C;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
/* 被叫者 */
|
||||
.invite-txt {
|
||||
width: 126px;
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
margin: 16px auto 60px auto;
|
||||
}
|
||||
|
||||
.invite-other-txt {
|
||||
width: 112px;
|
||||
height: 20px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
margin: 0 auto 24px auto;
|
||||
}
|
||||
|
||||
.invite-other-list {
|
||||
position: absolute;
|
||||
left: 14vw;
|
||||
margin-top: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 272px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.invite-other-item {
|
||||
flex: 0.25;
|
||||
/*设置最小宽度，才会让元素排不下，导致换行排列*/
|
||||
text-align: center;
|
||||
max-width: 64px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.invite-other-item image {
|
||||
border-radius: 10%;
|
||||
max-width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.invite-other-item-name {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
Generated
Vendored
-173
@@ -1,173 +0,0 @@
|
||||
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],
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/groupConnected/groupConnected.json
Generated
Vendored
-7
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {},
|
||||
"window": {
|
||||
"backgroundColor": "#2c292923;"
|
||||
}
|
||||
}
|
||||
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/groupConnected/groupConnected.wxml
Generated
Vendored
-162
@@ -1,162 +0,0 @@
|
||||
<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>
|
||||
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/groupConnected/groupConnected.wxss
Generated
Vendored
-414
@@ -1,414 +0,0 @@
|
||||
/* 全屏设置 */
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user