recursal/MDN huggingface dataset:
DataTransfer.addElement()
=========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`DataTransfer.addElement()`** メソッドは、与えられた要素にドラッグソースを設定します。この要素は `drag` と `dragend` イベントが発生する要素となり、既定のターゲット（ドラッグされたノード）とはなりません。

**メモ:** このメソッドは Firefox 固有です。

構文
--


```js
addElement(element);
```

### 引数

`element`

ドラッグソースとして設定する `Element` です。

### 返値

なし (`undefined`)。

例
-

この例では、`addElement()` メソッドの使用例を示します。


```js
function change\_drag\_node(event, node) {
  const dt = event.dataTransfer;
  dt.addElement(node);
}
```

仕様書
---

このメソッドは、ウェブ標準では定義されていません。

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.types
==================

**`DataTransfer.types`** は読み取り専用プロパティで、 `dragstart` イベントで設定されたドラッグデータ形式の（文字列の）配列を返します。形式の順序は、ドラッグ操作に含まれるデータの順序と同じです。

形式は、データの型や形式を示す Unicode 文字列で、一般的には MIME タイプで指定されます。 MIME タイプでないいくつかの値も、レガシーな理由から特殊なケースに入れられます（たとえば "`text`" など）。

値
-

ドラッグ操作で使用されるデータ形式の配列。各形式は文字列です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 `Files` になります。

例
-

この例では、`types` と `items` プロパティを使用しています。


