연동 가이드

<template>
  <UIKitProvider theme="light" language="zh-CN">
    <ConferenceMainView></ConferenceMainView>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
</script>

import { onMounted } from 'vue';
import { conference } from '@tencentcloud/roomkit-web-vue3';

// Replace these values with your actual business data and SDKAppID from the console
const SDKAppID = 0;
const userId = 'your_user_id';
const userSig = 'your_dynamic_user_sig';
const userName = 'Display Name';

onMounted(async () => {
  try {
    // 1. Log in to the SDK
    await conference.login({
      sdkAppId: SDKAppID,
      userId,
      userSig,
    });
    // 2. (Optional) Set user profile information
    await conference.setSelfInfo({
      userName,
      avatarUrl: 'https://your-avatar-url.com/image.png',
    });
  } catch (error) {
    console.error('TUIRoomKit login failed:', error);
  }
});

import { watch } from 'vue';
import { useLoginState } from 'tuikit-atomicx-vue3/room';
import { conference, RoomType } from '@tencentcloud/roomkit-web-vue3';

const { loginUserInfo } = useLoginState();

watch(() => loginUserInfo.value?.userId, async (userId) => {
  if (userId) {
    await conference.joinRoom({ roomId: 'webinar_123456', roomType: RoomType.Webinar });
  }
}, { immediate: true });

import { conference, RoomType } from '@tencentcloud/roomkit-web-vue3';

const startWebinar = async () => {
  await conference.createAndJoinRoom({
    roomId: 'webinar_123456', // Replace with your actual roomId. Prefix webinar roomIds with 'webinar_' for clarity.
    roomType: RoomType.Webinar,
    options: {
      roomName: 'My Webinar',
    },
  });
};

POST /v4/live_engine_http_srv/create_room
{
  "RoomInfo": {
    "RoomId": "webinar_123456",
    "RoomType": "Live",
    "RoomName": "My Webinar",
    "Owner_Account": "host-user-id",
    "SeatTemplate": "VideoLandscapeAudioMix10Seats",
    "IsPublicVisible": false
  }
}

import { conference, RoomType } from '@tencentcloud/roomkit-web-vue3';

const joinWebinar = async (sharedRoomId: string) => {
  await conference.joinRoom({
    roomId: sharedRoomId, // Replace with your actual roomId
    roomType: RoomType.Webinar,
  });
};

import { conference } from '@tencentcloud/roomkit-web-vue3';

await conference.leaveRoom();

import { conference } from '@tencentcloud/roomkit-web-vue3';

await conference.endRoom();

<template>
  <ConferenceMainView></ConferenceMainView>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ConferenceMainView, conference, RoomEvent } from '@tencentcloud/roomkit-web-vue3';

const backToHome = () => {};
const backToLogin = () => {};

onMounted(() => {
  conference.on(RoomEvent.ROOM_DISMISS, backToHome);
  conference.on(RoomEvent.ROOM_LEAVE, backToHome);
  conference.on(RoomEvent.ROOM_ERROR, backToHome);
  conference.on(RoomEvent.KICKED_OUT, backToHome);
  conference.on(RoomEvent.KICKED_OFFLINE, backToLogin);
  conference.on(RoomEvent.USER_SIG_EXPIRED, backToLogin);
});

onUnmounted(() => {
  conference.off(RoomEvent.ROOM_DISMISS, backToHome);
  conference.off(RoomEvent.ROOM_LEAVE, backToHome);
  conference.off(RoomEvent.ROOM_ERROR, backToHome);
  conference.off(RoomEvent.KICKED_OUT, backToHome);
  conference.off(RoomEvent.KICKED_OFFLINE, backToLogin);
  conference.off(RoomEvent.USER_SIG_EXPIRED, backToLogin);
});
</script>

<UIKitProvider theme="light" language="zh-CN">
  <router-view />
</UIKitProvider>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';

import { conference } from '@tencentcloud/roomkit-web-vue3';

// Call after conference.createAndJoinRoom or conference.joinRoom succeeds, when roomId is available
const roomId = 'webinar_123456';
conference.setFeatureConfig({
  shareLink: `https://your-domain.com/room?roomId=${roomId}`,
});

// Enable microphone, camera, screen sharing, and fullscreen permissions
<iframe src="https://your-domain.com/index.html" allow="microphone; camera; display-capture; display; fullscreen;">

// Set intranet proxy parameters before entering the room
import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
const { roomEngine } = useRoomEngine();

TUIRoomEngine.once('ready', () => {
  const trtcCloud = roomEngine.instance?.getTRTCCloud();
  trtcCloud.callExperimentalAPI(JSON.stringify({
    api: 'setNetworkProxy',
    params: {
      websocketProxy: "wss://proxy.example.com/ws/",
      turnServer: [{
        url: '14.3.3.3:3478',
        username: 'turn',
        credential: 'turn',
      }],
      iceTransportPolicy: 'relay',
    },
  }));
});