Arbitrate-FrontendH5/src/views/room.vue

<template>
    <div id="app">
        <room-container ref="TUIRoomRef" @on-destroy-room="onDestroyRoom" @on-exit-room="onExitRoom"></room-container>
    </div>
</template>
  
<script>
import RoomContainer from '@/TUIRoom/index.vue';
import axios from 'axios'
export default {
    name: 'roomKit',
    components: { RoomContainer },
    data() {
        return {
            userSig: '',
            roomId: '',
            userId: "",
            userName: ""
        };
    },
    created() {

    },
    async mounted() {
        let roomIdParams = this.$route.query.roomId;
        let roomIdParams1 = this.$route.query.roomId1;
        this.userId = this.$route.query.userId + '';
        this.userName = this.$route.query.userName;
        if (roomIdParams) {
            this.roomId = roomIdParams;
        } else if (roomIdParams1) {
            this.roomId = roomIdParams1;
        }
        await this.getUsersig();
        // 初始化 TUIRoom 组件
        // 主持人在创建房间前需要先初始化 TUIRoom 组件
        // 普通成员在进入房间前需要先初始化 TUIRoom 组件
        await this.$refs.TUIRoomRef.init({
            // 获取 sdkAppId 请您参考 步骤一
            sdkAppId: 1600011167,
            // 用户在您业务中的唯一标示 Id
            userId: this.userId,
            // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
            userSig: this.userSig,
            // 用户在您业务中使用的昵称
            userName: this.userName,
            // 用户在您业务中使用的头像链接
            avatarUrl: '',
        });
        // 当主持人新建房间时在创建房间
        if (roomIdParams) {
            await this.handleCreateRoom();
        } else if (roomIdParams1) {
            await this.handleEnterRoom()
        }
    },
    methods: {
        // 主持人创建房间，该方法只在创建房间时调用
        async handleCreateRoom() {
            // roomId 为用户进入的房间号, 要求 roomId 类型为 string
            // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式
            // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)
            const roomId = this.roomId;
            const roomMode = 'FreeToSpeak';
            const roomParam = {
                isOpenCamera: true,
                isOpenMicrophone: true,
            }
            try {
                await this.$refs.TUIRoomRef.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
            } catch (error) {
                // alert('TUIRoomKit.createRoom error: ' + error.message);
                this.$message({
                    message: 'TUIRoomKit.createRoom error: ' + error.message,
                    type: 'error'
                });
                this.$router.push({ name: "Home" })
            }
        },
        // 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用
        async handleEnterRoom() {
            // roomId 为用户进入的房间号, 要求 roomId 类型为 string
            // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)
            const roomId = this.roomId;
            const roomParam = {
                isOpenCamera: true,
                isOpenMicrophone: true,
            }
            try {
                await this.$refs.TUIRoomRef.enterRoom({ roomId, roomParam });
            } catch (error) {
                alert('TUIRoomKit.enterRoom error: ' + error.message);
                this.$router.push({ name: "Home" })
            }
        },
        // 获取userSig
        async getUsersig() {
            await axios({
                method: "get",
                url: `https://api.xayunmei.com/zhongcaiapi/caseApplication/generateUserSign?userId=${this.userId}`,
            }).then(res => {
                this.userSig = res.data.msg;
            })
        },
        // 结束会议
        onDestroyRoom() {
            this.$router.push({ name: "Home" })
        },
        // 普通成员离开房间
        onExitRoom() {
            this.$router.push({ name: "Home" })
        }
    },
};

</script>
  
<style lang="scss">
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

#app {
    width: 100%;
    height: 100%;

    * {
        box-sizing: border-box;
    }
}
</style>