@wetspace/wetrtc

框架无关的 WebRTC 连接库 — 简化 SDP/ICE 协商、媒体管理与 DataChannel，信令传输由你自选。

特性

• 框架无关 — 不绑定 React / Vue / Angular，浏览器、Electron、Node.js 均可使用
• 信令解耦 — 实现 SignalChannel 即可接入 WebSocket、Socket.IO、HTTP 长轮询等
• 完整子系统 — 媒体捕获、DataChannel、连接统计与诊断
• Perfect Negotiation — 内置 polite / impolite 模式，避免 glare 冲突
• 低延迟屏幕共享 — H.264 / Opus 偏好、编码参数与 playout delay 调优
• 自动重连 — 可配置指数退避，ICE 断开后自动恢复
• TypeScript — 完整类型定义与强类型事件

安装

npm install @wetspace/wetrtc
# or
pnpm add @wetspace/wetrtc
# or
yarn add @wetspace/wetrtc

浏览器兼容性

若需兼容旧版浏览器，建议额外安装 webrtc-adapter：

npm install webrtc-adapter

并在入口最早处引入：

import 'webrtc-adapter'

Electron 应用通常无需 adapter，较新版本 Chromium 对 WebRTC 支持已足够完善。

快速开始

WetRTC 需要一个信令通道交换 SDP 与 ICE。你只需实现 SignalChannel 接口：

import type { SignalChannel } from '@wetspace/wetrtc'

const ws = new WebSocket('wss://signal.example.com')

export const signal: SignalChannel = {
  async send(data) {
    ws.send(JSON.stringify(data))
  },
  onMessage(handler) {
    const listener = (e: MessageEvent) => handler(JSON.parse(e.data))
    ws.addEventListener('message', listener)
    return () => ws.removeEventListener('message', listener)
  },
}

创建连接并监听远端媒体：

import { WetRTC } from '@wetspace/wetrtc'

const rtc = new WetRTC({
  signal,
  direction: 'sendrecv',
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
})

rtc.on('track', (ev) => {
  videoEl.srcObject = ev.streams[0]
})

rtc.on('statechange', (state) => {
  console.log('connection:', state)
})

await rtc.connect()

// 使用完毕后释放
rtc.dispose()

连接方向

| 方向 | 说明 | |------|------| | sendrecv | 双向（默认），可发送和接收媒体 | | sendonly | 仅发送，如屏幕共享主机 | | recvonly | 仅接收，如手机观看端 |

屏幕共享示例

const rtc = new WetRTC({
  signal,
  direction: 'sendonly',
  preferredVideoCodec: 'h264',
  videoEncoding: {
    maxBitrate: 4_000_000,
    maxFramerate: 30,
  },
})

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true })
for (const track of stream.getTracks()) {
  rtc.peerConnection.addTrack(track, stream)
}

await rtc.connect()

主要导出

| 导出 | 说明 | |------|------| | WetRTC | 主入口，门面类 | | SignalManager | 信令子系统（高级用法） | | MediaManager | 媒体设备管理 | | DataManager | DataChannel 与文件传输 | | StatsMonitor | 连接质量统计 | | applyH264CodecPreference 等 | 编解码器与编码调优工具 |

完整 API 见在线文档。

文档

• 快速开始
• 核心概念
• 信令
• 低延迟屏幕共享
• WET 扩展屏 — 基于本库的产品示例

开发

pnpm install
pnpm build    # 输出到 dist/
pnpm test

相关链接

• npm: https://www.npmjs.com/package/@wetspace/wetrtc
• 源码: https://gitee.com/wetspace/wetrtc
• 文档: https://www.wetspace.top/docs/wetrtc/

License

MIT — 详见仓库根目录 LICENSE。