跳到主要内容

L6-跨端连麦SDK

在 Web、移动原生（RN）、微信/支付宝小程序之间统一连麦能力。这是国内业务的真实问题：原生 WebRTC 不能覆盖小程序，必须用厂商 SDK 桥接。

1. 学习目标​

  • 设计统一接口层（Engine/LocalUser/RemoteUser/Track）。
  • 按平台条件编译，绑定不同底层 SDK。
  • 处理跨端的能力差异（统一码表、错误码）。
  • 在 uni-app 项目里集成、自动适配。

2. 平台与底层选型矩阵​

平台底层备注
Web（H5 / PC）原生 WebRTC + 自研 SFU 或 LiveKit完整能力
iOS / Android 原生TRTC / 声网 / 即构也可直接 libwebrtc
React Nativereact-native-webrtc / TRTC RN SDK视互通方而定
微信小程序TRTC 小程序 SDKlive-pusher/player 是低层
支付宝小程序蚂蚁实时音视频 SDK与 TRTC 不直接互通
抖音 / 快手各家自有 SDK业务必要时再加

互通关键：必须在服务端有一层"协议转换 / 房间桥接"。常见做法是统一接到 TRTC / 声网（它们各端 SDK 全），其房间和 H5 自研 SFU 通过云端 API 互通。

3. 统一接口设计​

// packages/rtc-core/src/index.ts

export interface RtcEngine {
  init(opts: { appId: string; platform: Platform }): Promise<void>;
  joinRoom(opts: { roomId: string; userId: string; token: string }): Promise<void>;
  leaveRoom(): Promise<void>;

  publishCamera(opts?: VideoOpts): Promise<LocalVideoTrack>;
  publishMic(opts?: AudioOpts):    Promise<LocalAudioTrack>;
  publishScreen():                 Promise<LocalVideoTrack>;

  on(event: RtcEvent, handler: Function): void;
}

export interface RemoteUser {
  uid: string;
  audioTrack?: RemoteAudioTrack;
  videoTrack?: RemoteVideoTrack;
  subscribe(kind: 'audio'|'video'): Promise<void>;
  unsubscribe(kind: 'audio'|'video'): Promise<void>;
}

export type RtcEvent =
  | 'user-joined' | 'user-left'
  | 'track-published' | 'track-unpublished'
  | 'connection-state-changed' | 'network-quality';

4. 平台实现切换​

packages/
├── rtc-core/                  # 接口、错误码、事件类型
├── rtc-web/                   # 原生 WebRTC 实现
├── rtc-rn/                    # React Native 实现
├── rtc-wx-mp/                 # 微信小程序实现 (TRTC)
├── rtc-alipay-mp/             # 支付宝小程序实现
└── rtc-uniapp/                # uni-app 入口（按条件编译选其一）

uni-app 入口示例：

// packages/rtc-uniapp/src/index.ts
// #ifdef H5
import engine from '@your-org/rtc-web';
// #endif
// #ifdef MP-WEIXIN
import engine from '@your-org/rtc-wx-mp';
// #endif
// #ifdef MP-ALIPAY
import engine from '@your-org/rtc-alipay-mp';
// #endif
// #ifdef APP-PLUS
import engine from '@your-org/rtc-rn';
// #endif

export default engine;

5. 错误码统一​

每个底层 SDK 错误码都不一样。统一表：

export enum RtcError {
  PERMISSION_DENIED   = 'PERMISSION_DENIED',
  NETWORK_UNREACHABLE = 'NETWORK_UNREACHABLE',
  ROOM_NOT_FOUND      = 'ROOM_NOT_FOUND',
  TOKEN_EXPIRED       = 'TOKEN_EXPIRED',
  KICKED_OUT          = 'KICKED_OUT',
  DEVICE_BUSY         = 'DEVICE_BUSY',
  CODEC_NOT_SUPPORTED = 'CODEC_NOT_SUPPORTED',
  UNKNOWN             = 'UNKNOWN',
}

// 各端按底层错误映射
function mapWxError(code: number): RtcError { /* TRTC 映射表 */ }
function mapWebError(e: DOMException): RtcError { /* 浏览器映射 */ }

6. 能力差异速记​

能力WebRN微信小程序备注
屏幕共享✅iOS 14+ / Android⚠️（限直播）小程序限制多
多摄像头切换✅✅⚠️TRTC 提供 API
美颜 / 虚拟背景自研TRTC 内置TRTC 内置各厂商方案
Insertable Streams✅❌❌Web 独有
简单录制MediaRecorderTRTC 录制TRTC 云端录制通常云端

7. 跨端互通关键​

要让 H5 用户和小程序用户出现在同一个房间，必须确保：

  1. 同一套房间服务：要么全部走 TRTC 云，要么用厂商提供的 RTC ↔ WebRTC 互通方案。
  2. 统一 Token：服务端按平台签发不同格式但同房间的 token。
  3. Codec 一致：H.264 是最大公约数，小程序基本只用 H.264。
  4. 音频采样率：48kHz 全平台 OK，避免重采样开销。

8. 目录结构​

L6-跨端连麦SDK/
├── packages/
│   ├── rtc-core/
│   ├── rtc-web/
│   ├── rtc-rn/
│   ├── rtc-wx-mp/
│   ├── rtc-alipay-mp/
│   └── rtc-uniapp/
├── examples/
│   ├── web-demo/
│   ├── rn-demo/
│   └── uniapp-demo/
└── docs/
    ├── api.md
    └── platform-matrix.md

9. 验收 Checklist​

  • H5 与微信小程序在同一房间通话成功
  • uni-app 一份代码编译到 H5/微信/支付宝/APP 都能跑
  • 错误码全平台一致
  • 关键事件（join/leave/quality）在所有端都触发
  • H.264 强制兼容路径打通
  • 一台设备从 H5 切到小程序登录，房间状态正确

10. 参考资料​