H5视频代码

2023-11-10 18:57:18 +08:00
parent 8452da4adc
commit d7f5ce05ea
267 changed files with 27851 additions and 0 deletions
@@ -0,0 +1,134 @@
+<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>