recursal/MDN huggingface dataset:
FileSystemSyncAccessHandle.write()
==================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`FileSystemSyncAccessHandle` インターフェイスの **`write()`** メソッドは、指定のバッファーの内容をハンドルに対応するファイルに書き込みます。オフセットを指定することもできます。`ArrayBuffer` の内容を直接操作することはできないことに注意してください。かわりに、バッファーを指定の形式で表す `Int8Array` などの型付き配列オブジェクトの一つ、または `DataView` オブジェクトを作成し、それを用いてバッファーの内容を読み書きします。

`FileSystemSyncAccessHandle.write()` により行われる書き込みは in-place です。すなわち、変更は writer に書き込まれるのと同時に実際のファイルに書き込まれます。これは (`FileSystemFileHandle.createWritable()` などの) File System Access API で利用可能な他の書き込みの仕組みでは成り立たず、変更は書き込みストリームが閉じられるまでディスクに書き込まれません。

構文
--


```js
write(buffer, FileSystemReadWriteOptions)
```

### 引数

`buffer`

ファイルに書き込むバッファーを表す `ArrayBuffer` または (`DataView` などの) `ArrayBufferView` です。

`FileSystemReadWriteOptions` 省略可

以下のプロパティを含むオプションオブジェクトです。

`at`

バッファーを書き込むファイルの先頭からのバイト単位のオフセットを表す数値です。


### 返値

