Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

SDK 使用指南

1. 依赖说明

本 SDK 依赖 Vue 3、Pinia 和 Element Plus。在使用前，请确保您的项目中已安装这些依赖。

2. 安装与运行

1. 打包 SDK：在 SDK 目录下运行 npm run build 和 npm pack。
2. 主应用安装：在主应用目录下运行 npm install <path-to-sdk-tgz>。

发包

1、npm run build 生成dist文件 2、npm pack 生成.tgz文件

3、引入 npm install D:/project/newprod-rtc/Code/Frontend/newprod-rtc-ui-sdk/newprod-rtc-ui-sdk-0.0.2.tgz 4、npm run dev 启动项目看效果

5、如果sdk更新了 要重新打包 需要npm uninstall newprod-rtc-ui-sdk 然后再走一遍 3 4

打成sdk给别的项目使用时 也可以直接使用livekit暴露的事件

import { init, meetingService, RoomEvent } from 'newprod-rtc-ui-sdk';

3. 接入方式

方式一：完整 UI 模式（包含首页、创建会议等）

适用于三方没有后端，需要使用 SDK 全套功能。

import { init } from 'newprod-rtc-ui-sdk';
import 'newprod-rtc-ui-sdk/style.css';

init('#meeting-container', {
  baseUrl: 'https://your-backend-api.com', // 后端接口地址
  livekitUrl: 'wss://your-livekit-server.com' // LiveKit 地址
});

方式二：API 直接入会模式（推荐）

适用于三方已有后端生成 Token，直接进入视频会议室。

import { init, joinMeetingWithToken } from 'newprod-rtc-ui-sdk';
import 'newprod-rtc-ui-sdk/style.css';

// 1. 仅初始化环境，不进入页面
init('#meeting-container');

// 2. 调用方法直接加入会议（会自动跳转到会议室界面）
joinMeetingWithToken({
  token: 'YOUR_JWT_TOKEN',
  livekitUrl: 'wss://your-livekit-server.com',
  userName: '张三',
  roomTitle: '周会'
});

4. 监听事件

您可以直接通过 meetingService 获取 LiveKit 房间实例并监听事件。

import { meetingService, RoomEvent } from 'newprod-rtc-ui-sdk';

const room = meetingService.getRoom();
if (room) {
  room.on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
    console.log('正在说话:', speakers);
  });
}