{"_id":"@tencentcloud/roomkit-web-vue3","_rev":"76-b0c5789fa507649a3894bc26f0b8f3b1","name":"@tencentcloud/roomkit-web-vue3","dist-tags":{"beta":"2.7.0-beta.1","latest":"6.2.0"},"versions":{"0.0.1":{"name":"@tencentcloud/roomkit-web-vue3","version":"0.0.1","_id":"@tencentcloud/roomkit-web-vue3@0.0.1","maintainers":[{"name":"bernlao","email":"qianglao007@gmail.com"},{"name":"ashfieldfox","email":"zimadult@gmail.com"},{"name":"chenximo","email":"1609716621@qq.com"},{"name":"llwyct","email":"787552171@qq.com"},{"name":"allen0809npm","email":"lianjun0809@163.com"},{"name":"ashster","email":"825130866@qq.com"},{"name":"xinli123","email":"xinli_lx@163.com"},{"name":"wbxl2000","email":"wbxl2000@outlook.com"},{"name":"viktorli","email":"viktorli@tencent.com"},{"name":"alsotang","email":"alsotang@gmail.com"}],"dist":{"shasum":"7ffdc24a5f98d5cf35499d51a9b303d2810ee8c0","tarball":"https://registry.npmjs.org/@tencentcloud/roomkit-web-vue3/-/roomkit-web-vue3-0.0.1.tgz","fileCount":1641,"integrity":"sha512-sZH0WcCFX8GXqMLEj0/3dbG8LhL3c3HOL6QnIHlTBwLCbUUjyIj+5q8oSmFNfK3ogVVpyOCQ8g+Sukso7C4FqQ==","signatures":[{"sig":"MEYCIQDfomY1FSGJ7C/OVQEt0gz3LJqK3wcp4GEENJ19No47pQIhAMkr/UE5txEqR/2szCz+WfldVIzgyH7GE6JKnkEKq7wx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7165080},"main":"./lib/index.js","_from":"file:tencentcloud-roomkit-web-vue3-0.0.1.tgz","types":"./es/index.d.ts","module":"./es/index.mjs","scripts":{"dev":"vite build --watch","build":"vite build"},"_npmUser":{"name":"xinli123","email":"xinli_lx@163.com"},"_resolved":"/private/var/folders/0z/c1mvwydx2z7fms8q8dd1d61h0000gn/T/9bea37fbea63178eb860a06ad76d903b/tencentcloud-roomkit-web-vue3-0.0.1.tgz","_integrity":"sha512-sZH0WcCFX8GXqMLEj0/3dbG8LhL3c3HOL6QnIHlTBwLCbUUjyIj+5q8oSmFNfK3ogVVpyOCQ8g+Sukso7C4FqQ==","_npmVersion":"8.5.5","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n\n\n```\n\n---\n\n### 步骤3：登录\n\n```typescript\nimport { onMounted } from 'vue';\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\nconst SDKAppID = 0; // 替换为您的 SDKAppID\nconst userId = 'your_user_id';\nconst userSig = 'your_dynamic_user_sig'; // 生产环境请从服务端动态获取\nconst userName = '用户展示昵称';\n\nonMounted(async () => {\n await conference.login({ sdkAppId: SDKAppID, userId, userSig });\n await conference.setSelfInfo({\n userName,\n avatarUrl: 'https://your-avatar-url.com/image.png',\n });\n});\n```\n\n> **注意**：生产环境请在服务端生成 UserSig，详见 [正式运行阶段如何计算 UserSig](https://cloud.tencent.com/document/product/647/17275#formal)。\n\n**当登录页与进房页分属不同路由时**，可通过监听 `loginUserInfo` 判断登录状态：\n\n```typescript\nimport { watch } from 'vue';\nimport { useLoginState } from 'tuikit-atomicx-vue3/room';\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\nconst { loginUserInfo } = useLoginState();\n\nwatch(() => loginUserInfo.value?.userId, async (userId) => {\n if (userId) {\n await conference.createAndJoinRoom({ roomId: '123456' });\n }\n}, { immediate: true });\n```\n\n---\n\n### 步骤4：创建会议\n\n根据业务场景选择合适的创建方式：\n\n**场景一：客户端快速发起会议**\n\n```typescript\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\nconst startQuickMeeting = async () => {\n const myRoomId = `room_${Date.now()}`;\n await conference.createAndJoinRoom({\n roomId: myRoomId,\n options: { roomName: '我的快速会议' },\n });\n};\n```\n\n**场景二：客户端预约会议**\n\n```typescript\nimport { useRoomState } from 'tuikit-atomicx-vue3/room';\n\nconst { scheduleRoom } = useRoomState();\n\nconst createSchedule = async () => {\n const roomId = '123456';\n const startTime = Math.floor(Date.now() / 1000) + 3600; // 1小时后，单位：秒\n\n await scheduleRoom({\n roomId,\n options: {\n roomName: '产品需求评审会',\n scheduleStartTime: startTime,\n scheduleEndTime: startTime + 1800,\n scheduleAttendees: ['userA', 'userB'],\n password: '123',\n },\n });\n};\n```\n\n**场景三：服务端创建会议**\n\n调用腾讯云 [服务端 REST API 创建房间](https://cloud.tencent.com/document/product/647/104446)，适用于政务、医疗等强管控场景。\n\n---\n\n### 步骤5：加入会议\n\n**已知 roomId 直接加入**\n\n```typescript\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\nawait conference.joinRoom({ roomId: 'your-room-id' });\n```\n\n**不确定房间是否存在（双向对等场景）**\n\n```typescript\n// 双方统一调用，SDK 内部自动处理建房与进房逻辑\nawait conference.createAndJoinRoom({\n roomId: bizOrderId,\n options: { roomName: `业务沟通：${bizOrderId}` },\n});\n```\n\n---\n\n### 步骤6：离开与解散房间\n\n```typescript\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\n// 离开房间（任意参会者）\nawait conference.leaveRoom();\n\n// 解散房间（仅房主）\nawait conference.endRoom();\n```\n\n---\n\n### 步骤7：监听房间状态\n\n```vue\n\n\n\n```\n\n---\n\n## 进阶配置\n\n### 主题与语言\n\n通过 `UIKitProvider` 的 props 配置全局主题和语言：\n\n| 参数 | 可选值 | 默认值 |\n|------|--------|--------|\n| `theme` | `\"light\"` \\| `\"dark\"` | `\"light\"` |\n| `language` | `\"zh-CN\"` \\| `\"en-US\"` | `\"en-US\"` |\n\n更多自定义请参考 [UI 自定义 > 主题及语言](https://write.woa.com/document/202390358423633920)。\n\n### 修改房间分享链接\n\n```typescript\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\n\nconference.setFeatureConfig({\n shareLink: `https://your-domain.com/room?roomId=${roomId}`,\n});\n```\n\n### 设置视频布局\n\n```typescript\nimport { conference } from '@tencentcloud/roomkit-web-vue3';\nimport { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';\n\n// 侧边栏布局\nconference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout });\n\n// 顶部栏布局\nconference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.CinemaLayout });\n```\n\n### iframe 集成\n\n使用 iframe 集成时，需在标签中配置 `allow` 属性：\n\n```html\n\n```\n\n### 内网代理\n\n```typescript\nimport TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';\nimport { useRoomEngine } from 'tuikit-atomicx-vue3/room';\n\nconst { roomEngine } = useRoomEngine();\n\nTUIRoomEngine.once('ready', () => {\n const trtcCloud = roomEngine.instance?.getTRTCCloud();\n trtcCloud.callExperimentalAPI(JSON.stringify({\n api: 'setNetworkProxy',\n params: {\n websocketProxy: 'wss://proxy.example.com/ws/',\n turnServer: [{ url: '14.3.3.3:3478', username: 'turn', credential: 'turn' }],\n iceTransportPolicy: 'relay',\n },\n }));\n});\n```\n\n---\n\n## 常见问题\n\n**Q：房主关闭网页后，会议会立即结束吗？**\n\n不会。房主离开后其他成员可继续使用会议功能。系统会在会议结束时间后 6 小时且房间内人数为 0 时自动回收资源。建议会议结束时主动调用 `conference.endRoom()` 销毁房间。\n\n**Q：同一 userId 能否在多设备同时加入同一会议？**\n\n不支持。同一 userId 多端进房时，先进房的设备会被强制下线。如需多端同时参会，请为每个设备分配唯一的 userId。\n\n**Q：部署到线上后无法采集摄像头或麦克风？**\n\n浏览器要求在安全环境（`https://`、`localhost`、`file://`）下才允许访问媒体设备。请确保您的应用部署在 HTTPS 协议下，并具备有效的安全证书。\n\n**Q：是否可以直接修改底层源码？**\n\n我们非常不推荐导出源码，这会导致您脱离 npm 版本升级路径，需自行承担后续维护成本。如需导出，可执行：\n\n```bash\nnode ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js\n```\n\n---\n\n## 相关链接\n\n- [产品文档](https://cloud.tencent.com/document/product/647/81962)\n- [完整集成指南（含 UI）](https://write.woa.com/document/194132737030885376)\n- [无 UI 集成指南](https://write.woa.com/document/197380092150673408)\n- [UI 自定义](https://write.woa.com/document/202390358423633920)\n- [视频布局及挂件自定义](https://write.woa.com/document/202273351084670976)\n- [开通服务](https://cloud.tencent.com/document/product/647/104842)\n- [联系我们](https://cloud.tencent.com/document/product/647/19906)\n","readmeFilename":"README.md"}