jyz/pagesA/record/call.vue

<template>
	<view id="pageBox"><trtc-room id="trtcroom" :config="trtcConfig"></trtc-room></view>
</template>

<script>
import { getSig } from '@/api/record.js';
export default {
	data() {
		return {
			trtcConfig: {
				debugMode: false,//开启调试
				sdkAppID: '1400396944', // 开通实时音视频服务创建应用后分配的 SDKAppID
				userID: '', // 用户 ID，可以由您的帐号系统指定
				userSig: '', // 身份签名，相当于登录密码的作用
				template: '1v1',//
				enableCamera: true,//是否开启摄像头。设置为 true 时，调用 enterRoom 后，会自动发布视频
				enableMic: true,//是否开启麦克风。设置为 true 时，调用 enterRoom 后，会自动发布音频
				enableAns: true,//是否开启音频噪声抑制，该特性会自动检测背景噪音并进行过滤，但也会误伤周围的音乐，只有会议、教学等场景才适合开启。
				enableAgc: true,//是否开启音频自动增益，该特性可以补偿部分手机麦克风音量太小的问题，但也会放大噪音，建议配合 ANS 同时开启。
				enableAutoFocus: true//是否开启摄像头自动对焦，如果关闭则需要用户手动点击摄像头中的预览画面进行对焦。
			},
			roomId: '',
			template: '1v1',
			timestamp: [] //当前正在房间的用户
		};
	},
	onLoad(option) {
		let obj = this;
		obj.trtcConfig.userID = option.userId;
		obj.callGetRoom().then(e => {
			obj.trtcConfig.userSig = e;
			console.log('开始调用初始化');
			obj.info();
		});

		obj.roomId = option.roomId;
	},
	methods: {
		// 获取房间号id
		callGetRoom() {
			let obj = this;
			return new Promise(function(resolve, reject) {
				getSig({})
					.then(e => {
						resolve(e.data.UserSig);
					})
					.catch(e => {
						reject(e);
					});
			});
		},
		info() {
			let obj = this;
			// index.js
			let trtcRoomContext = this.selectComponent('#trtcroom');
			let EVENT = trtcRoomContext.EVENT;
			trtcRoomContext.setData(
				{
					trtcConfig: obj.trtcConfig
				},
				e => {
					if (trtcRoomContext) {
						trtcRoomContext.on(EVENT.LOCAL_JOIN, event => {
							console.log('进入房间成功');
							// 进房成功后发布本地音频流和视频流
							trtcRoomContext.publishLocalVideo().then(() => {
								console.log('发布成功1');
								// 发布成功
							});
							trtcRoomContext.publishLocalAudio().then(() => {
								console.log('发布成功2');
								// 发布成功
							});
						});
						// 监听远端用户的视频流的变更事件
						trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, event => {
							console.log('视频流变动');
							// 订阅（即播放）远端用户的视频流
							let userID = event.data.userID;
							let streamType = event.data.streamType; // 'main' or 'aux'
							trtcRoomContext.subscribeRemoteVideo({ userID: userID, streamType: streamType });
						});

						// 监听远端用户的音频流的变更事件
						trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, event => {
							console.log('音频变动’');
							// 订阅（即播放）远端用户的音频流
							let userID = event.data.userID;
							trtcRoomContext.subscribeRemoteAudio({ userID: userID });
						});
						// 远端用户进房
						trtcRoomContext.on(EVENT.REMOTE_USER_JOIN, event => {
							console.log('* room REMOTE_USER_JOIN', event, trtcRoomContext.getRemoteUserList());
							this.timestamp.push(new Date());
							// 1v1视频通话时限制人数为两人的简易逻辑，建议通过后端实现房间人数管理
						});
						// 远端用户退出
						trtcRoomContext.on(EVENT.REMOTE_USER_LEAVE, event => {
							console.log('* room REMOTE_USER_LEAVE', event, trtcRoomContext.getRemoteUserList());
							if (this.template === '1v1') {
								this.timestamp = [];
							}
							if (this.template === '1v1' && this.remoteUser === event.data.userID) {
								this.remoteUser = null;
							}
						});
						// 远端用户推送视频
						trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, event => {
							// 订阅视频
							const userList = trtcRoomContext.getRemoteUserList();
							const data = event.data;
							// 1v1 只订阅第一个远端流
							this.remoteUser = data.userID;
							trtcRoomContext.subscribeRemoteVideo({
								userID: data.userID,
								streamType: data.streamType
							});
						});
						// 本地推送错误
						trtcRoomContext.on(EVENT.ERROR, event => {
							console.log('* room ERROR', event);
						});
						// 进入房间
						trtcRoomContext.enterRoom({ roomID: obj.roomId }).catch(res => {
							console.error('room joinRoom 进房失败:', res);
						});
					}
				}
			);
		}
	}
};
</script>

<style>
#trtcroom,
page,
#pageBox {
	height: 100%;
	width: 100%;
}
</style>