```js
<!DOCTYPE html>
<html lang=en>
<title>DataTransfer.{types,items} プロパティの例</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart\_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);
 // ドラッグ内容にこの要素の ID を追加し、ドロップハンドラーがどの要素を
 // ツリーに追加すればよいかを知ることができるようにします。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}

function drop\_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // それぞれの形式を表示する
 if (ev.dataTransfer.types != null) {
   for (let i=0; i < ev.dataTransfer.types.length; i++) {
     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
   }
 }
 // それぞれの項目の "kind" と "type" を表示する
 if (ev.dataTransfer.items != null) {
   for (let i=0; i < ev.dataTransfer.items.length; i++) {
     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
   }
 }
}

function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // dropEffect を move に設定する
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
 <ul>
   <li id="i1" ondragstart="dragstart\_handler(event);" draggable="true">項目 1 をドロップゾーンへドラッグしてください</li>
   <li id="i2" ondragstart="dragstart\_handler(event);" draggable="true">項目 2 をドロップゾーンへドラッグしてください</li>
 </ul>
 <div id="target" ondrop="drop\_handler(event);" ondragover="dragover\_handler(event);">ドロップゾーン</div>
</body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-types-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
IDBCursorWithValue.value
========================

`IDBCursorWithValue` インターフェイスの読み取り専用プロパティ **`value`** は、それが何であっても、現在のカーソルの値を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

現在のカーソルの値です。

例
-

この例では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。それぞれの繰り返しで、カーソルの値を `cursor.value` で記録します。

カーソルを用いる場合、キーでデータを選択する必要は無く、単に全部取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが現在指しているレコードのデータを `cursor.value.foo` で取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.value);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursorwithvalue-value① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
MediaRecorder.audioBitsPerSecond
================================

**`audioBitsPerSecond`** は `MediaRecorder` インターフェイスの読み取り専用のプロパティで、使用されている音声エンコーディングのビットレートを返します。

これは、コンストラクターで指定されたビットレート（提供された場合）と異なる場合があります。

値
-

数値 (unsigned long) です。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-audiobitspersecond |

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

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

`MediaRecorder` の **`start()`** メソッドは MediaStream 収録 API の一部であり、1 つ以上の `Blob` オブジェクトへのメディアの収録を開始します。

メディアの全期間を単一の `Blob` に（または `requestData()` を呼び出すまで）収録することも、一度に収録するミリ秒数を指定することもできます。 その後、その量のメディアが収録されるたびに、収録されたメディアに対応できるようにイベントが配信され、その間に、メディアの次のスライスを収録するための新しい `Blob` が作成されます。

`MediaRecorder` の `state` が `inactive` であると仮定すると、`start()` は `state` を `recording` に設定してから、入力ストリームからメディアのキャプチャを開始します。 タイムスライス期間が経過するか、ソースメディアが終了するまで、`Blob` が作成され、そこにデータが収集されます。 `Blob` がその時点まで満たされるたびに（タイムスライス期間または、スライス期間が指定されていない場合はメディアの終わり）、`dataavailable` イベントが収録されたデータとともに `MediaRecorder` に送られます。 ソースがまだ再生中の場合は、新しい `Blob` が作成され、そこに収録が続きます。

ソースストリームが終了すると、`state` は `inactive` に設定され、データ収集は停止します。 最後の `dataavailable` イベントが `MediaRecorder` に送られ、その後に `stop` イベントが続きます。

**メモ:** ブラウザーが収録を開始または収録を続行できない場合は、`DOMError` イベントを発生させ、続いて収集した `Blob` を含む `dataavailable` イベントと `stop` イベントを発生*させよう*とします。

構文
--


```js
start()
start(timeslice)
```

### 引数

`timeslice` 省略可

各 `Blob` に収録するミリ秒数。 この引数が含まれていない場合は、`requestData()` メソッドが呼び出されて `Blob` が取得され、メディアの収録を継続する新しい `Blob` の作成のきっかけがない限り、メディア期間全体が単一の `Blob` に収録されます。

### 返値

なし (`undefined`)。

### 例外

すぐに検出できるエラーは DOM 例外としてスローされます。 他のすべてのエラーは、`MediaRecorder` オブジェクトに送られた `error` イベントを通じて報告されます。 `onerror` イベントハンドラーを実装することで、これらのエラーに対応することができます。

`InvalidModificationError` `DOMException`

収録中のストリームのトラック数が変更された場合に発生します。メディアの収録中にトラックを追加したり削除したりすることはできません。

`InvalidStateError` `DOMException`

`MediaRecorder` が `inactive` 状態ではない場合に発生します。すでに収録中の場合は、メディアの収録を開始することはできません。 `state` プロパティを参照してください。

`NotSupportedError` `DOMException`

収録しようとしているメディアストリームが非アクティブであるか、ストリームの 1 つ以上のトラックが現在の設定を使用して収録できない形式である場合に発生します。

`SecurityError` `DOMException`

`MediaStream` が収録を禁止するように設定されている場合に発生します。 これは、例えば、ユーザーが入力機器を使用する許可を拒否したときに `getUserMedia()` を使用して取得されたソースの場合などです。この例外は、収録開始後にソースメディアのセキュリティオプションが変更された場合にも `error` イベントとして配信される可能性があります。

`UnknownError` `DOMException`

収録処理中に何か他の問題が発生した場合に発生します。

例
-


```js
record.onclick = () => {
  mediaRecorder.start();
  console.log("収録を開始しました。");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-start |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `getUserMedia()`
MediaRecorder: error イベント
=========================

`MediaRecorder` インターフェイスの **`error`** イベントは、エラーが発生したときに発生します。 例えば、記録が許可されていない、またはサポートされていないコーデックを使用して試みられたなどです。

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

構文
--

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


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

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

イベント型
-----

`MediaRecorderErrorEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

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

`error` 読取専用 

`DOMException` で、発生したエラーに関する情報を保持しています。

### 値

レコーダーのライフタイム中にエラーが発生したときに呼び出される関数です。発生する可能性のある他の一般的なエラーに加えて、 MediaStream 収録 API を使用する際に特に以下のエラーが発生する可能性があります。どれが発生したか判断するには、 `MediaRecorderErrorEvent.error.name` の値を調べてみてください。

`InvalidStateError`

非アクティブなレコーダーの停止または一時停止、アクティブなレコーダーの開始または再開、あるいは間違った状態での `MediaRecorder` の操作が試みられました。この例外は、削除されたソースに対してリクエストが行われた場合にも発生します。

`SecurityError`

`MediaStream` が、収録を許可しないように設定されています。例えば、`getUserMedia()` を使用して取得したソースで、ユーザーが入力機器を使用する許可を拒否している場合などに該当する可能性があります。

`NotSupportedError`

ユーザーの端末で対応していない MIME タイプを使用して `MediaRecorder` をインスタンス化しようとしました。リクエストされたコンテナー、コーデック、プロファイル、そして他にも情報が無効な場合があります。

`InvalidModificationError`

収録中のストリームのトラック数が変更されました。メディアの記録中にトラックを追加したり削除したりすることはできません。

`UnknownError`

 セキュリティに関連しない、他に分類できないエラーが発生しました。
 収録が停止し、`MediaRecorder` の `state` は `inactive` となり、最後に残りの受信データで `dataavailable` イベントが `MediaRecorder` に送られ、最後に `stop` イベントが送出されました。


これらのエラーは `MediaRecorder` メソッドを呼び出すことによって直接的に発生することもあれば、録画中に発生する問題によって間接的に発生することもあります。

例
-

`addEventListener` を使って `error` イベントを監視します。


```js
async function record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new MediaRecorder(stream);
  recorder.addEventListener("error", (event) => {
    console.error(`error recording stream: ${event.error.name}`);
  });
  recorder.start();
}

