332 lines
7.8 KiB
Plaintext
332 lines
7.8 KiB
Plaintext
|
<template>
|
|||
|
|
<div class="trtc-container">
|
|||
|
|
<view class="trtc-video-area">
|
|||
|
|
<view class="trtc-video-view" id='root'>
|
|||
|
|
<trtc-local-view :viewId="userId" style="height:400rpx;flex: 1"></trtc-local-view>
|
|||
|
|
</view>
|
|||
|
|
<view class="trtc-video-view">
|
|||
|
|
<trtc-remote-view v-if="remoteUserId" :userId="remoteUserId" :viewId="remoteUserId"
|
|||
|
|
style="height:400rpx;flex: 1">
|
|||
|
|
</trtc-remote-view>
|
|||
|
|
</view>
|
|||
|
|
<image class="imgbtn" @click="leave" src="@/static/leave.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import permision from "@/TrtcCloud/permission.js";
|
|||
|
|
import {
|
|||
|
|
TRTCAppScene,
|
|||
|
|
TRTCVideoStreamType,
|
|||
|
|
TRTCAudioRoute,
|
|||
|
|
TRTCAudioQuality,
|
|||
|
|
TRTCRoleType
|
|||
|
|
} from '@/TrtcCloud/lib/TrtcDefines';
|
|||
|
|
import TrtcLocalView from '@/TrtcCloud/view/TrtcLocalView';
|
|||
|
|
import TrtcRemoteView from '@/TrtcCloud/view/TrtcRemoteView';
|
|||
|
|
import TrtcCloud from '@/TrtcCloud/lib/index';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
TrtcLocalView: TrtcLocalView,
|
|||
|
|
TrtcRemoteView: TrtcRemoteView,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
sdkAppId: 1600006944,
|
|||
|
|
userId: '',
|
|||
|
|
remoteUserId: '',
|
|||
|
|
userSig: '',
|
|||
|
|
roomId: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.roomId = options.roomId
|
|||
|
|
this.userId = options.userId
|
|||
|
|
this.remoteUserId = options.userId
|
|||
|
|
this.userName = options.userName
|
|||
|
|
this.userSig = options.userSig
|
|||
|
|
console.log(this.userSig, this.userId, this.roomId)
|
|||
|
|
},
|
|||
|
|
onShow() {},
|
|||
|
|
onBackPress() {
|
|||
|
|
this.trtcCloud.exitRoom();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (uni.getSystemInfoSync().platform === 'android') {
|
|||
|
|
permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
|
|||
|
|
permision.requestAndroidPermission('android.permission.CAMERA');
|
|||
|
|
}
|
|||
|
|
this.join()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
join() {
|
|||
|
|
// 创建 TRTC 的对象实例
|
|||
|
|
this.trtcCloud = TrtcCloud.createInstance();
|
|||
|
|
// 组装 TRTC 进房参数，请将 TRTCParams 中的各字段都替换成您自己的参数
|
|||
|
|
// Please replace each field in TRTCParams with your own parameters
|
|||
|
|
const params = {
|
|||
|
|
sdkAppId: this.sdkAppId, // Please replace with your own sdkAppId
|
|||
|
|
userId: this.userId, // Please replace with your own userid
|
|||
|
|
roomId: this.roomId, // Please replace with your own room number
|
|||
|
|
userSig: this.userSig, // Please replace with your own userSig
|
|||
|
|
role: TRTCRoleType.TRTCRoleAnchor
|
|||
|
|
};
|
|||
|
|
// 如果您的场景是“在线直播”，请将应用场景设置为 TRTC_APP_SCENE_LIVE
|
|||
|
|
// If your application scenario is a video call between several people, please use "TRTC_APP_SCENE_LIVE"
|
|||
|
|
this.trtcCloud.on('onWarning', (res) => {
|
|||
|
|
console.log('- onWarning: ', JSON.stringify(res));
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `onWarning: ${JSON.stringify(res)}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.trtcCloud.on('onError', (res) => {
|
|||
|
|
console.log('- onError: ', JSON.stringify(res));
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `error: ${JSON.stringify(res)}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 打开摄像头预览
|
|||
|
|
//打开麦克风采集
|
|||
|
|
this.trtcCloud.enterRoom(params, TRTCAppScene.TRTCAppSceneVideoCall);
|
|||
|
|
this.trtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualityDefault);
|
|||
|
|
this.trtcCloud.startLocalPreview(true, this.userId);
|
|||
|
|
// 进入房间
|
|||
|
|
this.trtcCloud.on('onEnterRoom', (result) => {
|
|||
|
|
console.log(`- onEnterRoom = ${result}`);
|
|||
|
|
if (result > 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `进房成功，耗时: ${result}ms`,
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.log(`enter room failed，error code = ${result}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 播放远端视频流
|
|||
|
|
this.trtcCloud.startRemoteView(this.remoteUserId, TRTCVideoStreamType.TRTCVideoStreamTypeBig, this
|
|||
|
|
.remoteUserId);
|
|||
|
|
this.trtcCloud.on('onExitRoom', (reason) => {
|
|||
|
|
const reasonList = ['主动调用 exitRoom 退房', '被服务器踢出当前房间', '当前房间整个被解散'];
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `退房 ${reasonList[reason]}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.trtcCloud.on('onFirstVideoFrame', (res) => {
|
|||
|
|
console.log(`渲染的首帧画面响应 = ${JSON.stringify(res)}`);
|
|||
|
|
});
|
|||
|
|
// 视频状态变化通知
|
|||
|
|
this.trtcCloud.on("onRemoteUserEnterRoom", (userId) => {
|
|||
|
|
console.log(`远端进房: userId = ${userId}`);
|
|||
|
|
});
|
|||
|
|
this.trtcCloud.on('onUserVideoAvailable', (res) => {
|
|||
|
|
console.log(res)
|
|||
|
|
const {
|
|||
|
|
userId,
|
|||
|
|
available
|
|||
|
|
} = res;
|
|||
|
|
console.log('onUserVideoAvailable = ', res);
|
|||
|
|
if (userId && available) {
|
|||
|
|
this.remoteUserId = userId;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 音频状态变化通知
|
|||
|
|
this.trtcCloud.on('onUserAudioAvailable', (res) => {
|
|||
|
|
const {
|
|||
|
|
userId,
|
|||
|
|
available
|
|||
|
|
} = res;
|
|||
|
|
console.log('onUserAudioAvailable = ', res);
|
|||
|
|
if (userId && available) {
|
|||
|
|
this.remoteUserId = userId;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//用户离开房间的通知
|
|||
|
|
this.trtcCloud.on('onRemoteUserLeaveRoom', (res) => {
|
|||
|
|
const {
|
|||
|
|
userId,
|
|||
|
|
reason
|
|||
|
|
} = res;
|
|||
|
|
console.log('remote user leave room ', userId, reason);
|
|||
|
|
this.trtcCloud.stopLocalPreview();
|
|||
|
|
this.trtcCloud.stopLocalAudio();
|
|||
|
|
this.trtcCloud.stopRemoteView(this.remoteUserId, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
|
|||
|
|
this.trtcCloud.exitRoom();
|
|||
|
|
this.trtcCloud.off('*');
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
leave() {
|
|||
|
|
this.trtcCloud.exitRoom();
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.imgbtn {
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 43rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
left: 290rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-container {
|
|||
|
|
background-color: #F4F4F4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-log-view {
|
|||
|
|
position: fixed;
|
|||
|
|
background-color: #000000;
|
|||
|
|
height: 76.92rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-log-fold-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-log-text {
|
|||
|
|
width: 750rpx;
|
|||
|
|
font-size: 23.07rpx;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-row-area {
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-left: 36.53rpx;
|
|||
|
|
margin-right: 36.53rpx;
|
|||
|
|
margin-top: 17.3rpx;
|
|||
|
|
margin-bottom: 17.3rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-input {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 9.61rpx;
|
|||
|
|
border-color: #BBBBBB;
|
|||
|
|
border-width: 1.92rpx;
|
|||
|
|
border-style: solid;
|
|||
|
|
color: #101010;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
height: 46.15rpx;
|
|||
|
|
padding-left: 9.61rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-video-area {
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex: 1;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-local-view {}
|
|||
|
|
|
|||
|
|
.trtc-video-view {
|
|||
|
|
border-width: 1.92rpx;
|
|||
|
|
border-color: #BBBBBB;
|
|||
|
|
/* background-color: #FFFFFF; */
|
|||
|
|
height: 403.84rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-video-remote-view {
|
|||
|
|
border-width: 1.92rpx;
|
|||
|
|
border-color: #BBBBBB;
|
|||
|
|
/* background-color: #FFFFFF; */
|
|||
|
|
height: 403.84rpx;
|
|||
|
|
width: 375rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-video-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
background-color: #52C2FF;
|
|||
|
|
color: #FFF;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
bottom: 11.53rpx;
|
|||
|
|
height: 57.69rpx;
|
|||
|
|
left: 17.3rpx;
|
|||
|
|
right: 17.3rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-video-text {
|
|||
|
|
position: fixed;
|
|||
|
|
margin-top: 90.38rpx;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-line {
|
|||
|
|
background-color: #BBBBBB;
|
|||
|
|
height: 1.92rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-title-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-title-text {
|
|||
|
|
color: #101010;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-btn-long {
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
background-color: #2985FF;
|
|||
|
|
border-color: #A3D0FD;
|
|||
|
|
border-width: 1.92rpx;
|
|||
|
|
margin-left: 42.3rpx;
|
|||
|
|
margin-right: 42.3rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
color: #FFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-btn-mid {
|
|||
|
|
background-color: #2985FF;
|
|||
|
|
border-color: #A3D0FD;
|
|||
|
|
color: #FFF;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
width: 292.3rpx;
|
|||
|
|
height: 55.76rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-btn-short {
|
|||
|
|
background-color: #52C2FF;
|
|||
|
|
border-color: #A3D0FD;
|
|||
|
|
color: #FFF;
|
|||
|
|
font-size: 19.23rpx;
|
|||
|
|
width: 75rpx;
|
|||
|
|
height: 38.46rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trtc-conent-text {
|
|||
|
|
color: #AEAEAE;
|
|||
|
|
font-size: 19.23rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-view {
|
|||
|
|
padding: 15rpx 25rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
font-size: 26.92rpx;
|
|||
|
|
background: #FFF;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
</style>
|