HTMLMediaElement.srcObject

srcObject は HTMLMediaElement インターフェイスのプロパティで、 HTMLMediaElement に関連付けられたメディアソースを提供するオブジェクトを設定または取得します。

このオブジェクトは MediaStream、MediaSource、Blob や（Blob から派生している） File です。

メモ: 2020 年 3 月現在、 Safari のみが MediaStream 以外のオブジェクトを設定することに対応しています。他のブラウザーが追いつくまで、 MediaSource、Blob、および File の場合は、URL.createObjectURL() を使用して URL を作成し、それを HTMLMediaElement.src に割り当てる必要があります。以下の例を参照してください。

値

MediaStream、MediaSource、Blob、File オブジェクト。（実際に何が対応されているのかは互換性一覧表を確認してください。)

使用上の注意

メディアソース仕様書の古いバージョンでは、オブジェクト URL を作成するために createObjectURL() を使用してから、その URL を src に設定する必要がありました。 現在は、MediaStream を srcObject に直接設定できます。

例

基本的な例

この例では、メディアソースを新しく作成した <video> 要素に割り当てています。

const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
const video = document.createElement('video');
video.srcObject = mediaStream;

この例では、新しい MediaSource が新しく作成された <video> に割り当てられます。

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.srcObject = mediaSource;

src プロパティへの代替の対応

以下の例では、 srcObject に対応していない場合、オブジェクト URL を作成して src に代入する必要がある古いバージョンのブラウザーに対応しています。

最初に、カメラから取得した MediaStream を新しく生成した <video> 要素に、古いブラウザーへの代替手段つきで割り当てます。

const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
const video = document.createElement('video');
if ('srcObject' in video) {
  video.srcObject = mediaStream;
} else {
  // この機能はなくなる予定であるため、新しいブラウザーでは使用を避けてください。
  video.src = URL.createObjectURL(mediaStream);
}

次に、新しく作成された <video> 要素に、古いブラウザーや MediaSource の割り当てにまだ対応していないブラウザーのための代替手段を直接割り当てます。

const mediaSource = new MediaSource();
const video = document.createElement('video');
// 古いブラウザーの場合、srcObject がない場合があります。
if ('srcObject' in video) {
  try {
    video.srcObject = mediaSource;
  } catch (err) {
    if (err.name != "TypeError") {
      throw err;
    }
    // 対応していても、 MediaStream にしか対応していない場合があります。
    video.src = URL.createObjectURL(mediaSource);
  }
} else {
  video.src = URL.createObjectURL(mediaSource);
}

仕様書

Specification
HTML Standard
# dom-media-srcobject-dev

ブラウザーの互換性

BCD tables only load in the browser