{"_id":"4u-webrtc-sdk","name":"4u-webrtc-sdk","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"4u-webrtc-sdk","version":"1.0.0","description":"WebRTC SDK for video/audio communication","main":"dist/index.umd.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","lint":"eslint src/**/*.ts","format":"prettier --write src/**/*.ts","prepare":"npm run build"},"dependencies":{"events":"^3.3.0"},"devDependencies":{"@types/jest":"^29.5.0","@typescript-eslint/eslint-plugin":"^5.59.0","@typescript-eslint/parser":"^5.59.0","@rollup/plugin-commonjs":"^24.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","rollup":"^3.20.0","rollup-plugin-terser":"^7.0.2","eslint":"^8.38.0","jest":"^29.5.0","prettier":"^2.8.7","typescript":"^5.0.4","@rollup/plugin-alias":"^5.0.0"},"publishConfig":{"access":"public"},"_id":"4u-webrtc-sdk@1.0.0","gitHead":"a326f1157c74fa4885f91b999e78ed05c8ca7144","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-sZqMkEU6/+GJruZLxOOvNzLkBqebusADN/4K84CxwenSkQUfcwjqglg1zbnrhW1BEbEnIp7BMC4tw37bf85FiQ==","shasum":"5c3a79246f433d3b9c0a51fb71cdb656ccef834c","tarball":"https://registry.npmjs.org/4u-webrtc-sdk/-/4u-webrtc-sdk-1.0.0.tgz","fileCount":19,"unpackedSize":144387,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+PTlgZ8SEo5BKXox4lw5sHvge7h07hedBtLzOIPREXAiAOkYiMMarcheR0slgFo35BjjI8m0yB5b/sUHFWCrL4kQ=="}]},"_npmUser":{"name":"lzwlv","email":"492227300@qq.com"},"directories":{},"maintainers":[{"name":"lzwlv","email":"492227300@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/4u-webrtc-sdk_1.0.0_1736838184208_0.037965396431250964"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-14T07:03:04.111Z","1.0.0":"2025-01-14T07:03:04.409Z","modified":"2025-01-14T07:03:04.730Z"},"maintainers":[{"name":"lzwlv","email":"492227300@qq.com"}],"description":"WebRTC SDK for video/audio communication","readme":"# 2.5D数字人集成说明.md\r\n# WebRTC SDK 集成文档\r\n\r\n## 1. 安装与引入\r\n\r\n### 1.1 安装(还未发布)\r\n```bash\r\nnpm install 4u-webrtc-sdk\r\n```\r\n\r\n### 1.2 引入方式\r\nES Module方式:\r\n```javascript\r\nimport { LiveRoom } from '4u-webrtc-sdk';\r\n```\r\nUMD方式:\r\n```html\r\n<script src=\"dist/index.umd.js\"></script>\r\n<script>\r\nconst { LiveRoom } = WebRTCSDK;\r\n</script>\r\n```\r\n## 2. 基础配置\r\n\r\n### 2.1 HTML元素\r\n需要准备video和audio元素用于播放远端流:\r\n```html\r\n<video \r\n  class=\"rtc-video\" \r\n  playsinline \r\n  autoplay \r\n  muted\r\n  webkit-playsinline=\"\"\r\n  x5-playsinline\r\n></video>\r\n<audio class=\"rtc-audio\" autoplay></audio>\r\n```\r\n\r\n### 2.2 配置参数说明\r\n\r\n| 参数类别       | 参数名            | 类型        | 必填 | 说明                                   |\r\n| -------------- | ----------------- | ----------- | ---- | -------------------------------------- |\r\n| **视频元素**   | rtcVideo          | HTMLElement | 是   | 用于播放远端视频流的video元素          |\r\n|                | rtcAudio          | HTMLElement | 是   | 用于播放远端音频流的audio元素          |\r\n| **媒体配置**   | ROOM_CONSTRAINTS  | Object      | 是   | 媒体约束配置                           |\r\n|                | - video           | Boolean     | 是   | 是否开启视频                           |\r\n|                | - audio           | Boolean     | 是   | 是否开启音频（本地收入视频）           |\r\n| **连接参数**   | USER_ID           | String      | 是   | 用户唯一标识（世友科技分配）           |\r\n|                | LIVE_ROOM_URL     | String      | 是   | 信令服务器地址（世友科技分配）         |\r\n|                | SINGALING_WSS_URL | String      | 是   | WebSocket服务器地址 （世友科技分配）   |\r\n|                | APP_ID            | String      | 否   | 应用ID，默认使用（\"3f4aG7b2H9i1k5Mn\"） |\r\n| **WebRTC配置** | configuration     | Object      | 否   | WebRTC配置项                           |\r\n|                | - sdpSemantics    | String      | 否   | SDP语义配置 （默认\"unified-plan\"）      |\r\n|                | - iceServers      | Array       | 否   | TURN/STUN服务器配置 （世友科技分配）   |\r\n\r\n\r\n示例代码：\r\n```javascript\r\nconst config = {\r\n  rtcVideo: document.querySelector('.rtc-video'),\r\n  rtcAudio: document.querySelector('.rtc-audio'),\r\n  ROOM_CONSTRAINTS: {\r\n    video: false,\r\n    audio: true\r\n  },\r\n  USER_ID: 'xxx',\r\n  LIVE_ROOM_URL: 'https://xxx',\r\n  SINGALING_WSS_URL: 'wss://xxx',\r\n  APP_ID: '3f4aG7b2H9i1k5Mn',\r\n  configuration: {\r\n    sdpSemantics: \"unified-plan\",\r\n    iceServers: [{\r\n      urls: 'turn:xxx:3478',\r\n      credential: '123456',\r\n      username: 'admin'\r\n    }]\r\n  }\r\n};\r\n\r\nconst room = new LiveRoom(config);\r\n```\r\n\r\n## 3. 核心功能 API\r\n\r\n### 3.1 连接流程\r\n\r\n#### 3.1.1 基本流程说明\r\n\r\n```mermaid\r\nsequenceDiagram\r\n    participant Client\r\n    participant Signaling\r\n    participant RTC\r\n    participant Server\r\n\r\n    Client->>+Signaling: 1. initInstance({...events})\r\n    Note over Client,Signaling: 同时注册message, error, close, open\r\n    Signaling-->>-Client: 返回实例对象\r\n  \r\n\r\n\r\n    Client->>+Server: 2. connectRoom()\r\n    Server-->>-Client: 房间连接成功\r\n\r\n    Client->>+RTC: 3. startRtc()【可选】\r\n    RTC-->>-Client: RTC连接成功\r\n\r\n    Client->>+Signaling: 4. 发送消息\r\n    Note over Client,Signaling: 按照协议格式发送\r\n```\r\n示例代码：\r\n```javascript\r\n// 1. 开始建立房间、注册event事件：message、error、close、open,获取rtc实例、信令实例对象\r\nconst { rtc, signaling, roomid, APP_ID } = await room.initInstance({\r\n  message: (data) => {\r\n      console.log(\"[Signaling] 🚀 收到 WS 消息:\", data);\r\n  },\r\n  error: (error) => {\r\n      console.error(\"[Signaling] 🚀 收到 WS 错误:\", error);\r\n  },\r\n  close: () => {\r\n      console.log(\"[Signaling] 🚀 收到 WS 关闭\");\r\n  },\r\n  open: () => {\r\n      console.log(\"[Signaling] 🚀 收到 WS 打开\");\r\n  },\r\n});\r\n// 2. 连接房间\r\nawait room.connectRoom();\r\nconsole.log('房间连接成功');\r\n\r\n// 3. 开始RTC连接\r\nawait room.startRtc();\r\nconsole.log('RTC连接成功');\r\n\r\n// 4. 发送消息(按照协议发送)\r\n// 文本消息参数：\r\nconst textParams = {\r\n  type: 'message_text',\r\n  text: 'Text文本'\r\n};\r\nsignaling.send(textParams);\r\n// 打断数字人操作参数：\r\nconst breakParams = {\r\n  type: 'break'\r\n};\r\nsignaling.send(breakParams);\r\n```\r\n\r\n#### 3.1.2 详细步骤说明\r\n\r\n1. **初始化实例**\r\n   ```javascript\r\n   const { rtc, signaling, roomid, APP_ID } = await room.initInstance({\r\n     message: (data) => {\r\n       console.log(\"[Signaling] 🚀 收到 WS 消息:\", data);\r\n     },\r\n     error: (error) => {\r\n       console.error(\"[Signaling] 🚀 收到 WS 错误:\", error);\r\n     },\r\n     close: () => {\r\n       console.log(\"[Signaling] 🚀 收到 WS 关闭\");\r\n     },\r\n     open: () => {\r\n       console.log(\"[Signaling] 🚀 收到 WS 打开\");\r\n     },\r\n   });\r\n   ```\r\n\r\n2. **连接房间**\r\n   - 通过 `connectRoom()` 建立与服务器的连接\r\n   - 等待连接成功确认\r\n\r\n3. **建立RTC连接**\r\n   - 调用 `startRtc()` 开始音视频传输\r\n   - 等待 RTC 连接建立完成\r\n\r\n4. **消息通信**\r\n   \r\n   发送消息格式：\r\n   | 消息类型 | 参数格式 | 说明 |\r\n   |----------|----------|------|\r\n   | `message_text` | `{ type: 'message_text', text: 'Text文本' }` | 发送文本消息 |\r\n   | `break` | `{ type: 'break' }` | 发送打断指令 |\r\n\r\n   接收消息格式：\r\n   | msg_type | 说明 | 数据格式 |\r\n   |----------|------|----------|\r\n   | `asr` | 语音识别结果 | `{ msg_type: 'asr', data: {...} }` |\r\n   | `tts` | 返回的文本内容 | `{ msg_type: 'tts', data: {...} }` |\r\n   | `quit` | 退出房间通知 | `{ msg_type: 'quit', data: {...} }` |\r\n\r\n### 3.2 断开连接\r\n\r\n#### 3.2.1 断开方式说明\r\n\r\n1. **完全断开**\r\n   ```javascript\r\n   await room.disconnect();  // 同时断开信令和RTC连接\r\n   ```\r\n\r\n2. **仅停止RTC**\r\n   ```javascript\r\n   await room.stopRtc();    // 只断开RTC连接，保持信令连接\r\n   ```\r\n\r\n#### 3.2.2 注意事项\r\n\r\n1. 断开连接为异步操作，建议使用 `await` 等待操作完成\r\n2. 完全断开后如需重连，需要重新执行完整的连接流程\r\n3. 仅停止 RTC 后，可以通过 `startRtc()` 重新建立 RTC 连接\r\n4. 建议在组件销毁或页面关闭时调用断开连接，避免资源泄露\r\n\r\n## 5. 注意事项\r\n\r\n1. 确保在https环境下使用,或localhost开发环境\r\n\r\n2. 在移动端需要注意添加playsinline等属性以支持自动播放\r\n\r\n3. 注意及时清理资源,断开连接时调用disconnect()\r\n\r\n4. 建议在组件销毁时移除所有事件监听\r\n\r\n\r\n##  7.快速体验Demo\r\n\r\n### 7.1启动本地服务器\r\n```bash\r\n# 1. 进入server目录\r\ncd server\r\n\r\n# 2. 安装依赖\r\nnpm install\r\n\r\n# 3. 启动服务器(会自动生成测试证书)\r\nnpm start\r\n```\r\n\r\n### 7.2 运行Demo\r\n```bash\r\n# 1. 项目根目录安装依赖\r\nnpm install\r\n\r\n# 2. 构建SDK\r\nnpm run build\r\n\r\n# 3. 用浏览器打开demo页面\r\nhttps://localhost:3000/demo/index.html\r\n```\r\n\r\n### 7.3 Demo功能说明\r\n\r\nDemo页面提供以下功能按钮:\r\n- 连接: 建立WebSocket连接并创建房间\r\n- 断开: 断开所有连接\r\n- 停止RTC: 仅停止RTC连接\r\n- 开始RTC: 重新建立RTC连接\r\n\r\n\r\n###  Demo注意事项\r\n\r\n1. 确保3000端口未被占用或者修改server/index.ts中的端口号\r\n\r\n2. Demo使用了固定的测试用户ID,实际使用时需要使用真实的用户ID\r\n\r\n3. Demo默认关闭了音视频,可以通过修改ROOM_CONSTRAINTS开启\r\n\r\n4. 可以打开浏览器控制台查看详细的连接日志\r\n","readmeFilename":"README.md"}