xinelu-applet-ui/pagesmeeting/calling.vue

<template>
	<view class="container">
		<view class="trtc-demo-container">
			<!-- <view class='title'  >
		    <view>多人会议</view>
		  </view> -->
			<view class="input-box">
				<input type="number" v-model="roomID" maxlength="10" placeholder="请输入房间号"
					placeholder-style="opacity: 0.55;" />
			</view>
			<view class="choice-content">
				<view class="label">
					<text>开启摄像头</text>
					<u-switch inactiveColor="#999999" activeColor="#00B38A" v-model="localVideo"
						@change="switchHandler" />
				</view>
				<view class="label">
					<text>开启麦克风</text>
					<u-switch inactiveColor="#999999" activeColor="#00B38A" v-model="localAudio"
						@change="switchHandler2" />
				</view>
			</view>
		</view>

		<view class='bottom-btn'>
			<button class="btn" @click="enterRoom" hover-class="none">进入房间</button>
		</view>
	</view>
</template>
<script>
	// import {
	// 	genTestUserSig
	// } from './debug/GenerateTestUserSig'
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				roomID: '',
				localVideo: true,
				localAudio: true,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLaunch() {

		},
		onLoad() {

		},
		methods: {
			enterRoom() {
				const nowTime = new Date()
				if (nowTime - this.tapTime < 1000) {
					return
				}
				if (!this.roomID) {
					uni.showToast({
						title: '请输入房间号',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				if (/^\d*$/.test(this.roomID) === false) {
					uni.showToast({
						title: '房间号只能为数字',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				if (this.roomID > 4294967295 || this.roomID < 1) {
					uni.showToast({
						title: '房间号取值范围为 1~4294967295',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				const userID = '123'; //userID
				// const Signature = genTestUserSig(userID)
				// const url =
				// 	`./room/room?roomID=${this.roomID}&localVideo=${this.localVideo}&localAudio=${this.localAudio}&userID=${userID}&sdkAppID=${Signature.sdkAppID}&userSig=${Signature.userSig}`
				this.tapTime = nowTime
				this.checkDeviceAuthorize().then((result) => {
						console.log('授权成功', result)
						wx.navigateTo({
							url
						})
					})
					.catch((error) => {
						console.log('没有授权', error)
					})
			},
			checkDeviceAuthorize() {
				this.hasOpenDeviceAuthorizeModal = false
				return new Promise((resolve, reject) => {
					if (!wx.getSetting || !wx.getSetting()) {
						// 微信测试版 获取授权API异常，目前只能即使没授权也可以通过
						resolve()
					}
					wx.getSetting().then((result) => {
						console.log('getSetting', result)
						this.authorizeMic = result.authSetting['scope.record']
						this.authorizeCamera = result.authSetting['scope.camera']
						if (result.authSetting['scope.camera'] && result.authSetting['scope.record']) {
							// 授权成功
							resolve()
						} else {
							// 没有授权，弹出授权窗口
							// 注意： wx.authorize 只有首次调用会弹框，之后调用只返回结果，如果没有授权需要自行弹框提示处理
							console.log('getSetting 没有授权，弹出授权窗口', result)
							wx.authorize({
									scope: 'scope.record',
								}).then((res) => {
									console.log('authorize mic', res)
									this.authorizeMic = true
									if (this.authorizeCamera) {
										resolve()
									}
								})
								.catch((error) => {
									console.log('authorize mic error', error)
									this.authorizeMic = false
								})
							wx.authorize({
									scope: 'scope.camera',
								}).then((res) => {
									console.log('authorize camera', res)
									this.authorizeCamera = true
									if (this.authorizeMic) {
										resolve()
									} else {
										this.openConfirm()
										reject(new Error('authorize fail'))
									}
								})
								.catch((error) => {
									console.log('authorize camera error', error)
									this.authorizeCamera = false
									this.openConfirm()
									reject(new Error('authorize fail'))
								})
						}
					})
				})
			},
			openConfirm() {
				if (this.hasOpenDeviceAuthorizeModal) {
					return
				}
				this.hasOpenDeviceAuthorizeModal = true
				return uni.showModal({
					content: '您没有打开麦克风和摄像头的权限，是否去设置打开？',
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						this.hasOpenDeviceAuthorizeModal = false
						console.log(res)
						// 点击“确认”时打开设置页面
						if (res.confirm) {
							console.log('用户点击确认')
							wx.openSetting({
								success: (res) => {},
							})
						} else {
							console.log('用户点击取消')
						}
					},
				})
			},
			switchHandler(e) {
				this.localVideo = e;
			},
			switchHandler2(e) {
				this.localAudio = e;
			},
			onBack() {
				wx.navigateBack({
					delta: 1,
				})
			},
		}

	}
</script>
<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.trtc-demo-container {
		/* background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png); */
		/* background-color: #333; */
		/* background-repeat:no-repeat;
	  background-size: cover; */
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}

	.trtc-demo-container .title {
		color: #FFFFFF;
		padding-top: 65rpx;
		line-height: 60rpx;
	}

	.trtc-demo-container .input-box {
		background-color: transparent;
		color: #333;
		padding: 2vw 5vw 1vw;
		border-bottom: 1px solid #577785;
		margin: 100rpx 0 40rpx 0;
		text-align: center;
		box-sizing: border-box;
		width: 80vw;
	}

	.trtc-demo-container .input-box input {
		font-size: 20px;
	}

	.choice-content {
		margin-top: 20rpx;
		width: 80vw;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between;
	  flex-wrap: wrap; */
		font-size: 14px;
		color: #333;
	}

	.label {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
	}

	.choice-content switch {
		color: #00B38A;
		transform: scale(0.8);
	}


	.bottom-btn {
		position: fixed;
		width: 100vw;
		text-align: center;
		bottom: 5vh;
	}

	.bottom-btn .btn {
		width: 80%;
		background-color: #00B38A;
		border-radius: 50px;
		color: #ffffff;
	}

	.close {
		position: absolute;
		padding-left: 5vw;
		padding-right: 5vw;
		width: 50rpx;
		height: 60rpx;
	}
</style>