# @cloudflare/realtimekit-ui-addons 中文文档 规范地址：https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/ 版本：0\.2\.0 npm 元数据更新时间：2026-10-13T04:33:38.323Z 中文译文更新时间：2026-11-10T03:09:50.992Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cloudflare/realtimekit-ui-addons 原文对照：https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/?lang=original 项目主页：https://github.com/cloudflare/realtimekit-ui-addons#readme 源码仓库：https://github.com/cloudflare/realtimekit-ui-addons ## 关键信息（来自 npm 元数据） - 包体积（解压后）：375 kB，75 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@cloudflare/realtimekit \>=1\.0\.1，@cloudflare/realtimekit-ui \>=1\.0\.1 - 首次发布：2025-05-02T14:51:10.132Z - 最新版本发布：2026-10-12T06:08:33.984Z - 近 30 天下载量：61009（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：11（近 12 个月 7 个） ## 中文简介 Cloudflare 实时 Kit UI 添加器集 ## 安装 ```sh npm install @cloudflare/realtimekit-ui-addons ``` 也可以使用：`pnpm add @cloudflare/realtimekit-ui-addons`、`yarn add @cloudflare/realtimekit-ui-addons`、`bun add @cloudflare/realtimekit-ui-addons` ## README [![Logo](https://cf-assets.www.cloudflare.com/slt3lc6tev37/6EYsdkdfBcHtgPmgp3YtkD/0b203affd2053988264b9253b13de6b3/logo-thumbnail.png)](https://cloudflare.com/) ### 实时 Kit Ui 添加 由Ui-kit加成的集合来扩展RealtimeKit所预建的Ui-kit能力. [**探索文件“**](https://developers.cloudflare.com/realtime/realtimekit/) [查看演示](https://examples.realtime.cloudflare.com/) • 妇女 [报告错误](https://github.com/cloudflare/realtimekit-ui-addons/issues) • 妇女 [请求特性](https://github.com/cloudflare/realtimekit-ui-addons/issues) ## 目录 - [目录](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/#readme-table-of-contents) - [关于项目](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/#readme-about-the-project) - [样本](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/#readme-samples) - [使用量](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/#readme-usage) - [关于](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/#readme-about) ## 关于项目 这个 [仓库](https://github.com/cloudflare/realtimekit-ui-addons) 包含所有用于实时Kit Web SDK的 ui- kit 添加器. 使用 RealtimeKit UI 添加器的综合指南可在 [云浮文档](https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/)。 。 。 . ## 实例 以下是目前已有的例子清单. ### 主机控制 1. [相机主机控制器](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/camera-host-control/) 2. [Mic 主机控制器](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/mic-host-control/) 3. [聊天主机控制](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/chat-host-control/) ### 反应 1. [手举起](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/hand-raise/) 2. [反应](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/reactions-manager/) ### 参与者 1. [参加方 :](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/participant-tile-menu/) ### 参与者标签动作 1. [与会者菜单项目](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/participant-menu-item/) 2. [参与者 Tab 动作](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/participants-tab-action/) 3. [参与者 Tab 切换](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/participants-tab-toggle/) ### 视频背景 1. [视频背景](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/video-background/) ### 控制栏 1. [自定义控制栏按钮](https://npmcn.com/package/%40cloudflare/realtimekit-ui-addons/src/custom-controlbar-button/) ## 使用量 为了使用这些附加符,您需要执行以下步骤: 1. 安装附加包 : ```sh npm install @cloudflare/realtimekit-ui-addons ``` 2. 导入您需要的附加件 . ```ts // Host controls import CameraHostControl from '@cloudflare/realtimekit-ui-addons/camera-host-control'; import MicHostControl from '@cloudflare/realtimekit-ui-addons/mic-host-control'; import ChatHostControl from '@cloudflare/realtimekit-ui-addons/chat-host-control'; // Reactions import HandRaise from '@cloudflare/realtimekit-ui-addons/hand-raise'; import ReactionsManagerAddon from '@cloudflare/realtimekit-ui-addons/reactions-manager'; // Participant Tile import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu"; // Participant Tab Actions import ParticipantMenuItem from '@cloudflare/realtimekit-ui-addons/participant-menu-item'; import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action"; import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle"; // Video Background (Effects) import RealtimeKitVideoBackground from '@cloudflare/realtimekit-ui-addons/video-background'; // Control bar button import CustomControlbarButton from '@cloudflare/realtimekit-ui-addons/custom-controlbar-button'; ``` 3. 初始化加词 ```ts // Host controls const cameraHostControl = await CameraHostControl.init({ meeting, hostPresets: ['webinar_presenter'], targetPresets: ['webinar_viewer'], addActionInParticipantMenu: true, }); const micHostControl = await MicHostControl.init({ meeting, hostPresets: ['webinar_presenter'], targetPresets: ['webinar_viewer'], addActionInParticipantMenu: true, }); const chatHostControl = await ChatHostControl.init({ meeting, hostPresets: ['webinar_presenter'], targetPresets: ['webinar_viewer'], addActionInParticipantMenu: true, }); // Reactions const handRaise = await HandRaise.init({ meeting, canRaiseHand: true, canManageRaisedHand: true, handRaiseIcon: '' }); const CUSTOM_REACTIONS = [ { emoji: "🔥", label: "fire" }, { emoji: "😢", label: "sad" }, { emoji: '👍', label: 'thumbs up' }, { emoji: '👎', label: 'thumbs down' }, { emoji: '❤️', label: 'heart' }, { emoji: '😂', label: 'laugh' }, { emoji: '👏', label: 'clap' }, { emoji: '🎉', label: 'celebrate' }, ]; const reactionsAddon = await ReactionsManagerAddon.init({ meeting, reactions: CUSTOM_REACTIONS, canSendReactions: true, }); // Participant Tile const participantTileMenu = new ParticipantTileMenu([{ label: "Custom Toggle", onClick: (participantId) => { console.log('Clicked on custom toggle for ', participantId); } }], 'top-right'); // Participant Tab Actions const rightTickSVG = ""; const participantMenuItem = new ParticipantMenuItem({ label: "Custom Menu Item", icon: rightTickSVG, styles: "rtk-icon { color: green !important; }", onClick: () => { alert('Participant Menu Item clicked'); } }); const participantsTabAction = new ParticipantsTabAction({ onClick: () => { alert("Clicked!"); }, label: "Click me", position: "start" }); // Participant Tab Toggle const participantsTabToggle = new ParticipantsTabToggle({ onEnabled: () => { alert('toggled true!'); }, onDisabled: () => { alert('toggled true!'); }, label: 'Click me', initialValue: () => true, position: 'start', }); // Video Background (Effects) const videoBackground = await RealtimeKitVideoBackground.init({ modes: ["blur", "virtual", "random"], blurStrength: 30, // 0 - 100 for opacity meeting, images: [ "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3" ], randomCount: 10, onVideoBackgroundUpdate: ({backgroundMode, backgroundURL}) => { console.log('videoBackgroundUpdated => ', {backgroundMode, backgroundURL}); }, // Listen to background update action }); // Control Bar const customControlBarButton = new CustomControlbarButton({ position: 'left', icon: '', label: 'Click Me!', onClick: () => alert('Custom Control Bar Button Clicked'), }); ``` 4. 注册加注 ```ts import { registerAddons } from "@cloudflare/realtimekit-ui"; ... const newConfig = registerAddons([cameraHostControl, micHostControl, chatHostControl, handRaise, reactionsAddon, participantTileMenu, participantMenuItem, participantsTabAction, participantsTabToggle, videoBackground, customControlBarButton], meeting); ``` 5. 将配置传递给会合用户界面 ``` ``` ### 视频背景 您可以在程序上应用、替换或删除背景. ```tsx await videoBackground.applyVirtualBackground('https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3') await videoBackground.applyBlurBackground(); // Common for virtual and blur backgrounds. await videoBackground.removeBackground(); ``` ## 关于 该项目由Cloudflare公司创建和维护. Cloudflare的名字和标志是Cloudflare股份有限公司的商标. 我们喜欢开源软件! 见 [我们的其他项目](https://github.com/cloudflare) 财务报告和审定财务报表 [我们的产品](https://cloudflare.com/)。 。 。 . ## 常见问题 ### @cloudflare/realtimekit-ui-addons 是什么？ Cloudflare 实时 Kit UI 添加器集 ### 如何安装 @cloudflare/realtimekit-ui-addons？ 在项目目录运行 npm install @cloudflare/realtimekit-ui-addons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@cloudflare/realtimekit（\>=1\.0\.1）、@cloudflare/realtimekit-ui（\>=1\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cloudflare/realtimekit-ui-addons 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cloudflare/realtimekit-ui-addons 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @cloudflare/realtimekit-ui-addons 可以商用吗？ @cloudflare/realtimekit-ui-addons 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @cloudflare/realtimekit-ui-addons 的下载量有多少？ 根据 npm 官方下载统计，@cloudflare/realtimekit-ui-addons 在 2026/10/10 – 2026/11/08 这 30 天内被下载 61,009 次，日均约 2,034 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cloudflare/realtimekit-ui-addons 还在维护吗？ 最新版本 0\.2\.0 发布于 2026/10/12（28 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 7 个；首次发布于 2025/05/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。