gdxz/miniprogram-doctor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频

Browse Source
This commit is contained in:
zoujiandong
2024-01-12 09:38:24 +08:00
parent efb6a9aacf
commit 360c1bb977
301 changed files with 19221 additions and 986 deletions
Download Patch File Download Diff File Expand all files Collapse all files
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/SingleCall/SingleCall.js
Generated Vendored
+107
View File
@@ -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);
},
},
});
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/SingleCall/SingleCall.json
Generated Vendored
+4
View File
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/SingleCall/SingleCall.wxml
Generated Vendored
+172
View File
@@ -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>
node_modules/@tencentcloud/call-uikit-wechat/TUICallKit/component/SingleCall/SingleCall.wxss
Generated Vendored
+508
View File
@@ -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;
}