Realtimekit 设计模式

# RealtimeKit 模式 ## UI 工具包 (极简代码) tsx // React import { RtkMeeting } from '@cloudflare/realtimekit-react-ui'; <RtkMeeting authToken="" onLeave={() => console.log('Left')} /> // Angular @Component({ template: `` }) export class AppComponent { authToken = ''; onLeave(event: unknown) {} } // HTML/Web Components document.getElementById('meeting').authToken = ''; ## UI 组件 RealtimeKit 提供了 133 个以上的预构建 Stencil.js Web 组件，并带有框架封装： ### 布局组件 - `` - 完整的会议 UI（一体化） - ``, ``, `` - 布局区域 - `` - 聊天/参与者侧边栏 - `` - 自适应视频网格 ### 控制组件 - ``, `` - 媒体控制 - `` - 屏幕共享 - `` - 离开会议 - `` - 设备设置 ### 网格变体 - `` - 焦点发言人模式 - `` - 仅音频模式 - `` - 分页布局 **查看完整目录**: https://docs.realtime.cloudflare.com/ui-kit ## 核心 SDK 模式 ### 基础设置 typescript import RealtimeKitClient from '@cloudflare/realtimekit'; const meeting = new RealtimeKitClient({ authToken, video: true, audio: true }); meeting.self.on('roomJoined', () => console.log('Joined:', meeting.meta.meetingTitle)); meeting.participants.joined.on('participantJoined', (p) => console.log(`${p.name} joined`)); await meeting.join(); ### 视频网格与设备选择 typescript // 视频网格 function VideoGrid({ meeting }) { const [participants, setParticipants] = useState([]); useEffect(() => { const update = () => setParticipants(meeting.participants.joined.toArray()); meeting.participants.joined.on('participantJoined', update); meeting.participants.joined.on('participantLeft', update); update(); return () => { meeting.participants.joined.off('participantJoined', update); meeting.participants.joined.off('participantLeft', update); }; }, [meeting]); return