xinelu-doctor-app/pages/Industrialbutler/video.nvue

<template>
	<div class="trtc-container">
		<view class="trtc-video-area">
			<view class="trtc-video-view1" id='root'>
				<trtc-local-view :viewId="userId"></trtc-local-view>
			</view>
			<view class="trtc-video-view2">
				<trtc-remote-view v-if="remoteUserId" :userId="remoteUserId" :viewId="remoteUserId">
				</trtc-remote-view>
			</view>
		</view>
		<image class="imgbtn" @click="leave" src="@/static/leave.png"></image>
	</div>
</template>
<script>
	import permision from "@/TrtcCloud/permission.js";
	import TrtcCloud from '@/TrtcCloud/lib/index';
	import {
		TRTCAppScene,
		TRTCVideoStreamType,
		TRTCAudioRoute,
		TRTCAudioQuality,
		TRTCRoleType
	} from '@/TrtcCloud/lib/TrtcDefines';
	import TrtcLocalView from '@/TrtcCloud/view/TrtcLocalView';
	import TrtcRemoteView from '@/TrtcCloud/view/TrtcRemoteView';

	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.userName = options.userName
			this.userSig = options.userSig
			this.remoteUserId = options.remoteUserId
			console.log(this.userSig, this.userId, this.roomId, this.remoteUserId)
		},
		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();
				this.trtcCloud.on('onWarning', (res) => {
					console.log('- onWarning: ', JSON.stringify(res));
				});
				this.trtcCloud.on('onError', (res) => {
					console.log('- onError: ', JSON.stringify(res));
				});
				// 组装 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.enterRoom(params, TRTCAppScene.TRTCAppSceneVideoCall);
				// 进入房间
				this.trtcCloud.on("onEnterRoom", (result) => {
					if (result > 0) {
						console.log('进房成功');
					}
				});
				// 打开摄像头预览
				this.trtcCloud.startLocalPreview(true, this.userId);
				//打开麦克风采集
				this.trtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualityDefault);
				// 播放远端视频流
				this.trtcCloud.startRemoteView(this.remoteUserId, TRTCVideoStreamType.TRTCVideoStreamTypeBig, this
					.remoteUserId);
				this.trtcCloud.on('onRemoteUserEnterRoom', (userId) => {
					console.log('remote user enter room id ', userId);
				});
				// 视频状态变化通知
				this.trtcCloud.on('onUserVideoAvailable', (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;
		z-index: 99999;
	}

	.trtc-container {
		width: 100%;
		height: 100vh;
	}

	.trtc-video-view1 {
		border-width: 1.92rpx;
		border-color: #BBBBBB;
		height: 500rpx;
		width: 300rpx;
		position: fixed;
		top: 20rpx;
		right: 20rpx;
	}

	.trtc-video-view2 {
		border-width: 1.92rpx;
		border-color: #BBBBBB;
		height: 70%;
		width: 100%;
	}
</style>