record();
```


上と同じですが、 onerror イベントハンドラープロパティを使用します。


```js
async function record() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new MediaRecorder(stream);
  recorder.onerror = (event) => {
    console.error(`error recording stream: ${event.error.name}`);
  };
  recorder.start();
}

record();
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onerror |

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

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

関連情報
----

* MediaStream 収録 API の使用
MediaRecorder.mimeType
======================

**`mimeType`** は読み取り専用のプロパティで、 `MediaRecorder` オブジェクトを作成する際に指定された MIME メディア種別、または指定されていない場合は、ブラウザーによって選ばれたメディア種別を返すものです。これは、記録されたデータのすべてをディスクに書き込んだ結果のファイル形式です。

指定されたコンテナーで、すべてのコーデックが対応しているわけではないことに注意してください。指定されたメディアコンテナーで対応していないコーデックを使ってメディアを書き込んだ場合、そのファイルを再生しようとすると、確実に動作しないことがあります（まったく動作しないわけではありません）。ブラウザー間でのコンテナーとコーデックの対応については、メディア種別と形式ガイド を参照してください。

**メモ:** 「MIME タイプ」という用語は、公式には歴史的なものと見なされています。これらの文字列は、正式には**メディア種別**と呼ばれるようになりました。
 MDN Web Docs のコンテンツでは、この用語を互換的に使用しています。


### 値

記録されたメディアの形式を記述する MIME メディア種別（文字列）。この文字列は、メディアレコーダが使用するコーデックとコーデック構成の詳細を示す [`codecs` 引数] (/ja/docs/Web/Media/Formats/codecs\_parameter)を含んでいてもかまいません。

メディア種別の文字列は、インターネット番号割当機構（IANA）によって標準化されています。定義されているメディア種別の文字列の公式な一覧は、IANA サイトの記事 Media Types を参照してください。メディア種別について、またそれらがウェブコンテンツやウェブブラウザーでどのように使用されているかについてはメディア種別も参照してください。

例
-


```js
if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true, video: true };
  const chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const options = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: "video/mp4",
      };
      const mediaRecorder = new MediaRecorder(stream, options);
      m = mediaRecorder;

      m.mimeType; // would return 'video/mp4'
      // …
    })
    .catch((error) => {
      console.error(error.message);
    });
}
```


14 行目を以下に変更すると、 `MediaRecorder` は動画に AVC Constrained Baseline Profile Level 4、音声に AAC-LC (Low Complexity) を使用しようとします。これは、モバイルやその他リソースに制約のある状況での使用に有益なものです。


```js
mimeType: 'video/mp4; codecs="avc1.424028, mp4a.40.2"';
```