ファイルに書き込まれたバイト数を表す数値で解決する `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

対応するアクセスハンドルが既に閉じられているとき投げられます。

例
-

以下の非同期のイベントハンドラー関数は、Web Worker の中にあります。メインスレッドからメッセージを受信すると、以下の動作をします。

* 同期式ファイルアクセスハンドルを作成します。
* ファイルのサイズを取得し、格納用の `ArrayBuffer` を作成します。
* ファイルの内容をバッファーに読み込みます。
* メッセージをエンコードし、ファイルの終端に書き込みます。
* 変更をディスクに書き込み、アクセスハンドルを閉じます。


```js
onmessage = async (e) => {
  // メインスクリプトからの処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式のアクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを取得する
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの終端に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに書き込む
  accessHandle.flush();

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```


**メモ:** 仕様書の以前のバージョンでは、`close()`・`flush()`・`getSize()`・`truncate()` は誤って非同期のメソッドとされていました。これは現在は変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-write |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
CloseEvent: code プロパティ
======================

**`code`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、サーバーが接続を閉じた理由を示す WebSocket 接続クローズコードを返します。

値
-

整数の WebSocket 接続クローズコードであり、 `1000` - `4999` の範囲でサーバーが接続を閉じた理由を示します。

| ステータスコード | 意味 | 説明 |
| --- | --- | --- |
| `0`–`999` |  | 未使用。 |
| `1000` | 通常のクローズ | この接続は、作成された目的を正常に完了した。 |
| `1001` | 消滅 | サーバーの故障か、ブラウザーが接続を開いたページから移動しているため、エンドポイントが消えている。 |
| `1002` | プロトコルエラー | このエンドポイントはプロトコルエラーにより接続を終了した。 |
| `1003` | 未対応のデータ | エンドポイントが受け付けない種類のデータを受信したため、接続を終了した。（例えば、テキストのみのエンドポイントがバイナリデータを受信した場合など。） |
| `1004` | 予約 | **予約済み。**意味は今後定義されるかもしれない。 |
| `1005` | ステータス未受信 | **予約済み。**ステータスコードが期待されたにもかかわらず、提供されなかったことを示す。 |
| `1006` | 異常クローズ | **予約済み。**ステータスコードが期待される接続が異常終了した（close frame が送信されない）ことを示す。 |
| `1007` | フレームペイロードデータが無効 | 矛盾するデータ（テキストメッセージ内に UTF-8 ではないデータがあった場合など）を含むメッセージを受信したため、エンドポイントが接続を終了した。 |
| `1008` | ポリシー違反 | エンドポイントは、そのポリシーに違反するメッセージを受信したため、接続を終了しています。これは一般的なステータスコードで、コード 1003 や 1009 が適切でない場合に使用されます。 |
| `1009` | メッセージが大きすぎる | 大きすぎるデータフレームを受信したため、エンドポイントが接続を終了しています。 |
| `1010` | 必須の拡張機能 | クライアントが接続を終了している。サーバーが 1 つまたは複数の拡張機能を交渉することを期待したが、サーバーがそうしなかったため。 |
| `1011` | 内部エラー | サーバーが接続を終了している。リクエストを実行できない予期せぬ状況に遭遇したため。 |
| `1012` | サービス再起動 | サーバーが再起動するため、接続を終了しようとしている。 |
| `1013` | 後で再試行 | サーバーが過負荷のため、一部のクライアントを切断するなど、一時的な状態により接続を終了している。 |
| `1014` | ゲートウェイ違反 | サーバーがゲートウェイまたはプロキシーとして動作しており、上流サーバーから無効な応答を受け取った。これは、 HTTP の 502 ステータスコードと同様です。 |
| `1015` | TLS ハンドシェイク | **予約済み。** TLS ハンドシェイクの失敗（サーバー証明書の確認ができないなど）により、接続が切断されたことを示す。 |
| `1016`–`2999` |  | WebSocket プロトコル仕様の今後の改訂による定義、および拡張仕様による定義用。 |
| `3000`–`3999` |  | ライブラリー、フレームワーク、アプリケーションで使用されます。これらのステータスコードは、 IANA に直接登録されています。これらのコードの解釈は、WebSocket プロトコルでは未定義です。 |
| `4000`–`4999` |  | 私的用途向けのものであり、登録はできない。このコードは、WebSocket アプリケーション間の事前の合意により使用することができる。これらのコードの解釈は、WebSocket プロトコルでは未定義。 |

例
-

次の例は、 `code` の値をコンソールに表示します。


```js
WebSocket.onclose = (event) => {
  console.log(event.code);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-code② |

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

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

関連情報
----

* RFC 6455 （WebSocket プロトコル仕様書）
* WebSocket Close Code Number Registry (IANA)
CloseEvent: CloseEvent() コンストラクター
=================================

**`CloseEvent()`** コンストラクターは新しい `CloseEvent` オブジェクトを生成します。

構文
--


```js
new CloseEvent(type)
new CloseEvent(type, options)
```

### 値

`type`

 このイベントの名前を示す文字列です。
 大文字小文字を区別し、ブラウザーは常に `close` を設定します。


`options` 省略可

オブジェクトで、*`Event()` で定義されているものに加え*、次のプロパティを持ちます。

`wasClean` 省略可

論理値で、接続がきれいに閉じたかどうかを示します。既定値は `false` です。

`code` 省略可

整数で、サーバーから送られる接続クローズコードを表します。。既定値は `0` です。

`reason` 省略可

文字列で、サーバーが接続を閉じる理由を人間が理解できる形で表したものです。既定値は `''` です。


返値
--

新しい `CloseEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-closeevent-closeevent |

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

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

関連情報
----

* `CloseEvent`: 作成するオブジェクトのインターフェイス。
CloseEvent: wasClean プロパティ
==========================

**`wasClean`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、接続がきれいに閉じられた場合は `true` を返します。

値
-

論理値です。接続がきれいに閉じられた場合は true、そうでなければ false です。

例
-

次の例では、 `wasClean` の値をコンソールに表示します。


```js
WebSocket.onclose = (event) => {
  console.log(event.wasClean);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-wasclean② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CloseEvent: reason プロパティ
========================

**`reason`** は `CloseEvent` インターフェイスの読み取り専用プロパティで、サーバーが接続を閉じる際に示した WebSocket 接続が閉じた理由を返します。つまり、閉じたことについての簡潔で人間が読める散文的な説明です。

値
-

文字列です。

例
-

次の例では、 `reason` の値をコンソールに表示します。


```js
WebSocket.onclose = (event) => {
  console.log(event.reason);
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-closeevent-reason② |

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

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

関連情報
----

* RFC 6455（WebSocket プロトコル仕様書）
MediaStreamAudioSourceNode()
============================

ウェブオーディオ API の **`MediaStreamAudioSourceNode()`** コンストラクターは、指定された `MediaStream` の最初の音声トラックを音源として用いる新しい `MediaStreamAudioSourceNode` オブジェクトを作成して返します。

**メモ:** `MediaStreamAudioSourceNode` を作成するもう一つの方法は、音声の取得元のストリームを指定して `AudioContext.createMediaStreamSource()` メソッドを呼ぶことです。

構文
--


```js
new MediaStreamAudioSourceNode(context, options)
```

### 引数

`context`

ノードを関連付ける音声コンテキストを表す `AudioContext` です。

`options`

`MediaStreamAudioSourceNode` に持たせるプロパティを定義するオブジェクトです。

`mediaStream`

必須のプロパティで、ノードが用いる音声の取得元となる `MediaStream` を指定します。


### 返値

指定されたストリームから音声を取得する音声ノードを表す新しい `MediaStreamAudioSourceNode` オブジェクトを返します。

### 例外

`InvalidStateError` `DOMException`

指定された `MediaStream` に音声トラックが無いとき投げられます。

例
-

この例では、`getUserMedia()` を用いてユーザーのカメラにアクセスし、その `MediaStream` から新しい `MediaStreamAudioSourceNode` を作成します。


```js
// 変数を定義する
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// getUserMedia によりストリームを取得し、
// MediaStreamAudioSourceNode に入れる
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices
    .getUserMedia(
      // constraints: このアプリケーションで音声と映像を用いるか
      {
        audio: true,
        video: false,
      },
    )
    .then((stream) => {
      const options = {
        mediaStream: stream,
      };

      const source = new MediaStreamAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch((err) => {
      console.error(`以下の gUM エラーが発生しました: ${err}`);
    });
} else {
  console.log(
    "このブラウザーでは新しい getUserMedia がサポートされていません！",
  );
}
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastreamaudiosourcenode |

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

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

`MediaStreamAudioSourceNode` インターフェイスの読み取り専用プロパティ **`mediaStream`** は、このノードが音声を受信する元の音声トラックがある `MediaStream` を示します。

このストリームは、ノードが `MediaStreamAudioSourceNode()` コンストラクターまたは `AudioContext.createMediaStreamSource()` メソッドにより最初に作成されたときに指定されたものです。

値
-

コードの音源として働いている `MediaStreamTrack` があるストリームを表す `MediaStream` です。

ユーザーエージェントは、指定されたストリームで見つかった最初の音声トラックをこのノード用に用います。しかし、複数のトラックからなるストリームにおいて、どのトラックが使用されているかを確実に知る方法はありません。どのトラックが使われているかが重要な場合や、トラック自体にアクセスしたい場合は、かわりに `MediaStreamTrackAudioSourceNode` を用いるべきです。

例
-


```js
const audioCtx = new window.AudioContext();
let options = {
  mediaStream: stream,
};

let source = new MediaStreamAudioSourceNode(audioCtx, options);
console.log(source.mediaStream);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastream |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream.getAudioTracks()
============================

**`getAudioTracks()`** は `MediaStream` インターフェイスのメソッドで、そのストリームの `track set` の中から、 `MediaStreamTrack.kind` が `audio` である `MediaStreamTrack` を表すオブジェクトの配列を返します。

構文
--


```js
var mediaStreamTracks = mediaStream.getAudioTracks();
```

### 引数

なし。

### 返値

ストリームに含まれる音声トラックである `MediaStreamTrack` オブジェクトの配列です。音声トラックとは `kind` プロパティが `audio` のトラックです。ストリーム内に音声トラックがない場合は、この配列は空になります。

**メモ:** 返されるトラックの順序は仕様書では定義されておらず、実際、 `getAudioTracks()` を呼び出すごとに変わる可能性があります。

この API の初期の版では、特別な `AudioStreamTrack` インターフェイスがあり、音声ストリームのリストに含まれる各項目の型として使用されていましたが、これはその後でメインの `MediaStreamTrack` インターフェイスに統合されました。

例
-

この例では、ウェブカメラの音声と動画を `getUserMedia()` を使ってストリームとして取得し、そのストリームを `<video>` 要素に設定します。その後、終了時にストリーム内の最初の音声トラックを停止するタイマーを設定します。


```js
navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // Stop the audio stream after 5 seconds
    setTimeout(() => {
      const tracks = mediaStream.getAudioTracks();
      tracks[0].stop();
    }, 5000);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-getaudiotracks |

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

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

**`active`** は `MediaStream` インターフェイスの読み取り専用プロパティで、ストリームが現在アクティブであれば `true` を返し、それ以外の場合は `false` を返します。トラックの状態が `MediaStreamTrack.ended` でないトラックが 1 本でもある場合は、ストリームがアクティブであるとみなされます。すべでのトラックが終了すると、このストリームの `active` プロパティは `false` になります。

値
-

論理値で、このストリームが現在アクティブな場合は `true` を返します。それ以外は `false` を返します。

例
-

この例では、 `getUserMedia()` を用いて、要求されたユーザーのローカルのカメラとマイクをソースとする新しいストリームを取得します。ストリームが有効になると（ここでは、`Promise` が履行状態になった時）、ストリームが現在アクティブであるかどうかに応じてページにあるボタンの状態が更新されます。


```js
const promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

promise.then((stream) => {
  const startBtn = document.querySelector("#startBtn");
  startBtn.disabled = stream.active;
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-active |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream: removetrack イベント
=============================

`removetrack` イベントは、新しい `MediaStreamTrack` オブジェクトが `MediaStream` から取り除かれたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("removetrack", (event) => {});

onremovetrack = (event) => {};
```

イベント型
-----

`MediaStreamTrackEvent` (en-US) です。 `Event` から継承しています。

Event

MediaStreamTrackEvent

(en-US)イベントプロパティ
---------

*親インターフェイスである `Event` から継承したプロパティもあります。*

`track` 読取専用 

`MediaStreamTrack` オブジェクトで、このストリームから削除されたトラックを表します。

例
-

`addEventListener()` を使用すると次にようになります。


```js
let stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});
```


`onremovetrack` イベントハンドラープロパティを使用すると次にようになります。


```js
let stream = new MediaStream();

stream.onremovetrack = (event) => {
  console.log(`${event.track.kind} track removed`);
};
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-removetrack |

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

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

関連情報
----

* 関連イベント: `addtrack`
* `AudioTrackList` をターゲットとしたこのイベント: `removetrack`
* `VideoTrackList` をターゲットとしたこのイベント: `removetrack`
* メディアストリーム API
* WebRTC
MediaStream.getTracks()
=======================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`getTracks()`** は `MediaStream` インターフェイスのメソッドで、このストリームの`トラックセット`にあるすべての `MediaStreamTrack` オブジェクトを `MediaStreamTrack.kind` に関係なく表す配列を返します。

構文
--


```js
var mediaStreamTracks = mediaStream.getTracks();
```

### 引数

なし。

### 返値

`MediaStreamTrack` オブジェクトの配列です。

例
-


```js
navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    // 5 秒後にストリームを停止
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      tracks[0].stop();
    }, 5000);
  });
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettracks |

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

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

