2.5　从canvas获取媒体流

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

MediaStream = canvas.captureStream(frameRate);

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

CanvasCaptureMediaStreamTrack的定义如代码清单2-41所示。

代码清单2-41　CanvasCaptureMediaStreamTrack的定义

interface CanvasCaptureMediaStreamTrack : MediaStreamTrack {
  readonly        attribute HTMLCanvasElement canvas;
  void requestFrame ();
};

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

代码清单2-42从canvas元素捕获视频流，将视频流发送给对等端。

代码清单2-42　HTMLCanvasElement.captureStream()方法示例

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