285 lines
6.5 KiB
Vue
285 lines
6.5 KiB
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>
|