**`MediaStream.id()`** は読み取り専用プロパティであり、このオブジェクトの固有識別子 (GUID) である 36 文字で表現される `DOMString` を返します。

構文
--


```js
var id = mediaStream.id;
```

例
-


```js
var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function (stream) {
  console.log(stream.id);
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-id |

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

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

関連情報
----

* このプロパティが所属する `MediaStream` インターフェイス
MediaStream.clone()
===================

**`clone()`** は `MediaStream` インターフェイスのメソッドで、この `MediaStream` の複製を作成します。この新しい `MediaStream` オブジェクトは、新しい固有の `id` を持ち、 MediaStream に含まれる `MediaStreamTrack` もそれぞれ `clone()` を呼び出して得られたものになります。

構文
--


```js
var stream = MediaStream.clone();
```

### 引数

なし。

### 返値

新しい `MediaStream` インスタンスを返します。このインスタンスは新しい固有の ID を持ち、 `MediaStream` に含まれるすべての `MediaStreamTrack` を含みます。この `MediaStreamTrack` はそれぞれ `clone()` によって呼び出されたものになります。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-clone |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream.getTrackById()
==========================

**`MediaStream.getTrackById()`** メソッドは、指定された ID 文字列を持つトラックを表現する `MediaStreamTrack` オブジェクトを返します。指定した ID を持つトラックが存在しない場合は、 `null` を返します。

構文
--


```js
var track = MediaStream.getTrackById(id);
```

### 引数

`id`

取得したいトラックを識別する `DOMString` です。

### 返値

引数で指定した `id` の文字列と同じ `MediaStreamTrack.id` を持つトラックが見つかった場合は、その `MediaStreamTrack` オブジェクトを返します。それ以外の場合は、 `null` を返します。

例
-

この例では、動画に含まれるコメンタリートラックを有効にしています。メインのオーディオトラックの音量を 50% にしてから、コメンタリートラックを有効にしています。


```js
stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
stream.getTrackById("commentary-track").enabled = true;
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-gettrackbyid |

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

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