この設定がユーザーエージェントに受け入れられると仮定すると、後で `m.mimeType` が返す値は `video/mp4; codecs="avc1.424028, mp4a.40.2"` となるでしょう。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-mimetype |

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

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

関連情報
----

* MediaStream 収録 API の使用
* 一般的なメディア形式を入力する際の "codecs" 引数 (en-US)
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia()`
MediaRecorder: dataavailable イベント
=================================

`dataavailable` イベントは、`MediaRecorder` がメディアデータをアプリで使用するために引き渡すときに発生します。 データはデータを含む `Blob` オブジェクトで提供されます。 これは次の 4 つの状況で発生します。

* メディアストリームが終了すると、`ondataavailable` ハンドラーにまだ引き渡されていないメディアデータはすべて単一の `Blob` で渡されます。
* `MediaRecorder.stop()` を呼び出すと、収録を開始してから、または最後に `dataavailable` イベントが発生してからキャプチャされたすべてのメディアデータが `Blob` で引き渡されます。 この後、キャプチャは終了します。
* `MediaRecorder.requestData()` を呼び出すと、収録を開始してから、または最後に `dataavailable` イベントが発生してからキャプチャされたすべてのメディアデータが引き渡されます。 その後、新しい `Blob` が作成され、メディアのキャプチャがその blob に対して続行されます。
* `timeslice` プロパティをメディアキャプチャを開始した `MediaRecorder.start()` メソッドに渡した場合は、`timeslice` ミリ秒ごとに `dataavailable` イベントが発生します。 つまり、各 blob は特定の期間を持つことになります（最後の blob を除いてで、最後のイベント以降に残っているものは何でもということになるので、これはもっと短いかもしれません）。 そのため、メソッド呼び出しが次のようになっていれば — `recorder.start(1000);` — `dataavailable` イベントはメディアキャプチャの毎秒後に発生し、イベントハンドラーは一秒の長さのメディアデータの blob で毎秒呼ばれるでしょう。 `timeslice` を `MediaRecorder.stop()` および `MediaRecorder.requestData()` と共に使用して、複数の同じ長さの blob と他の短い blob を生成することもできます。

**メモ:** メディアデータを含む `Blob` は、`dataavailable` イベントの `data` プロパティで利用できます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
const chunks = [];

mediaRecorder.onstop = (e) => {
  console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。");

  const audio = document.createElement("audio");
  audio.controls = true;
  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
  console.log("レコーダー停止");
};

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-ondataavailable |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`
MediaRecorder.stop()
====================

**`MediaRecorder.stop()`** メソッド（MediaStream 収録 API の一部）は、メディアキャプチャを停止するために使用します。

`stop()` メソッドを呼び出すと、 UA は次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" の場合は、DOM の `InvalidState` エラーを発生させてこれらの手順を終了します。 `MediaRecorder.state` が "inactive" でない場合は、次の手順に進みます。
2. `MediaRecorder.state` を "inactive" に設定してメディアのキャプチャを停止します。
3. 収集されたデータの Blob を含む `dataavailable` イベントを発生させます。
4. `stop` イベントを発生させます。
構文
--


