MediaRecorder
=============

**`MediaRecorder`** は MediaStream 収録 API のインターフェイスで、メディアを簡単に収録するための機能を提供します。 これは、`MediaRecorder()` コンストラクターを使用して作成します。

EventTarget

MediaRecorderコンストラクター
--------

`MediaRecorder()`

収録する `MediaStream` を指定して、新しい `MediaRecorder` オブジェクトを作成します。 コンテナの MIME タイプ（`"video/webm"` や `"video/mp4"` など）、音声トラックと動画トラックのビットレート、または単一の全体的なビットレートの設定などを行うためのオプションがあります。

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

`MediaRecorder.mimeType` 読取専用 

`MediaRecorder` オブジェクトの作成時にその収録コンテナとして選択した MIME タイプを返します。

`MediaRecorder.state` 読取専用 

`MediaRecorder` オブジェクトの現在の状態（非活動 (`inactive`)、収録中 (`recording`)、一時停止中 (`paused`)）を返します。

`MediaRecorder.stream` 読取専用 

`MediaRecorder` を作成したときにコンストラクターに渡したストリームを返します。

`MediaRecorder.videoBitsPerSecond` 読取専用 

使用中の動画エンコードビットレートを返します。 これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。

`MediaRecorder.audioBitsPerSecond` 読取専用 

使用中の音声エンコードビットレートを返します。 これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。

静的メソッド
------

`MediaRecorder.isTypeSupported()`

静的メソッドで、指定された MIME メディア種別が現在のユーザーエージェントで対応しているかどうかを示す `true` または `false` 値を返します。

インスタンスメソッド
----------

`MediaRecorder.pause()`

メディアの収録を一時停止します。

`MediaRecorder.requestData()`

これまでに受信した保存データを含む `Blob` を要求します（または最後に `requestData()` が呼び出されてから受信した）。 このメソッドを呼び出した後、収録は続行されますが、新しい `Blob` に格納されます。

`MediaRecorder.resume()`

一時停止したメディアの収録を再開します。

`MediaRecorder.start()`

メディアの収録を開始します。 このメソッドには、オプションで、ミリ秒単位の値を指定して `timeslice` 引数を渡すことができます。 これが指定されている場合、メディアは単一の大きなチャンクにメディアを収録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。

`MediaRecorder.stop()`

収録を停止します。 この時点で、保存したデータの最後の `Blob` を含む `dataavailable` イベントが発生します。 これ以上収録は行われません。

イベント
----

これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかしてください。

`dataavailable`

`timeslice` のミリ秒単位のメディアが収録されるたびに（または `timeslice` が指定されていない場合はメディア全体が収録されると）定期的に起動されます。このイベントは `BlobEvent` 型であり、収録されたメディアを `data` プロパティに保持しています。

`error`

録画を停止させる致命的なエラーがあったときに発行されます。このイベントは `MediaRecorderErrorEvent` インターフェイスに基づいており、その `error` プロパティには、実際に発生したエラーを説明する `DOMException` が含まれています。

`pause`

メディアの収録が一時停止したときに発生します。

`resume`

メディアの収録が一時停止後に再開したときに発生します。

`start`

メディアの収録を開始したときに発生します。

`stop`

`MediaStream` が終了したか、または `MediaRecorder.stop()` メソッドが呼び出された場合のいずれかでメディアの収録が終了したときに発生します。

`warning` 
非推奨

メディアの収録に致命的でないエラーが発生したとき、または `MediaRecorder.onwarning()` (en-US) メソッドが呼び出された後に発行されます。

例
-


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

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

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      visualize(stream);

      record.onclick = () => {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        console.log("recorder started");
        record.style.background = "red";
        record.style.color = "black";
      };

      stop.onclick = () => {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = (e) => {
        console.log("data available after MediaRecorder.stop() called.");

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        soundClips.appendChild(clipContainer);

        audio.controls = true;
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        const audioURL = URL.createObjectURL(blob);
        audio.src = audioURL;
        console.log("recorder stopped");

        deleteButton.onclick = (e) => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        };
      };

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}
```


**メモ:** このコードサンプルは、ウェブディクタフォン (Web Dictaphone) のデモから着想を得たものです。 簡潔にするために一部の行は省略されています。 完全なコードについてはソースを参照してください。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # mediarecorder-api |

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

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 著。（英語）
* `MediaDevices.getUserMedia`
* OpenLang: MediaDevices と MediaStream 収録 API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（GitHub のソース）（英語）