Widely available すべての主要ブラウザで対応済み。安心して使用可能。

captureStream() for <canvas>

Media Capture and Streams API の CanvasCaptureMediaStreamTrack インターフェイスは、HTMLCanvasElement.captureStream() の呼び出しに続いて <canvas> から生成される MediaStream に含まれるビデオトラックを表します。

EventTarget MediaStreamTrack CanvasCaptureMediaStreamTrack

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CanvasCaptureMediaStreamTrack
51
79
11
51
11
canvas

CanvasCaptureMediaStreamTrack インターフェースの canvas 読み取り専用プロパティは、フレームがキャプチャされる HTMLCanvasElement を返す。
51
79
11
51
11
requestFrame

requestFrame() は CanvasCaptureMediaStreamTrack インターフェイスのメソッドで、フレームをキャンバスから取り込んでストリームに送信することをリクエストします。
51
79
11
51
11
captureStream

captureStream() は HTMLCanvasElement インターフェイスのメソッドで、MediaStream を返します。これは CanvasCaptureMediaStreamTrack を含んでおり、このキャンバスの内容をリアルタイムに動画キャプチャします。
51
79
43
11
51
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

  • captureStream() for <canvas> の活用

    Media Capture and Streams API の CanvasCaptureMediaStreamTrack インターフェイスは、HTMLCanvasElement.captureStream() の呼び出しに続いて <canvas> から生成される MediaStream に含まれるビデオトラックを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク