媒体管理

WetRTC 的 MediaManager 提供设备枚举、本地媒体采集、屏幕分享和远端流管理能力。可通过 rtc.media 访问。

设备枚举

加载交互 Demo…

import { MediaManager } from '@wetspace/wetrtc'

// 通过 WetRTC 实例（rtc.media）
// const devices = await rtc.media.enumerateDevices()

// 静态调用，无需创建实例
const devices = await MediaManager.enumerateDevices()
// [{ deviceId, groupId, kind: 'videoinput', label: '摄像头' }, ...]

const total = devices.length
const cameras = devices.filter(d => d.kind === 'videoinput').length
const mics = devices.filter(d => d.kind === 'audioinput').length
const speakers = devices.filter(d => d.kind === 'audiooutput').length

console.log(`共 ${total} 个设备：摄像头 ${cameras}、麦克风 ${mics}、扬声器 ${speakers}`)

采集本地媒体

加载交互 Demo…

import { MediaManager } from '@wetspace/wetrtc'

// 摄像头 + 麦克风（静态调用，无需 WetRTC 实例）
const stream = await MediaManager.getUserMedia({
  video: { width: 1280, height: 720 },
  audio: true,
})
// 或在连接实例上：await rtc.media.getUserMedia({ ... })

// 绑定到 video 预览（含音频轨时可同时播放声音）
const video = document.querySelector('video')!
video.srcObject = stream
await video.play()

// 仅音频
const audioStream = await MediaManager.getUserMedia({ audio: true })

// 添加到 WebRTC 连接（rtc 为 WetRTC 实例）
// for (const track of stream.getTracks()) {
//   rtc.addTrack(track, stream)
// }

屏幕分享

// 浏览器
const screenStream = await rtc.media.getDisplayMedia({
  video: { width: 1920, height: 1080, frameRate: 30 },
  audio: true,
})

// Electron（需传入 desktopCapturer sourceId）
const electronStream = await rtc.media.getDisplayMedia({
  sourceId: 'screen:0:0',
  audio: false,
})

// 添加屏幕流 track
for (const track of screenStream.getTracks()) {
  rtc.addTrack(track, screenStream)
}

低延迟场景可额外配置 videoEncoding 与 preferredVideoCodec: 'h264'，详见 低延迟屏幕共享。

加载交互 Demo…

屏幕录制

浏览器原生 MediaRecorder 可配合 getDisplayMedia 实现录屏。下方 Demo 演示完整流程：选择屏幕 → 录制 → 回放 / 下载。

加载交互 Demo…

远端媒体

远端媒体通过 track 事件自动管理：

rtc.on('track', (ev) => {
  // ev.streams[0] 是远端 MediaStream
  remoteVideo.srcObject = ev.streams[0]
})

// 也可以手动获取
const remoteStreams = rtc.media.getRemoteStreams()

移除 Track

// 停止并移除某个 track
rtc.removeTrack(track)

类型定义

interface DeviceInfo {
  deviceId: string
  groupId: string
  kind: MediaDeviceKind
  label: string
}

interface DisplayMediaOptions {
  sourceId?: string       // Electron desktopCapturer sourceId
  audio?: boolean
  width?: number
  height?: number
  frameRate?: number
}

interface MediaConstraints {
  audio?: boolean | MediaTrackConstraints
  video?: boolean | MediaTrackConstraints
}