桌面媒体捕获

使用 MediaManager.getDisplayMedia() 捕获桌面、窗口或浏览器标签页的媒体流。这是屏幕分享功能的基础——获取到 MediaStream 后，可将 track 添加到 WetRTC 连接中发送给远端。

在线体验

加载交互 Demo…

最简用法

import { MediaManager } from '@wetspace/wetrtc'

// 捕获屏幕流（浏览器会弹出选择器）
const stream = await MediaManager.getDisplayMedia({
  width: 1920,
  height: 1080,
  frameRate: 30,
  audio: true, // 可选：同时捕获系统音频
})

// 绑定到 video 元素预览
const video = document.querySelector('video')!
video.srcObject = stream
await video.play()

// 用户从系统 UI 停止分享时，track 会触发 ended 事件
stream.getVideoTracks()[0].addEventListener('ended', () => {
  console.log('屏幕捕获已结束')
})

添加到 WebRTC 连接

捕获屏幕流后，将 track 加入 WetRTC 实例即可推送给远端：

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

declare const signal: SignalChannel
declare const previewVideo: HTMLVideoElement

const rtc = new WetRTC({ signal, direction: 'sendonly' })

const screenStream = await rtc.media.getDisplayMedia({
  width: 1920,
  height: 1080,
  audio: true,
})

// 本地预览
previewVideo.srcObject = screenStream

// 推送给远端
for (const track of screenStream.getTracks()) {
  rtc.addTrack(track, screenStream)
}

await rtc.connect()

相关示例

• 屏幕分享（发送端 / 接收端） — 完整的 WebRTC 屏幕分享流程
• 媒体管理 — 设备枚举、摄像头、录屏等更多 Demo