cte-share/pages/imcall/audioCall.nvue

<template>
	<view>
		<customNav :shownav="true" :title="i18n('audioCall.imtitle')" tinColor="#00A6FF" jiantou="0"></customNav>
		<view class="contentColumnC" style="width: 700rpx;margin-left: 25rpx;margin-top: 50rpx;">
			<netImage class="spIcon" width="120" height="120" :mysrc="avatar" mymode="scaleToFill"></netImage>
			<text style="margin-top: 30rpx;font-size: 32rpx;">{{nickName}}</text>
			<image v-if="!callState" style="width: 80rpx;height: 80rpx;margin-top: 80rpx;" src="/static/images/jietong.png" mode="scaleToFill" @click="bohaoAct(1)"></image>
			<image v-if="callState" style="width: 80rpx;height: 80rpx;margin-top: 80rpx;" src="/static/images/guaduandd.png" mode="scaleToFill" @click="bohaoAct(2)"></image>
			<text style="margin-top: 80rpx;font-size: 32rpx;">{{noteMessage}}</text>
		</view>
	</view>
	
</template>

<script>
	import api from "@/pages/api/api.js"
	import permision from "@/TrtcCloud/permission.js";
	import TrtcCloud from '@/TrtcCloud/lib/index';
	import { TRTCAppScene, TRTCVideoStreamType, TRTCCloudDef } from '@/TrtcCloud/lib/TrtcDefines';
	import { genTestUserSig } from '@/debug/GenerateTestUserSig';
	import TrtcLocalView from '@/TrtcCloud/view/TrtcLocalView';
	import TrtcRemoteView from '@/TrtcCloud/view/TrtcRemoteView';
	//const roomId = Math.floor(Math.random() * 100000).toString();
	//const userId = 'user_' + Math.floor(Math.random() * 100000).toString();

	export default {
		components: {
			TrtcLocalView: TrtcLocalView,
			TrtcRemoteView: TrtcRemoteView,
		},
		data() {
			return {
				iscaller:false,
				trtcCloud: null,
				sdkAppId:1600036174,
				userSig: '',
				roomId: Math.floor(Math.random() * 100000),
				userId:'',
				appScene: TRTCAppScene.TRTCAppSceneVideoCall, // TRTCAppSceneVideoCall
				isFrontCamera: true,
				streamType: TRTCVideoStreamType.TRTCVideoStreamTypeBig,
				remoteUserId: '',
				userinfo:'',
				friend:'',
				nickName:'',
				avatar:'',
				noteMessage:'',
				callState:false,
				isAndroid:false,
				audioObj:null,
				soundPlay:false
			}
		},
		onLoad(option) {
			var systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			console.log('onLoad---------------------');
			getApp().globalData.imViewOpen=true;
			this.userinfo = uni.getStorageSync('userInfo');
			this.userId='user_'+this.userinfo.userId;
			console.log(this.userId);
			if(option.caller==1){
				this.iscaller=true;
				var friendinfo = uni.getStorageSync('imUser');
				this.friend = {
					id:'userid_'+friendinfo.userId,
					name:friendinfo.nickName,
					avatar:friendinfo.avatar
				}
				console.log(friendinfo);
				this.nickName=friendinfo.nickName;
				this.avatar=friendinfo.avatar;
				this.noteMessage=this.i18n('audioCall.zhengzhj');;
			}
			else{
				if(!this.isAndroid){
					this.audioObj=uni.createInnerAudioContext();
					this.audioObj.src='static/y800.mp3';
					this.audioObj.play();
					this.soundPlay=true;
				}
			}
		},
		mounted() {
			if (uni.getSystemInfoSync().platform === 'android') {
				permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
				permision.requestAndroidPermission('android.permission.CAMERA');
			}
			
			console.log('mounted---------------------');
			// 生成 userSig
			if(this.iscaller){//主动拨号
				this.getUserSig(this.userId);
			}
			else{//接听，解析发起人信息
				var payload=uni.getStorageSync('impayload');
				this.doPushMessage(payload);
				if(this.isAndroid){
					this.getUserSig(this.userId);
				}
				//this.getUserSig(this.userId);
			}
			
		},
		unmounted() {
			this.handleUninstallEvents();
		},
		onUnload() {
			if(this.soundPlay){
				this.audioObj.pause();
			}
			getApp().globalData.imViewOpen=false;
			this.destroyInstance();
			console.log('- onUnload');
		},
		onBackPress() {
			getApp().globalData.imViewOpen=false;
			this.destroyInstance();
		},
		methods: {
			i18n(str){
				var rstr = getApp().globalData.$t(str);
				return rstr;
			},
			doPushMessage(str){
				if(str.indexOf("\\\"")!=-1){
					str=str.replace(/\\\"/g, '\"');
					str = str.replace(/\"{/g, '{');
					str = str.replace(/}\"/g, '}');
				}
				var obj = JSON.parse(str)
				this.friend = {
					id:'userid_'+obj.userId,
					name:obj.nickName,
					avatar:obj.avatar
				}
				console.log('doPushMessage',obj)
				this.roomId=obj.roomId;
				this.nickName=obj.nickName;
				this.avatar=obj.avatar;
			},
			
			destroyInstance() {
				this.exitRoom();
				if (this.trtcCloud) {
					TrtcCloud.destroyInstance();
					this.trtcCloud = null;
					// uni.showToast({
					// 	title: '通话结束',
					// 	icon: 'none'
					// });
				}
			},
			createTrtcCloud() {
				// uni.showToast({
				// 	title: '创建实例 ',
				// 	icon: 'none',
				// });
				this.trtcCloud = TrtcCloud.createInstance();
				this.handleEvents();
			},
			enterRoom() {
				try {
					// 【1】创建实例
					this.createTrtcCloud();
					// 【2】进房
					const { roomId, userId, sdkAppId, appScene, userSig } = this;
					let param = { roomId: +roomId, userId, sdkAppId, userSig };
					console.log(param);
					this.trtcCloud.enterRoom(param, appScene);
					if(!this.iscaller){//接听者开始进入房间
						this.noteMessage=this.i18n('audioCall.zhengzjt');
					}
				} catch (error) {
					this.noteMessage=this.i18n('audioCall.wfjt');
					console.log(`enterRoom error = ${JSON.stringify(error)}`);
					// this.sdkAppId && uni.$enterRoomFailedUpload(this.sdkAppId, JSON.stringify(error));
				}
			},
			exitRoom() {
				try {
					this.stopLocalAudio();
					this.trtcCloud.exitRoom();
					this.remoteUserId = '';
				} catch (e) {
					// TODO handle the exception
				}
			},
			// 开启本地音频采集和上行
			startLocalAudio() {
				this.trtcCloud.enableAudioVolumeEvaluation(300);
				this.trtcCloud.startLocalAudio();
			},
			// 关闭本地音频采集和上行
			stopLocalAudio() {
				this.trtcCloud.stopLocalAudio();
			},
			handleEvents() {
				this.trtcCloud.on('onWarning', (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.sdkAppId && uni.$onErrorUpload(this.sdkAppId, JSON.stringify(res));
				});
				this.trtcCloud.on('onEnterRoom', (result) => {
					console.log(`- onEnterRoom = ${result}`);
					if (result > 0) {
						if(this.iscaller){
							//this.sentroomId();
							this.goEasypushmsg();
						}
						else{
							this.startLocalAudio();
							this.noteMessage=this.i18n('audioCall.yijietong');
						}
						// uni.showToast({
						// 	title: `进房成功，耗时: ${result}ms`,
						// 	icon: 'none',
						// });
					} else {
						this.noteMessage=this.i18n('audioCall.wfjt');
						console.log(`enter room failed，error code = ${result}`);
					}
				});
				this.trtcCloud.on('onExitRoom', (reason) => {
					this.noteMessage=this.i18n('audioCall.yiguanduan');
					//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) => {
					this.remoteUserId = userId;
					this.startLocalAudio();
					this.noteMessage=this.i18n('audioCall.yijietong');
					// uni.showToast({
					// 	title: `远端进房: userId = ${userId}`,
					// 	icon: 'none',
					// });
				});
				this.trtcCloud.on('onUserVideoAvailable', (res) => {
					const {
						userId,
						available
					} = res;
					if (userId && available) {
						this.remoteUserId = userId;
						this.trtcCloud.startRemoteView(this.remoteUserId, this.streamType, this.remoteUserId);
					}
				});
				this.trtcCloud.on('onUserVoiceVolume', (res) => {
					//console.log('音量 = ', res);
				});
			},
			handleUninstallEvents() {
				this.trtcCloud.off('*');
			},
			//---------------------------------------------------------------
			bohaoAct(index){
				if(index==1){//接通
					if(this.soundPlay){
						this.audioObj.pause();
					}
					this.getUserSig(this.userId);
				}
				else if(index==2){//挂断
					uni.navigateBack();
				}
				
			},
			getUserSig(userId){
				this.callState=true;
				console.log(userId);
				// // 生成 userSig
				// const { sdkAppId, userSig } = genTestUserSig(userId);
				// this.sdkAppId = sdkAppId;
				// this.userSig = userSig;
				// this.enterRoom();
				// console.log(userId,this.userSig);
				// return;
				api('getUserSig',{
					userId:userId,
				},res=>{
					console.log('getUserSig',res)
					if(res.data.code==200){
						this.userSig = res.data.data;
						this.enterRoom();
					}
					else{
						this.noteMessage=this.i18n('audioCall.wfjt');
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			sentroomId(){
				if(this.imUser.cid==''||this.imUser.cid==null||this.imUser.cid==undefined){
					uni.showToast({
						title:this.i18n('audioCall.hujiaosb'),
						icon: 'none',
						duration: 1000
					});
					return;
				}
				var payload={
					roomId:JSON.stringify(this.roomId),
					nickName:this.userinfo.nickName,
					avatar:this.userinfo.avatar,
				}
				api('pushMsgQS',{
					cid:this.imUser.cid,
					title:'IM Call',
					content:'IM Call',
					payload:payload
				},res=>{
					console.log(res)
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			goEasypushmsg(){
				var payload={
					roomId:JSON.stringify(this.roomId),
					userId:this.userinfo.userId,
					nickName:this.userinfo.nickName,
					avatar:this.userinfo.avatar,
					ptype:1
				}
			  var goEasy=getApp().globalData.goEasy;
			  var pubsub = goEasy.pubsub;
			  pubsub.publish({
				  channel:this.friend.id,  //请确认与接收端一致
				  message:JSON.stringify(payload),   //app内onMessage收到的消息内容
				  notification: { //定义通知栏推送
					  title: 'IM Call', //通知栏提醒标题，仅显示于通知栏
					  body:'Call', //通知栏提醒内容，仅显示于通知栏
				  },
				  onSuccess: function () {
					  console.log("Publish successfully.")
				  },
				  onFailed: function (error) {
					  console.log("Failed to publish message, code:" + error.code + ' error:' + error.content);
				  }
			  });
			},
		}
	}
</script>

<style>
.iconImg{
	margin-top: 30rpx;
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	background-color: #1A1A1A;
}
.spIcon{
	margin: 20rpx;
	width: 150rpx;
	height: 150rpx;
}
</style>