関連情報
----

* `MediaStream`
* `MediaStreamTrack.id`
MediaStream.getVideoTracks()
============================

**`getVideoTracks()`** は `MediaStream` インタフェースのメソッドで、このストリームに含まれる動画トラックを表す `MediaStreamTrack` オブジェクトの配列を返します。

構文
--


```js
var mediaStreamTracks[] = mediaStream.getVideoTracks();
```

### 引数

なし。

### 返値

`MediaStreamTrack` オブジェクトの配列で、それぞれがメディアストリームに含まれるそれぞれの動画トラックを表します。動画トラックは `kind` プロパティが `video` であるトラックです。ストリームに動画トラックが含まれていない場合、配列は空となります。

**メモ:** トラックの順序は仕様で定義されておらず、 `getVideoTracks()` の呼び出しごとに同じ順序になるとは限りません。

この API の初期の版では、特別な `VideoStreamTrack` インターフェイスがあり、動画ストリームのリストに含まれる各項目の型として使用されていましたが、これはその後でメインの `MediaStreamTrack` インターフェイスに統合されました。

例
-

次の例は、 Chrome's
Image Capture / Photo Resolution Sample (英語)から抜粋したものであり、 `getVideoTracks()` を用いて取得したトラックを `ImageCapture()` (en-US) コンストラクターへ渡しています。


