HTMLMediaElement.srcObject
==========================

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

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

**メモ:** 2020 年 3 月現在、 Safari のみが `srcObject` に対して完全に、すなわち `MediaSource`、`MediaStream`、`Blob`、`File` のオブジェクトを値にすることに対応しています。他のブラウザーは `MediaStream` に対応しています。他のブラウザーが追いつくまで、代替として `URL.createObjectURL()` を使用して URL を作成し、それを `HTMLMediaElement.src` に代入するようにしてください（以下の例を参照してください）。さらに、バージョン 108 の Chromium は、専用ワーカーの `MediaSource` オブジェクトを、そのオブジェクトの（ワーカーから転送された） `MediaSourceHandle` (en-US) インスタンスを `srcObject` に割り当てることで装着することに対応しています。

値
-

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

使用上の注意
------

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

例
-

### 基本的な例

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


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


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


```js
const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;
```

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

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

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


```js
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` の割り当てにまだ対応していないブラウザーのための代替手段を直接割り当てます。


```js
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);
}
```

### ワーカーで `MediaSource` を構築し、それをメインスレッドに渡して再生する

専用ワーカー内部で `MediaSource.handle` (en-US) プロパティにアクセスでき、結果として `MediaSourceHandle` (en-US) オブジェクトが `postMessage()` コールによりワーカーを作成したスレッド（この場合はメインスレッド）に転送されます。


```js
// 専用ワーカー内
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// ワーカーを作成したコンテキストでハンドルを処理する
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // MediaSource で sourceopen を待ってから、 SourceBuffer を
  // 作成し、フェッチしたメディアを投入します。 MediaSource は、
  // HTMLMediaElement に接続され、その readyState が
  // "open" になるまで SourceBuffer の作成を受け入れません。
});
```


メインスレッドでは、`message` イベントハンドラーからハンドルを受け取り、 `<video>` に `HTMLMediaElement.srcObject` プロパティを通してそれを追加し、`play` ビデオ追加しています。


```js
worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});
```


**メモ:** `MediaSourceHandle` (en-US)s は、共有ワーカーまたはサービスワーカーへの、または共有ワーカーを介した移譲は正常にはできません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-media-srcobject-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.