tencent cloud

// 安装 vue-cli，注意 Vue CLI 4.x 要求 Node.js 为 v10 以上版本
npm install -g @vue/cli
// 创建 Vue3 + Webpack + TS 模版工程
vue create tuiroomkit-demo

cd tuiroomkit-demo
npm run serve

// 安装 vue-cli，注意 Vue CLI 4.x 要求 Node.js 为 v10 以上版本
npm install -g @vue/cli
// 创建 Vue2 + Webpack + Js 模版工程
vue create tuiroomkit-demo

cd tuiroomkit-demo
npm run serve

<template>
  <div id="app">
    <room-container ref="TUIRoomRef"></room-container>
  </div>
</template>

<script>
import RoomContainer from '@/TUIRoom/index.vue';
export default {
  name: 'App',
  components: { RoomContainer },
  data() {
    return {};
  },
  async mounted() {
    // 初始化 TUIRoom 组件
    // 主持人在创建房间前需要先初始化 TUIRoom 组件
    // 普通成员在进入房间前需要先初始化 TUIRoom 组件
    await this.$refs.TUIRoomRef.init({
      // 获取 sdkAppId 请您参考 步骤一
      sdkAppId: 0,
      // 用户在您业务中的唯一标示 Id
      userId: '',
      // 本地开发调试可在 https://console.tencentcloud.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
      userSig: '',
      // 用户在您业务中使用的昵称
      userName: '',
      // 用户在您业务中使用的头像链接
      avatarUrl: '',
    });
    // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法
    await this.handleCreateRoom();
  },
  methods: {
    // 主持人创建房间，该方法只在创建房间时调用
    async handleCreateRoom() {
      // roomId 为用户进入的房间号, 要求 roomId 类型为 string
      // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式
      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)
      const roomId = '123456';
      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);
      }
    },
    // 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用
    async handleEnterRoom() {
      // roomId 为用户进入的房间号, 要求 roomId 类型为 string
      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)
      const roomId = '123456';
      const roomParam = {
          isOpenCamera: true,
          isOpenMicrophone: true,
      }
      try {
        await this.$refs.TUIRoomRef.enterRoom({ roomId, roomParam });
      } catch (error) {
        alert('TUIRoomKit.enterRoom error: ' + error.message);
      }
    }
  },
};

</script>

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

#app {
  width: 100%;
  height: 100%;
  * {
    box-sizing: border-box;
  }
}
</style>