```js
var imageCapture;

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  document.querySelector("video").srcObject = mediaStream;

  const track = mediaStream.getVideoTracks()[0];
  imageCapture = new ImageCapture(track);

  return imageCapture.getPhotoCapabilities();
});
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-getvideotracks |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream()
=============

**`MediaStream()`** コンストラクターは、新しく生成された `MediaStream` を返し、これはそれぞれが `MediaStreamTrack` オブジェクトで表されるメディアトラックのコレクションとして機能します。

何か引数が与えられた場合は、指定されたトラックが新しいストリームに追加されます。そうでなければ、ストリームはトラックを持ちません。

構文
--


```js
new MediaStream();
new MediaStream(stream);
new MediaStream(tracks);
```

### 引数

`stream`

様々な `MediaStream` オブジェクトで、そのトラックが新しく生成されたストリームに自動的に追加されます。トラックは元のストリームから除去されないので、 2 つのストリームで共用されることになります。

`tracks`

`MediaStreamTrack` オブジェクトの `Array` で、それぞれがストリームに追加するトラックです。

### 返値

生成された `MediaStream` オブジェクトで、空のトラック、もしくは指定されたトラックを持つ。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-constructor |

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

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

関連情報
----

* `MediaStream`
MediaStream: addtrack イベント
==========================

`addtrack` イベントは、新しい `MediaStreamTrack` オブジェクトが `MediaStream` に追加されたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("addtrack", (event) => {});

onaddtrack = (event) => {};
```

イベント型
-----

`MediaStreamTrackEvent` (en-US) です。 `Event` から継承しています。

Event

MediaStreamTrackEvent

(en-US)イベントプロパティ
---------

*親インターフェイスである `Event` から継承したプロパティもあります。*

`track` 読取専用 

