WebRTC 从canvas获取媒体流

作者：追风剑情发布于：2024-9-2 21:40 分类：Unity3d

调用 HTMLCanvasElement.captureStream() 方法可以从 canvas 实时获取视频流。

 MediaStream stream = canvas.captureStream(frameRate);

参数：frameRate，可选参数，表示视频帧率，类型为双精浮点值。如果未指定参数，则每次画布变化时都会捕获一个新帧；如果取值为0，则不会自动捕获，而是在调用 requestFrame() 方法时触发捕获。
返回值：返回 MediaStream 媒体流对象，该对象包含类型为 CanvasCaptureMediaStreamTrack 的单一媒体轨道。

// CanvasCaptureMediaStreamTrack 的定义
interface CanvasCaptureMediaStreamTrack : MediaStreamTrack {
  readonly attribute HTMLCanvasElement canvas;
  void requestFrame();
}

CanvasCaptureMediaStreamTrack 继承自 MediaStreamTrack，增加了 canvas 属性和 requestFrame() 方法。

从 canvas 元素捕获视频流，将视频流发送给对等端。HTMLCanvasElement.captureStream() 方法示例。

// 获取canvas元素
const canvasElt = document.querySelector('canvas');
// 获取媒体流，帧率为25
const stream = canvasElt.captureStream(25);
// 使用RTCPeerConnection将媒体流发送给对等端
pc.addStream(stream);

标签: Unity3d