```js
stop()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### エラー

`MediaRecorder` オブジェクトの `MediaRecorder.state` が "inactive" のときに `stop()` メソッドが呼び出されると、`InvalidState` エラーが発生します — メディアキャプチャが既に停止している場合は停止しても意味がありません。

例
-


```js
stop.onclick = () => {
  mediaRecorder.stop();
  console.log("レコーダー停止、データ使用可能");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-stop |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`
MediaRecorder.requestData()
===========================

**`MediaRecorder.requestData()`** メソッド（MediaStream 収録 API の一部）は、 `dataavailable` イベントを発生させるために使用します。これは、このメソッドを呼び出した時点での、キャプチャされたメディアの `Blob` オブジェクトを含みます。その後、これを入手して操作することができます。

`requestData()` メソッドを呼び出すと、ブラウザーは次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" であった場合は、DOM の `InvalidState` エラーを発生させ、これらの手順を終了します。 `MediaRecorder.state` が "inactive" でなかった場合は、次の手順に進みます。
2. `dataavailable` イベントを発生させます。これは現在キャプチャされているデータの `Blob` を含む （Blob はイベントの `data` 属性で利用可能です）。
3. 新しい Blob を作成し、その後にキャプチャしたデータをそこに配置します。
構文
--


```js
requestData()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### エラー

`MediaRecorder` オブジェクトの `MediaRecorder.state` が `"recording"` でないときに `requestData()` メソッドが呼び出されると、`InvalidState` エラーが発生します — 記録が行われていないと、メディアをキャプチャできません。

例
-


```js
captureMedia.onclick = () => {
  mediaRecorder.requestData();
  // これまでのデータのスナップショットを
  // 使用可能にする ondataavailable が発生し、
  // それから、キャプチャは新しい Blob で続行されます
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-requestdata |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`
MediaRecorder.stream
====================

**`MediaRecorder.stream`** は読み取り専用プロパティで、 `MediaRecorder` を作成したときに `MediaRecorder()` コンストラクターに渡したストリームを返します。

値
-

最初に `MediaRecorder` を作成したとき `MediaRecorde()` コンストラクターに渡した `MediaStream` です。

例
-


```js
if (navigator.getUserMedia) {
  console.log("getUserMediaがサポートされています。");
  navigator.getUserMedia(
    // 制約 - このアプリに必要なのは音声のみ
    {
      audio: true,
    },

    // 成功コールバック
    (stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      const myStream = mediaRecorder.stream;
      console.log(myStream);
    },
  );
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-stream |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + ウェブオーディオ API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`
MediaRecorder: resume イベント
==========================

`resume` イベントは、`MediaRecorder.resume()` メソッドを呼び出した結果としてスローされます。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
pause.onclick = () => {
  if (MediaRecorder.state === "recording") {
    mediaRecorder.pause();
    // 記録を一時停止
  } else if (MediaRecorder.state === "paused") {
    mediaRecorder.resume();
    // 記録を再開
  }
};

mediaRecorder.onpause = () => {
  // 記録の一時停止に
  // 応答して何かをする
};

mediaRecorder.onresume = () => {
  // 記録の再開に
  // 応答して何かをする
};
```

インスタンスプロパティ
-----------

なし。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onresume |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream 収録のデモ、Sam Dutton 著。（英語）
* `Navigator.getUserMedia`
MediaRecorder()
===============

**`MediaRecorder()`** コンストラクターは、新しい `MediaRecorder` オブジェクトを作成します。これが指定された `MediaStream` を記録します。

オブジェクトは、オプションとして、特定のメディアコンテナー（ファイル形式）を使用して記録するように構成することができ、さらに、`codecs` 引数 (en-US) を指定して、使用するコーデックとコーデック構成を正確に指定することができます。

構文
--


```js
new MediaRecorder(stream)
new MediaRecorder(stream, options)
```

### 引数

`stream`

記録される `MediaStream`。 このソースメディアは、`navigator.mediaDevices.getUserMedia()` を使用して作成したストリーム、または `<audio>`、`<video>`、`<canvas>` 要素から取得できます。

`options` 省略可

以下のプロパティを含むことができる辞書オブジェクト。

`mimeType`

 生成されるメディアの形式を指定する MIME タイプです。コンテナー形式を指定することもできますし（ブラウザーは音声と映像のために好ましいコーデックを選択します）、 `codecs`引数 (en-US)や `profiles` 引数を使って、どのコーデックを使い、どう設定するのかという詳細情報を提供することもできます。
 アプリケーションは `mimeType` が user agent で対応しているかどうかを事前に調べることができます。そのためには `MediaRecorder.isTypeSupported()` を呼び出す必要があります。


`audioBitsPerSecond`

メディアの音声コンポーネントに選択したビットレート。

`videoBitsPerSecond`

メディアの映像コンポーネントに選択したビットレート。

`bitsPerSecond`

メディアの音声コンポーネントおよび映像コンポーネントに選択したビットレート。 上記の 2 つのプロパティの代わりにこれを指定することができます。 これを上記のプロパティのいずれかと一緒に指定している場合、これは指定していないものに使用されます。


**メモ:** 映像や音声にビット/秒の値を指定していない場合、映像が採用している既定値は 2.5Mbps ですが、音声の既定値はサンプルレートとチャネル数に応じて決まります。

**メモ:** 映像の解像度やフレームレートなどの設定は `getUserMedia()` を呼び出す際に制約として指定され、ここでの MediaRecorder API では指定されません。

### 例外

`NotSupportedError` `DOMException`

指定された MIME タイプにユーザーエージェントが対応していない場合に発生します。

例
-

この例では、音声のビットレートを 128 K ビット/秒に設定し、映像のビットレートを 2.5 M ビット/秒に設定して、指定したストリーム用のメディアレコーダーを作成する方法を示します。 記録したメディアデータは MP4 ラッパーに保存されます（従って、メディアデータのチャンクを集めてディスクに保存すると、それらは MP4 ファイルになります）。


```js
if (navigator.mediaDevices.getUserMedia) {
  const constraints = { audio: true, video: true };
  const chunks = [];

  const onSuccess = (stream) => {
    const options = {
      audioBitsPerSecond: 128000,
      videoBitsPerSecond: 2500000,
      mimeType: "video/mp4",
    };
    const mediaRecorder = new MediaRecorder(stream, options);
    m = mediaRecorder;

    // …
  };
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-mediarecorder |

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

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

関連情報
----

* MediaStream 収録 API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`
MediaRecorder.pause()
=====================

**`MediaRecorder.pause()`** メソッド（MediaStream 収録 API の一部）は、メディアストリームの記録を一時停止するために使用します。

`MediaRecorder` オブジェクトの `pause()` メソッドが呼び出されると、ブラウザーは次の手順を実行するタスクをキューに入れます。

1. `MediaRecorder.state` が "inactive" の場合は、DOM の `InvalidState` エラーを発生させてこれらの手順を終了します。 そうでない場合は、次の手順に進みます。
2. `MediaRecorder.state` を "paused" に設定します。
3. 現在の `Blob` へのデータ収集を停止しますが、後で記録を再開できるように使用可能な状態にしておきます。
4. `pause` イベントを発生させます。
構文
--


```js
pause()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

`MediaRecorder` は現在 `"inactive"` です。 アクティブでない場合は記録を一時停止できません。 一時停止している間に `pause()` を呼び出しても、何もしません。

例
-


```js
pause.onclick = () => {
  mediaRecorder.pause();
  console.log("recording paused");
};
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-pause |

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

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

関連情報
----

* MediaStream Recording API の使用
* ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（GitHub のソース）。（英語）
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著。（英語）
* `MediaDevices.getUserMedia`
MediaRecorder.isTypeSupported()
===============================

**`MediaRecorder.isTypeSupported()`** は静的メソッドで、指定された MIME タイプがこのユーザーエージェントが収録できるものであれば `true` となる論理値を返します。

構文
--


```js
isTypeSupported(mimeType)
```

### 引数

`mimeType`

チェックする MIME タイプ。

### 返値

この `MediaRecorder` の実装が指定された MIME タイプの `Blob` オブジェクトを収録できる場合は `true` になります。 収録および符号化プロセスをサポートするのに十分なリソースがない場合、収録が失敗する可能性はまだあります。 値が `false` の場合、ユーザーエージェントは指定された形式を収録することができません。

例
-


```js
const types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

for (const type of types) {
  console.log(
    `${type} に対応している? ${
 MediaRecorder.isTypeSupported(type) ? "たぶん!" : "いいえ :("
 }`,
  );
}
```

仕様書
---

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-istypesupported |

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

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

関連情報
----

* MediaStream 収録 API
* MediaStream 収録 API の使用
* ウェブ上のメディア種別や形式のガイド
* よくあるメディア種別の "codecs" 引数 (en-US)
* `MediaStreamTrack`
* `MediaStream`
* `MediaCapabilities` (en-US)