`MediaStreamTrack` オブジェクトで、このストリームに追加されたトラックを表します。

例
-

`addEventListener()` を使用すると次にようになります。


```js
let stream = new MediaStream();

stream.addEventListener("addtrack", (event) => {
  console.log(`New ${event.track.kind} track added`);
});
```


`onaddtrack` イベントハンドラープロパティを使用すると次にようになります。


```js
let stream = new MediaStream();

stream.onaddtrack = (event) => {
  console.log(`New ${event.track.kind} track added`);
};
```

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # event-mediastream-addtrack |

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

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

関連情報
----

* 関連イベント: `removetrack`
* `AudioTrackList` をターゲットとしたこのイベント: `addtrack`
* `VideoTrackList` をターゲットとしたこのイベント: `addtrack`
* メディアストリーム API
* WebRTC
MediaStream.addTrack()
======================

**`MediaStream.addTrack()`** メソッドは、ストリームへ新しいトラックを追加します。このトラックは `MediaStreamTrack` 型の引数して指定します。

**メモ:** 指定されたトラックが既にストリームのトラックセットにあった場合、このメソッドは何もしません。

構文
--


```js
stream.addTrack(track);
```

### 引数

`track`

このストリームへ追加する `MediaStreamTrack` です。

### 返値

`undefined`例
-

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-addtrack |

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

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

関連情報
----

* `MediaStream` （所属先のインターフェイス）
Range: setEndAfter() メソッド
=========================

**`Range.setEndAfter()`** メソッドは `Range` の終了位置を別の `Node` から相対的に設定します。この `Range` の終了位置の親 `Node` は `referenceNode` と同じになります。

構文
--


```js
setEndAfter(referenceNode)
```

### 引数

`referenceNode`

その後で `Range` を終わらせる `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setEndAfter(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setendafter |

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

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

関連情報
----

* DOM インターフェイス索引
Range: setStartBefore() メソッド
============================

**`Range.setStartBefore()`** メソッドは `Range` の開始位置を別の `Node` からの相対位置で設定します。 `Range` の開始位置の親 `Node` は `referenceNode` と同じになります。

構文
--


```js
setStartBefore(referenceNode)
```

### 引数

`referenceNode`

その前で `Range` を始める `Node` です。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setStartBefore(referenceNode);
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-setstartbefore |

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

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

関連情報
----

* DOM インターフェイス索引
Range: selectNodeContents() メソッド
================================

**`Range.selectNodeContents()`** メソッドは `Range` が `Node` のコンテンツを含むように設定します。

`Range` の開始と終わりの親ノード (`Node`) が参照ノードになります。 `startOffset` は 0 で、 `endOffset` は子 `Node` の数、または参照ノードに格納する文字数です。

構文
--


```js
selectNodeContents(referenceNode)
```

### 引数

`referenceNode`

`Range` 内でコンテンツが選択されるノード (`Node`) です。

### 返値

なし (`undefined`)。

例
-


```js
const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
```

### ライブ例

 この例では、ユーザーがボタンで段落を選択・解除できるようにしています。
 `Document.createRange()`、`Range.selectNodeContents()`、`Selection.addRange()` (en-US) を使用してコンテンツを選択しています。
 選択解除には `Window.getSelection()` と `Selection.removeAllRanges()` (en-US) を使用します。

#### HTML


```html
<p id="p">
  <strong>以下のボタンを使用して</strong
 >この段落の内容を選択または選択解除してください。
</p>
<button id="select-button">段落を選択</button>
<button id="deselect-button">段落を選択解除</button>
```


#### JavaScript


```js
const p = document.getElementById("p");
const selectButton = document.getElementById("select-button");
const deselectButton = document.getElementById("deselect-button");

selectButton.addEventListener("click", (e) => {
  // Clear any current selection
  const selection = window.getSelection();
  selection.removeAllRanges();

  // Select paragraph
  const range = document.createRange();
  range.selectNodeContents(p);
  selection.addRange(range);
});

deselectButton.addEventListener("click", (e) => {
  const selection = window.getSelection();
  selection.removeAllRanges();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-range-selectnodecontents |

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

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

関連情報
----

* DOM インターフェイス索引