diff options
Diffstat (limited to 'files/ja/web/api/mediarecorder')
18 files changed, 1685 insertions, 0 deletions
diff --git a/files/ja/web/api/mediarecorder/error_event/index.html b/files/ja/web/api/mediarecorder/error_event/index.html new file mode 100644 index 0000000000..84e0d31fb9 --- /dev/null +++ b/files/ja/web/api/mediarecorder/error_event/index.html @@ -0,0 +1,88 @@ +--- +title: 'MediaRecorder: error イベント' +slug: Web/API/MediaRecorder/error_event +tags: + - Event +translation_of: Web/API/MediaRecorder/error_event +--- +<div>{{APIRef}}</div> + +<p>{{domxref("MediaRecorder")}} インターフェイスの <code>error</code> イベントは、エラーが発生したときに発生します。 例えば、記録が許可されていない、またはサポートされていないコーデックを使用して試みられたなどです。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブル</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MediaRecorderErrorEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td><code><a href="/ja/docs/Web/API/MediaRecorder/onerror">onerror</a></code></td> + </tr> + </tbody> +</table> + +<p>考えられるすべてのエラーの詳細については、イベントハンドラプロパティ <code><a href="/ja/docs/Web/API/MediaRecorder/onerror">onerror</a></code> のドキュメントを参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を使って <code>error</code> イベントを監視します。</p> + +<pre class="brush: 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();</pre> + +<p>上と同じですが、<code>onerror</code> イベントハンドラプロパティを使用します。</p> + +<pre class="brush: 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();</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('MediaStream Recording', '#errorevent-section')}}</td> + <td>{{Spec2('MediaStream Recording')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.error_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> +</ul> diff --git a/files/ja/web/api/mediarecorder/index.html b/files/ja/web/api/mediarecorder/index.html new file mode 100644 index 0000000000..4dd6793def --- /dev/null +++ b/files/ja/web/api/mediarecorder/index.html @@ -0,0 +1,200 @@ +--- +title: MediaRecorder +slug: Web/API/MediaRecorder +tags: + - API + - Audio + - Interface + - Media + - Media Capture + - Media Capture and Streams + - Media Recorder API + - MediaRecorder + - Reference + - Video +translation_of: Web/API/MediaRecorder +--- +<div>{{APIRef("Media Recorder API")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の <strong><code>MediaRecorder</code></strong> インターフェイスは、メディアを簡単に記録するための機能を提供します。 これは、{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} コンストラクタを使用して作成します。</span></p> + +<h2 id="Constructor" name="Constructor">コンストラクタ</h2> + +<dl> + <dt>{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}</dt> + <dd>記録する {{domxref("MediaStream")}} を指定して、新しい <code>MediaRecorder</code> オブジェクトを作成します。 コンテナの MIME タイプ（ <code>"video/webm"</code> や <code>"video/mp4"</code> など）、音声トラックと動画トラックのビットレート、または単一の全体的なビットレートの設定などを行うためのオプションがあります。</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt> + <dd><code>MediaRecorder</code> オブジェクトの作成時にその記録コンテナとして選択した MIME タイプを返します。</dd> + <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt> + <dd><code>MediaRecorder</code> オブジェクトの現在の状態（<code>inactive</code>（非活動）、<code>recording</code>（記録中）、<code>paused</code>（一時停止中））を返します。</dd> + <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt> + <dd><code>MediaRecorder</code> を作成したときにコンストラクタに渡したストリームを返します。</dd> + <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt> + <dd>入力 {{domxref("MediaStreamTrack")}} がミュートされたときに <code>MediaRecorder</code> インスタンスが入力を記録するかどうかを示します。 この属性が <code>false</code> の場合、<code>MediaRecorder</code> は音声には無音を、動画には黒のフレームを記録します。 デフォルトは <code>false</code> です。</dd> + <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt> + <dd>使用中の動画エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります（指定した場合）。</dd> + <dt>{{domxref("MediaRecorder.audioBitsPerSecond")}} {{readonlyInline}}</dt> + <dd>使用中の音声エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります（指定した場合）。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt> + <dd> 与えられた MIME タイプを現在のユーザーエージェントがサポートしているかどうかを示す {{jsxref("Boolean")}} 値を返します。</dd> + <dt>{{domxref("MediaRecorder.pause()")}}</dt> + <dd>メディアの記録を一時停止します。</dd> + <dt>{{domxref("MediaRecorder.requestData()")}}</dt> + <dd> これまでに受信した保存データを含む {{domxref("Blob")}} を要求します（または最後に <code>requestData()</code> が呼び出されてから受信した）。 このメソッドを呼び出した後、記録は続行されますが、新しい <code>Blob</code> に格納されます。</dd> + <dt>{{domxref("MediaRecorder.resume()")}}</dt> + <dd>一時停止したメディアの記録を再開します。</dd> + <dt>{{domxref("MediaRecorder.start()")}}</dt> + <dd>メディアの記録を開始します。 このメソッドには、オプションで、ミリ秒単位の値を指定して <code>timeslice</code> 引数を渡すことができます。 これが指定されている場合、メディアは単一の大きなチャンクにメディアを記録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。</dd> + <dt>{{domxref("MediaRecorder.stop()")}}</dt> + <dd>記録を停止します。 この時点で、保存したデータの最後の <code>Blob</code> を含む {{event("dataavailable")}} イベントが発生します。 これ以上記録は行われません。</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">イベントハンドラ</h2> + +<dl> + <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt> + <dd><code>timeslice</code> のミリ秒単位のメディアが記録されるたびに（または <code>timeslice</code> が指定されていない場合はメディア全体が記録されると）定期的にトリガされる {{event("dataavailable")}} イベントを処理するために呼び出されます。 {{domxref("BlobEvent")}} 型のイベントには、{{domxref("BlobEvent.data", "data")}} プロパティに記録済みメディアが含まれています。 その後、このイベントハンドラを使用して、その記録済みメディアのデータを収集して操作することができます。</dd> + <dt>{{domxref("MediaRecorder.onerror")}}</dt> + <dd>メディアの記録で発生したエラーの報告など、{{event("error")}} イベントを処理するために呼び出される {{domxref("EventHandler")}} です。 これらは記録を停止する致命的なエラーです。 受信したイベントは {{domxref("MediaRecorderErrorEvent")}} インターフェイスに基づいていて、その {{domxref("MediaRecorderErrorEvent.error", "error")}} プロパティには、発生した実際のエラーを説明する {{domxref("DOMException")}} が含まれています。</dd> + <dt>{{domxref("MediaRecorder.onpause")}}</dt> + <dd>メディアの記録が一時停止したときに発生する {{event("pause")}} イベントを処理するために呼び出される {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("MediaRecorder.onresume")}}</dt> + <dd>メディアの記録が一時停止後に再開したときに発生する {{event("resume")}} イベントを処理するために呼び出される {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("MediaRecorder.onstart")}}</dt> + <dd>メディアの記録を開始したときに発生する {{event("start")}} イベントを処理するために呼び出される {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("MediaRecorder.onstop")}}</dt> + <dd>{{domxref("MediaStream")}} の終了時、または {{domxref("MediaRecorder.stop()")}} メソッドの呼び出し後のいずれかに、メディアの記録が終了したときに発生する {{event("stop")}} イベントを処理するために呼び出される {{domxref("EventHandler")}} です。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p><code>addEventListener()</code> を使用するか、このインタフェースの <code>on<em>eventname</em></code> プロパティにイベントリスナを割り当てることによって、これらのイベントを監視します。</p> + +<dl> + <dt><code><a href="/ja/docs/Web/API/MediaRecorder/error_event">error</a></code></dt> + <dd>エラーが発生したときに発生します。 例えば、記録が許可されていないか、サポートされていないコーデックを使用して試行したためです。<br> + <code><a href="/ja/docs/Web/API/MediaRecorder/onerror">onerror</a></code> プロパティからも入手できます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">if (navigator.mediaDevices) { + console.log('getUserMedia supported.'); + + var constraints = { audio: true }; + var chunks = []; + + navigator.mediaDevices.getUserMedia(constraints) + .then(function(stream) { + + var mediaRecorder = new MediaRecorder(stream); + + visualize(stream); + + record.onclick = function() { + mediaRecorder.start(); + console.log(mediaRecorder.state); + console.log("recorder started"); + record.style.background = "red"; + record.style.color = "black"; + } + + stop.onclick = function() { + mediaRecorder.stop(); + console.log(mediaRecorder.state); + console.log("recorder stopped"); + record.style.background = ""; + record.style.color = ""; + } + + mediaRecorder.onstop = function(e) { + console.log("data available after MediaRecorder.stop() called."); + + var clipName = prompt('Enter a name for your sound clip'); + + var clipContainer = document.createElement('article'); + var clipLabel = document.createElement('p'); + var audio = document.createElement('audio'); + var deleteButton = document.createElement('button'); + + clipContainer.classList.add('clip'); + audio.setAttribute('controls', ''); + deleteButton.innerHTML = "Delete"; + clipLabel.innerHTML = clipName; + + clipContainer.appendChild(audio); + clipContainer.appendChild(clipLabel); + clipContainer.appendChild(deleteButton); + soundClips.appendChild(clipContainer); + + audio.controls = true; + var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); + chunks = []; + var audioURL = URL.createObjectURL(blob); + audio.src = audioURL; + console.log("recorder stopped"); + + deleteButton.onclick = function(e) { + evtTgt = e.target; + evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode); + } + } + + mediaRecorder.ondataavailable = function(e) { + chunks.push(e.data); + } + }) + .catch(function(err) { + console.log('The following error occurred: ' + err); + }) +} + +</pre> + +<div class="note"> +<p>このコードサンプルは、ウェブディクタフォン（Web Dictaphone）のデモから着想を得たものです。 簡潔にするために一部の行は省略されています。 完全なコードについては<a href="https://github.com/mdn/web-dictaphone/">ソースを参照</a>してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="https://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">メディア要素の記録</a></li> + <li><a href="https://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}</li> + <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: MediaDevices と MediaStream Recording API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（<a href="https://github.com/chrisjohndigital/OpenLang">GitHub のソース</a>）（英語）</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/istypesupported/index.html b/files/ja/web/api/mediarecorder/istypesupported/index.html new file mode 100644 index 0000000000..8a5bf1375b --- /dev/null +++ b/files/ja/web/api/mediarecorder/istypesupported/index.html @@ -0,0 +1,81 @@ +--- +title: MediaRecorder.isTypeSupported +slug: Web/API/MediaRecorder/isTypeSupported +tags: + - API + - Audio + - Media + - Media Capture + - Media Recorder API + - MediaRecorder + - Method + - Reference + - Video + - canRecordMimeType +translation_of: Web/API/MediaRecorder/isTypeSupported +--- +<p>{{APIRef("MediaStream Recording")}}</p> + +<p><span class="seoSummary"><strong><code>MediaRecorder.isTypeSupported()</code></strong> メソッドは、指定されたMIMEタイプがユーザーエージェントが記録できるものであれば <code>true</code> となる <code>Boolean</code> を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var canRecord = <em>MediaRecorder</em>.<strong><code>isTypeSupported</code></strong>(<em>mimeType</em>)</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>mimeType</code></dt> + <dd>チェックする MIME タイプ。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("MediaRecorder")}} の実装が指定された MIME タイプの {{domxref("Blob")}} オブジェクトを記録できる場合は <code>true</code>。 記録および符号化プロセスをサポートするのに十分なリソースがない場合、記録はまだ失敗する可能性があります。 値が <code>false</code> の場合、ユーザーエージェントは指定されたフォーマットを記録することができません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var types = ["video/webm", + "audio/webm", + "video/webm\;codecs=vp8", + "video/webm\;codecs=daala", + "video/webm\;codecs=h264", + "audio/webm\;codecs=opus", + "video/mpeg"]; + +for (var i in types) { + console.log( types[i] + " をサポートしている？ " + (MediaRecorder.isTypeSupported(types[i]) ? "たぶん！" : "いいえ :(")); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('MediaStream Recording', '#dom-mediarecorder-istypesupported', 'isTypeSupported()')}}</td> + <td>{{Spec2('MediaStream Recording')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.isTypeSupported")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Service worker の使用</a></li> + <li>{{domxref("MediaStreamTrack")}}</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("MediaCapabilities")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/mediarecorder/index.html b/files/ja/web/api/mediarecorder/mediarecorder/index.html new file mode 100644 index 0000000000..fd22024ce7 --- /dev/null +++ b/files/ja/web/api/mediarecorder/mediarecorder/index.html @@ -0,0 +1,100 @@ +--- +title: MediaRecorder() +slug: Web/API/MediaRecorder/MediaRecorder +tags: + - API + - Audio + - Constructor + - Media + - Media Capture + - Media Recorder API + - MediaRecorder + - Reference + - Video +translation_of: Web/API/MediaRecorder/MediaRecorder +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder()</code></strong> コンストラクタは、指定された {{domxref("MediaStream")}} を記録する新しい {{domxref("MediaRecorder")}} オブジェクトを作成します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>mediaRecorder</em> = new MediaRecorder(<em>stream</em>[, <em>options</em>]);</pre> + +<h3 id="Parameters" name="Parameters">パラメータ</h3> + +<dl> + <dt><code><strong>stream</strong></code></dt> + <dd>記録される {{domxref("MediaStream")}}。 このソースメディアは、{{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} を使用して作成したストリーム、または {{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("canvas")}} 要素から取得できます。</dd> + <dt> + <p><strong><code>options</code> </strong>{{optional_inline}}</p> + </dt> + <dd> + <p>以下のプロパティを含むことができる辞書オブジェクト。</p> + + <ul> + <li><code>mimeType</code>: 新しい <code>MediaRecorder</code> の記録コンテナとして使用する MIME タイプ。アプリは、{{domxref("MediaRecorder.isTypeSupported()")}} を呼び出すことによって、この <code>mimeType</code> がユーザーエージェントによってサポートされているかどうかを事前に確認できます。</li> + <li><code>audioBitsPerSecond</code>: メディアの音声コンポーネントに選択したビットレート。</li> + <li><code>videoBitsPerSecond</code>: メディアの動画コンポーネントに選択したビットレート。</li> + <li><code>bitsPerSecond</code>: メディアの音声コンポーネントおよび動画コンポーネントに選択したビットレート。 上記の2つのプロパティの代わりにこれを指定できます。 これを上記のプロパティのいずれかと一緒に指定している場合、これは指定していないものに使用されます。</li> + </ul> + + <div class="note"> + <p>動画や音声にビット/秒の値を指定していない場合、動画が採用しているデフォルトは 2.5Mbps ですが、音声のデフォルトはサンプルレートとチャネル数に応じてアダプティブです。</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、音声のビットレートを 128 Kビット/秒に設定し、動画のビットレートを 2.5 Mビット/秒に設定して、指定したストリーム用のメディアレコーダーを作成する方法を示します。 記録したメディアデータは MP4 ラッパーに保存されます（従って、メディアデータのチャンクを集めてディスクに保存すると、それらは MP4 ファイルになります）。</p> + +<pre class="brush: js">... +<code class="language-html"> + +if (navigator.mediaDevices.getUserMedia) { + var constraints = { audio: true, video: true }; + var chunks = []; + + </code>var onSuccess = function(stream) { + var options = { + audioBitsPerSecond : 128000, + videoBitsPerSecond : 2500000, + mimeType : 'video/mp4' + } + var mediaRecorder = new MediaRecorder(stream,options); + m = mediaRecorder; + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.MediaRecorder")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/mimetype/index.html b/files/ja/web/api/mediarecorder/mimetype/index.html new file mode 100644 index 0000000000..b049bd6058 --- /dev/null +++ b/files/ja/web/api/mediarecorder/mimetype/index.html @@ -0,0 +1,87 @@ +--- +title: MediaRecorder.mimeType +slug: Web/API/MediaRecorder/mimeType +tags: + - API + - Audio + - Media + - MediaRecorder + - MediaRecorder API + - MediaStream Recording + - Property + - Reference + - Video + - mimeType +translation_of: Web/API/MediaRecorder/mimeType +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder.mimeType</code></strong> 読み取り専用プロパティは、作成時に記録コンテナとして使用する MIME タイプを返します。 これは、記録したすべてのデータをディスクに書き込むことによって生じるファイルのファイル形式です。 もちろん、個々のトラックに関連付けられているファイル形式とコーデックはまったく異なるものであることに注意してください。 WebM ビデオでうまく機能するトラックを MP4 ラッパーに書き込んでも、どこにでも再生できるファイルにならない可能性があります。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>mimeType</em> = <em>MediaRecorder</em>.mimeType</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>記録したメディアのコンテナ形式として使用する MIME タイプ（{{domxref("DOMString")}} 形式）。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + +if (navigator.mediaDevices) { + console.log('getUserMedia supported.'); + + var constraints = { audio: true, video: true }; + var chunks = []; + + navigator.mediaDevices.getUserMedia(constraints) + .then(function(stream) { + var options = { + audioBitsPerSecond : 128000, + videoBitsPerSecond : 2500000, + mimeType : 'video/mp4' + } + var mediaRecorder = new MediaRecorder(stream,options); + m = mediaRecorder; + + m.mimeType; // would return 'video/mp4' + ... + }) + .catch(function(error) { + console.log(error.message); + }); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-mimeType", "MediaRecorder.mimeType")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.mimeType")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/ondataavailable/index.html b/files/ja/web/api/mediarecorder/ondataavailable/index.html new file mode 100644 index 0000000000..5d3dbcaf15 --- /dev/null +++ b/files/ja/web/api/mediarecorder/ondataavailable/index.html @@ -0,0 +1,93 @@ +--- +title: MediaRecorder.ondataavailable +slug: Web/API/MediaRecorder/ondataavailable +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - MediaStream Recording API + - Property + - Reference + - Video + - ondataavailable +translation_of: Web/API/MediaRecorder/ondataavailable +--- +<p>{{APIRef("MediaStream Recording")}}</p> + +<p><span class="seoSummary"><strong><code>MediaRecorder.ondataavailable</code></strong> イベントハンドラ（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は {{event("dataavailable")}} イベントを処理します。 これにより、{{domxref("Blob")}} データが使用可能になったことに応じてコードを実行できます。</span></p> + +<p><code>dataavailable</code> イベントは、<code>MediaRecorder</code> がメディアデータをアプリで使用するために引き渡すときに発生します。 データはデータを含む {{domxref("Blob")}} オブジェクトで提供されます。 これは次の4つの状況で発生します。</p> + +<ul> + <li>メディアストリームが終了すると、<code>ondataavailable</code> ハンドラにまだ引き渡されていないメディアデータはすべて単一の {{domxref("Blob")}} で渡されます。</li> + <li>{{domxref("MediaRecorder.stop()")}} を呼び出すと、記録を開始してから、または最後に <code>dataavailable</code> イベントが発生してからキャプチャされたすべてのメディアデータが {{domxref("Blob")}} で引き渡されます。 この後、キャプチャは終了します。</li> + <li>{{domxref("MediaRecorder.requestData()")}} を呼び出すと、記録を開始してから、または最後に <code>dataavailable</code> イベントが発生してからキャプチャされたすべてのメディアデータが引き渡されます。 その後、新しい <code>Blob</code> が作成され、メディアのキャプチャがその blob に対して続行されます。</li> + <li>メディアキャプチャを開始した {{domxref("MediaRecorder.start()")}} メソッドに <code>timeslice</code> プロパティを渡した場合は、<code>timeslice</code> ミリ秒ごとに <code>dataavailable</code> イベントが発生します。 つまり、各 blob は特定の期間を持つことになります（最後の blob を除いてで、最後のイベント以降に残っているものは何でもということになるので、これはもっと短いかもしれません）。 そのため、メソッド呼び出しが次のようになっていれば — <code>recorder.start(1000);</code> — <code>dataavailable</code> イベントはメディアキャプチャの毎秒後に発生し、イベントハンドラは一秒の長さのメディアデータの blob で毎秒呼ばれるでしょう。 {{domxref("MediaRecorder.stop()")}} および {{domxref("MediaRecorder.requestData()")}} と共に <code>timeslice</code> を使用して、複数の同じ長さの blob と他の短い blob を生成することもできます。</li> +</ul> + +<div class="note"> +<p>メディアデータを含む {{domxref("Blob")}} は、{{event("dataavailable")}} イベントの <code>data</code> プロパティで利用できます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-IDBRequest"><span class="idlAttribute"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlAttribute"><em>MediaRecorder</em>.ondataavailable = function(event) { ... } +<em>MediaRecorder</em>.addEventListener('dataavailable', function(event) { ... })</span></span></span></span> +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js" id="line1"><span>... + var chunks = []; + + mediaRecorder.onstop = function(e) { + console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。"); + + var audio = document.createElement('audio'); + audio.controls = true; + var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); + var audioURL = window.URL.createObjectURL(blob); + audio.src = audioURL; + console.log("レコーダー停止"); + } + + mediaRecorder.ondataavailable = function(e) { + chunks.push(e.data); + } + +...</span> +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.ondataavailable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API">Using the MediaStream Recording API</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/onerror/index.html b/files/ja/web/api/mediarecorder/onerror/index.html new file mode 100644 index 0000000000..204f327a23 --- /dev/null +++ b/files/ja/web/api/mediarecorder/onerror/index.html @@ -0,0 +1,119 @@ +--- +title: MediaRecorder.onerror +slug: Web/API/MediaRecorder/onerror +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onerror +translation_of: Web/API/MediaRecorder/onerror +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary">{{domxref("MediaRecorder")}} インターフェイスの <strong><code>onerror</code></strong> イベントハンドラは、エラーが発生したときに <a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> によって呼び出されます。 メディアレコーダーの作成中または使用中に発生したエラーを処理するためのイベントハンドラを提供できます。</span> エラーオブジェクトは {{domxref("MediaRecorderErrorEvent")}} 型で、その {{domxref("MediaRecorderErrorEvent.error", "error")}} プロパティには発生したエラーを説明する {{domxref("DOMException")}} オブジェクトが含まれています。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>MediaRecorder</em>.onerror = <em>errorHandlerFunction</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>レコーダーの有効期間中にエラーが発生したときに必ず呼び出される関数。 発生する可能性があるその他の一般的なエラーに加えて、MediaStream Recording API を使用すると、以下のエラーが特に発生する可能性があります。 どれが発生したかを判断するには、{{domxref("DOMException.name", "MediaRecorderErrorEvent.error.name")}} の値を確認してください。</p> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>非アクティブなレコーダーの停止や一時停止、アクティブなレコーダーの起動や再開、それ以外の場合は、間違った状態で <code>MediaRecorder</code> を操作しようとしました。 この例外は、削除されたまたは取り除かれたソースに対して要求が行われたときにも発生する可能性があります。</dd> + <dt><code>SecurityError</code></dt> + <dd>{{domxref("MediaStream")}} は記録を禁止するように設定されています。 これは、例えば、ユーザーが入力デバイスを使用するパーミッションを拒否したときに {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得されたソースの場合などです。 これは、ソースストリームの {{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}} 制約により、ストリーム内の {{domxref("MediaStreamTrack")}} が {{domxref("MediaStreamTrack.isolated", "isolated")}} としてマークされている場合にも発生します。</dd> + <dt><code>NotSupportedError</code></dt> + <dd> ユーザーのデバイスがサポートしていない MIME タイプを使用して <code>MediaRecorder</code> をインスタンス化しようとしました。 1つ以上の要求されたコンテナ、コーデック、またはプロファイル、その他の情報が無効である可能性があります。</dd> + <dt><code>UnknownError</code></dt> + <dd>分類できない、セキュリティに関連しないエラーが発生しました。 記録が停止し、<code>MediaRecorder</code> の {{domxref("MediaRecorder.state", "state")}} が非アクティブになり、最後の {{event("dataavailable")}} イベントが残りの受信データと共に <code>MediaRecorder</code> に送られ、最後に {{event("stop")}} イベントが送られます。</dd> +</dl> + +<p>これらのエラーは、<code>MediaRecorder</code> メソッドの呼び出しが原因で直接発生した場合も、録音プロセス中に発生した問題が原因で間接的に発生した場合もあります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、新しい {{domxref("MediaRecorder")}} インスタンスを作成し、{{Glossary("user agent", "ユーザーエージェント")}}のデフォルトのメディア形式を使用して録画を開始します。 <code>MediaRecorder</code> または、エラーの名前（セットアッププロセス中に例外がスローされた場合）のいずれかを返します。</p> + +<div class="codecopy codecopy-lg"> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">recordStream</span><span class="punctuation token">(</span>stream<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> recorder <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> bufferList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + + <span class="keyword token">try</span> <span class="punctuation token">{</span> + recorder <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MediaRecorder</span><span class="punctuation token">(</span>stream<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">catch</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> + return err.name; /* エラー名を返す */ + <span class="punctuation token">}</span> + + recorder<span class="punctuation token">.</span>ondataavailable <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + bufferList<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>event<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + recorder<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> error <span class="operator token">=</span> event<span class="punctuation token">.</span>error<span class="punctuation token">; + + switch(error.name) { + case InvalidStateError: + showNotification("今すぐ動画を録画することはできません。 " + + "あとでもう一度試してみてください。"); + break; + case SecurityError: + showNotification("セキュリティ上の制限により、" + + "指定されたソースを録音する" + + "ことはできません。"); + break; + default: + showNotification("動画を録画しようとしたときに" + + "問題が発生しました。"); + break; + }</span> + <span class="punctuation token">}</span><span class="punctuation token">; + + /* ここは、ディスクへのバッファの書き込みを定期的に処理する + ワーカーを作成するのに適した場所です。 */</span> + + recorder<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">/* バッファあたり 100ms のタイムスライス */</span> + <span class="keyword token">return</span> recorder<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onerror", "MediaRecorder.onerror")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.onerror")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia()")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/onpause/index.html b/files/ja/web/api/mediarecorder/onpause/index.html new file mode 100644 index 0000000000..b045532e43 --- /dev/null +++ b/files/ja/web/api/mediarecorder/onpause/index.html @@ -0,0 +1,88 @@ +--- +title: MediaRecorder.onpause +slug: Web/API/MediaRecorder/onpause +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onpause +translation_of: Web/API/MediaRecorder/onpause +--- +<p>{{APIRef("Media Recorder API")}}</p> + +<p><span class="seoSummary"><strong><code>MediaRecorder.onpause</code></strong> イベントハンドラ（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は <code>pause</code> イベントを処理します。 これにより、一時停止中のメディアの記録に応答してコードを実行できます。</span></p> + +<p><code>pause</code> イベントは、{{domxref("MediaRecorder.pause()")}} メソッドを呼び出した結果としてスローされます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">MediaRecorder.onpause = function(event) { ... } +MediaRecorder.addEventListener('pause', function(event) { ... }) +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + pause.onclick = function() { + if(mediaRecorder.state === "recording") { + mediaRecorder.pause(); + // 記録を一時停止 + } else if(mediaRecorder.state === "paused") { + mediaRecorder.resume(); + // 記録を再開 + } + } + + mediaRecorder.onpause = function() { + // 記録の一時停止に + // 応答して何かをする + } + + mediaRecorder.onresume = function() { + // 記録の再開に + // 応答して何かをする + } + +...</pre> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p>無し。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onpause", "MediaRecorder.onpause")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.onpause")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/onresume/index.html b/files/ja/web/api/mediarecorder/onresume/index.html new file mode 100644 index 0000000000..c22cffee41 --- /dev/null +++ b/files/ja/web/api/mediarecorder/onresume/index.html @@ -0,0 +1,88 @@ +--- +title: MediaRecorder.onresume +slug: Web/API/MediaRecorder/onresume +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onresume +translation_of: Web/API/MediaRecorder/onresume +--- +<p>{{APIRef("Media Recorder API")}}</p> + +<p><strong><code>MediaRecorder.onresume</code></strong> イベントハンドラ（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は <code>resume</code> イベントを処理します。 これにより、一時停止後にメディアの記録が再開されたことに応答してコードを実行できます。</p> + +<p><code>resume</code> イベントは、{{domxref("MediaRecorder.resume()")}} メソッドを呼び出した結果としてスローされます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">MediaRecorder.onresume = function(event) { ... } +MediaRecorder.addEventListener('resume', function(event) { ... }) +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + pause.onclick = function() { + if(MediaRecorder.state === "recording") { + mediaRecorder.pause(); + // 記録を一時停止 + } else if(MediaRecorder.state === "paused") { + mediaRecorder.resume(); + // 記録を再開 + } + } + + mediaRecorder.onpause = function() { + // 記録の一時停止に + // 応答して何かをする + } + + mediaRecorder.onresume = function() { + // 記録の再開に + // 応答して何かをする + } + +...</pre> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p>無し。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onresume", "MediaRecorder.onresume")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.onresume")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/onstart/index.html b/files/ja/web/api/mediarecorder/onstart/index.html new file mode 100644 index 0000000000..0d452d4473 --- /dev/null +++ b/files/ja/web/api/mediarecorder/onstart/index.html @@ -0,0 +1,77 @@ +--- +title: MediaRecorder.onstart +slug: Web/API/MediaRecorder/onstart +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onstart +translation_of: Web/API/MediaRecorder/onstart +--- +<div>{{APIRef("Media Recorder API")}}</div> + +<p><strong><code>MediaRecorder.onstartevent</code></strong> ハンドラ（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は <code>start</code> イベントを処理します。 これにより、<code>MediaRecorder</code> によってメディアの記録が開始されたことに応答してコードを実行できるようにします。</p> + +<p><code>start</code> イベントは、{{domxref("MediaRecorder.start()")}} メソッドを呼び出した結果としてスローされます。 この時点で、データは {{domxref("Blob")}} に集められ始めます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">MediaRecorder.onstart = function(event) { ... } +MediaRecorder.addEventListener('start', function(event) { ... })</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + record.onclick = function() { + mediaRecorder.start(); + console.log("レコーダーが起動しました"); + } + + mediaRecorder.onstart = function() { + // 記録の開始に + // 応答して何かをする + } + +...</pre> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p>無し。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onstart", "MediaRecorder.onstart")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.onstart")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/onstop/index.html b/files/ja/web/api/mediarecorder/onstop/index.html new file mode 100644 index 0000000000..d639d9441b --- /dev/null +++ b/files/ja/web/api/mediarecorder/onstop/index.html @@ -0,0 +1,78 @@ +--- +title: MediaRecorder.onstop +slug: Web/API/MediaRecorder/onstop +tags: + - API + - Audio + - Media Capture + - Media Recorder API + - MediaRecorder + - Property + - Reference + - Video + - onstop +translation_of: Web/API/MediaRecorder/onstop +--- +<div>{{APIRef("Media Recorder API")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder.onstop</code></strong> イベントハンドラ（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は、<code>stop</code> イベントを処理します。 これにより、<code>MediaRecorder</code> を介してメディアの記録が停止されたことに応答してコードを実行できます。</span></p> + +<p><code>stop</code> イベントは、{{domxref("MediaRecorder.stop()")}} メソッドを呼び出した結果として、またはキャプチャしているメディアストリームが終了したときにスローされます。 いずれの場合も、<code>stop</code> イベントの前に <code>dataavailable</code> イベントがあり、それまでにキャプチャされた {{domxref("Blob")}} をアプリで使用できるようにします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">MediaRecorder.onstop = function(event) { ... } +MediaRecorder.addEventListener('stop', function(event) { ... })</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js"><span>... + + mediaRecorder.onstop = function(e) { + console.log("</span>MediaRecorder.stop() 呼び出し後に利用可能なデータ。<span>"); + + var audio = document.createElement('audio'); + audio.controls = true; + var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); + var audioURL = window.URL.createObjectURL(blob); + audio.src = audioURL; + console.log("</span>レコーダー停止<span>"); + } + + mediaRecorder.ondataavailable = function(e) { + chunks.push(e.data); + }</span> + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-onstop", "MediaRecorder.onstop")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.onstop")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/pause/index.html b/files/ja/web/api/mediarecorder/pause/index.html new file mode 100644 index 0000000000..259500b1ed --- /dev/null +++ b/files/ja/web/api/mediarecorder/pause/index.html @@ -0,0 +1,83 @@ +--- +title: MediaRecorder.pause() +slug: Web/API/MediaRecorder/pause +tags: + - API + - Media Capture + - Media Recorder API + - MediaRecorder + - Method + - Reference + - pause +translation_of: Web/API/MediaRecorder/pause +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder.pause()</code></strong> メソッド（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は、メディアストリームの記録を一時停止するために使用します。</span></p> + +<p><code>MediaRecorder</code> オブジェクトの <code>pause()</code> メソッドが呼び出されると、ブラウザーは次の手順を実行するタスクをキューに入れます。</p> + +<ol> + <li>{{domxref("MediaRecorder.state")}} が <code>"inactive"</code> の場合は、DOM の <code>InvalidState</code> エラーを発生させてこれらの手順を終了します。 そうでない場合は、次の手順に進みます。</li> + <li>{{domxref("MediaRecorder.state")}} を <code>"paused"</code> に設定します。</li> + <li>現在の {{domxref("Blob")}} へのデータ収集を停止しますが、後で記録を再開できるように使用可能な状態にしておきます。</li> + <li>{{event("pause")}} イベントを発生させます。</li> +</ol> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>MediaRecorder</em>.pause()</pre> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd><code>MediaRecorder</code> は現在 <code>"inactive"</code> です。 アクティブでない場合は記録を一時停止できません。 一時停止している間に <code>pause()</code> を呼び出しても、何もしません。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + pause.onclick = function() { + mediaRecorder.pause(); + console.log("記録を一時停止"); + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-pause-void", "MediaRecorder.pause()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.pause")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/requestdata/index.html b/files/ja/web/api/mediarecorder/requestdata/index.html new file mode 100644 index 0000000000..be388593ad --- /dev/null +++ b/files/ja/web/api/mediarecorder/requestdata/index.html @@ -0,0 +1,81 @@ +--- +title: MediaRecorder.requestData() +slug: Web/API/MediaRecorder/requestData +tags: + - API + - Audio + - Media + - Media Capture + - Media Recorder API + - MediaRecorder + - MediaStream Recording + - Method + - Reference + - Video + - requestData +translation_of: Web/API/MediaRecorder/requestData +--- +<p>{{APIRef("MediaStream Recording")}}</p> + +<p><span class="seoSummary"><strong><code>MediaRecorder.requestData()</code></strong> メソッド（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は、このメソッドを呼び出したときにあった、キャプチャされたメディアの {{domxref("Blob")}} オブジェクトを含む {{domxref("dataavailable")}} イベントを発生させるために使用します。</span> その後、これを入手して操作することができます。</p> + +<p><code>requestData()</code> メソッドを呼び出すと、ブラウザーは次の手順を実行するタスクをキューに入れます。</p> + +<ol> + <li>{{domxref("MediaRecorder.state")}} が <code>"recording"</code> でない場合は、DOM の <code>InvalidState</code> エラーを発生させてこれらの手順を終了します。 {{domxref("MediaRecorder.state")}} が <code>"recording"</code> の場合は、次の手順に進みます。</li> + <li>現在キャプチャされているデータの {{domxref("Blob")}} を含む {{event("dataavailable")}} イベントを発生させます（<code>Blob</code> はイベントの <code>data</code> 属性で利用可能です）。</li> + <li>新しい <code>Blob</code> を作成し、その後にキャプチャしたデータをそこに配置します。</li> +</ol> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">MediaRecorder.requestData()</pre> + +<h3 id="Errors" name="Errors">エラー</h3> + +<p><code>MediaRecorder</code> オブジェクトの {{domxref("MediaRecorder.state")}} が <code>"recording"</code> でないときに <code>requestData()</code> メソッドが呼び出されると、<code>InvalidState</code> エラーが発生します — 記録が行われていないと、メディアをキャプチャできません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + captureMedia.onclick = function() { + mediaRecorder.requestData(); + // これまでのデータのスナップショットを + // 使用可能にする ondataavailable が発生し、 + // それから、キャプチャは新しい Blob で続行されます + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-requestData-void", "MediaRecorder.requestData()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.requestData")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/resume/index.html b/files/ja/web/api/mediarecorder/resume/index.html new file mode 100644 index 0000000000..5532e62892 --- /dev/null +++ b/files/ja/web/api/mediarecorder/resume/index.html @@ -0,0 +1,81 @@ +--- +title: MediaRecorder.resume() +slug: Web/API/MediaRecorder/resume +tags: + - API + - Media Capture + - Media Recorder API + - MediaRecorder + - Method + - Reference + - resume +translation_of: Web/API/MediaRecorder/resume +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder.resume()</code></strong> メソッド（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は、以前に一時停止していたメディアの記録を再開するために使用します。</span></p> + +<p><code>resume()</code> メソッドを呼び出すと、ブラウザーは次の手順を実行するタスクをキューに入れます。</p> + +<ol> + <li>{{domxref("MediaRecorder.state")}} が <code>"inactive"</code> の場合は、DOM の <code>InvalidState</code> エラーを発生させてこれらの手順を終了します。 {{domxref("MediaRecorder.state")}} が <code>"inactive"</code> でない場合は、次の手順に進みます。</li> + <li>{{domxref("MediaRecorder.state")}} を <code>"recording"</code> に設定します。</li> + <li>現在の {{domxref("Blob")}} へのデータ収集を続けます。</li> + <li><code>resume</code> イベントを発生させます。</li> +</ol> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><span class="idlInterface"><span class="idlMethod"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType">MediaRecorder.resume()</span></span></span></span></span></span></span></span></span></span></span></pre> + +<h3 id="Errors" name="Errors">エラー</h3> + +<p><code>MediaRecorder</code> オブジェクトの {{domxref("MediaRecorder.state")}} が <code>"inactive"</code> のときに <code>resume()</code> メソッドが呼び出されると、<code>InvalidState</code> エラーが発生します — まだ一時停止していない場合、記録を再開できませんし、{{domxref("MediaRecorder.state")}} がすでに <code>"recording"</code> の場合、<code>resume()</code> は効果がありません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + pause.onclick = function() { + if(MediaRecorder.state === "recording") { + mediaRecorder.pause(); + // 記録を一時停止 + } else if(MediaRecorder.state === "paused") { + mediaRecorder.resume(); + // 記録を再開 + } + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-resume-void", "MediaRecorder.resume()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.resume")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/start/index.html b/files/ja/web/api/mediarecorder/start/index.html new file mode 100644 index 0000000000..9f586519c0 --- /dev/null +++ b/files/ja/web/api/mediarecorder/start/index.html @@ -0,0 +1,100 @@ +--- +title: MediaRecorder.start() +slug: Web/API/MediaRecorder/start +tags: + - API + - Audio + - Media + - Media Capture + - MediaRecorder + - MediaStream Recording + - MediaStream Recording API + - Method + - Recording Media + - Reference + - Video + - start +translation_of: Web/API/MediaRecorder/start +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary">MediaStream Recording API の一部である {{domxref("MediaRecorder")}} のメソッド <strong><code>start()</code></strong> は、1つ以上の {{domxref("Blob")}} オブジェクトへのメディアの記録を開始します。</span> メディアの全期間を単一の <code>Blob</code> に（または {{domxref("MediaRecorder.requestData", "requestData()")}} を呼び出すまで）記録することも、一度に記録するミリ秒数を指定することもできます。 その後、その量のメディアが記録されるたびに、記録されたメディアに対応できるようにイベントが配信され、その間に、メディアの次のスライスを記録するための新しい <code>Blob</code> が作成されます。</p> + +<p><code>MediaRecorder</code> の {{domxref("MediaRecorder.state", "state")}} が <code>"inactive"</code> であると仮定すると、<code>start()</code> は <code>state</code> を <code>"recording"</code> に設定してから、入力ストリームからメディアのキャプチャを開始します。 タイムスライス期間が経過するか、ソースメディアが終了するまで、<code>Blob</code> が作成され、そこにデータが収集されます。 <code>Blob</code> がその時点まで満たされるたびに（タイムスライス期間または、スライス期間が指定されていない場合はメディアの終わり）、{{event("dataavailable")}} イベントが記録されたデータとともに <code>MediaRecorder</code> に送られます。 ソースがまだ再生中の場合は、新しい <code>Blob</code> が作成され、そこに記録が続きます。</p> + +<p>ソースストリームが終了すると、<code>state</code> は <code>"inactive"</code> に設定され、データ収集は停止します。 最後の {{event("dataavailable")}} イベントが <code>MediaRecorder</code> に送られ、その後に {{event("stop")}} イベントが続きます。</p> + +<div class="note"> +<p><strong>注</strong>: ブラウザーが記録を開始または記録を続行できない場合は、{{domxref("DOMError")}} イベントを発生<em>させよう</em>とし、続いて収集した Blob を含む {{domxref("MediaRecorder.dataavailable")}} イベントと {{domxref("MediaRecorder.stop")}} イベントを発生<em>させよう</em>とします。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>MediaRecorder</em>.start(<em>timeslice</em>)</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>timeslice</code> {{optional_inline}}</dt> + <dd>各 {{domxref("Blob")}} に記録するミリ秒数。 このパラメータが含まれていない場合は、{{domxref("MediaRecorder.requestData", "requestData()")}} メソッドが呼び出されて <code>Blob</code> が取得され、メディアの記録を継続する新しい <code>Blob</code> の作成のきっかけがない限り、メディア期間全体が単一の <code>Blob</code> に記録されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<p>すぐに検出できるエラーは DOM 例外としてスローされます。 他のすべてのエラーは、<code>MediaRecorder</code> オブジェクトに送られた {{event("error")}} イベントを通じて報告されます。 これらのエラーに対応するために {{domxref("MediaRecorder.onerror", "onerror")}} イベントハンドラを実装できます。</p> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd><code>MediaRecorder</code> は <code>inactive</code> 状態ではありません。 すでに記録中の場合は、メディアの記録を開始できません。 {{domxref("MediaRecorder.state", "state")}} プロパティを参照してください。</dd> + <dt><code>SecurityError</code></dt> + <dd>{{domxref("MediaStream")}} は記録を禁止するように設定されています。 これは、例えば、ユーザーが入力デバイスを使用するパーミッションを拒否したときに {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を使用して取得されたソースの場合などです。 これは、ソースストリームの {{domxref("MediaStreamConstraints.peerIdentity", "peerIdentity")}} 制約により、ストリーム内の {{domxref("MediaStreamTrack")}} が {{domxref("MediaStreamTrack.isolated", "isolated")}} としてマークされている場合にも発生します。 この例外は、記録開始後にソースメディアのセキュリティオプションが変更された場合にも {{event("error")}} イベントとして配信される可能性があります。</dd> + <dt><code>UnknownError</code></dt> + <dd>記録処理中に何か他の問題が発生しました。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + record.onclick = function() { + mediaRecorder.start(); + console.log("レコーダー起動"); + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.start")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/state/index.html b/files/ja/web/api/mediarecorder/state/index.html new file mode 100644 index 0000000000..4e101962b8 --- /dev/null +++ b/files/ja/web/api/mediarecorder/state/index.html @@ -0,0 +1,91 @@ +--- +title: MediaRecorder.state +slug: Web/API/MediaRecorder/state +tags: + - API + - Media Recorder API + - MediaRecording + - Property + - Reference + - state +translation_of: Web/API/MediaRecorder/state +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><strong><code>MediaRecorder.state</code></strong> 読み取り専用プロパティは、現在の <code>MediaRecorder</code> オブジェクトの現在の状態を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>state</em> = MediaRecorder.state</pre> + +<h3 id="Values" name="Values">値</h3> + +<p>以下のいずれかの値を含む <a href="https://w3c.github.io/mediacapture-record/#recordingstate">RecordingState</a> オブジェクト。</p> + +<table class="simple"> + <thead> + <tr> + <th scope="row">列挙型</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><code id="idl-def-RecordingStateEnum.inactive">inactive</code></th> + <td>記録は行われていません — まだ開始されていないか、開始されてから停止されました。</td> + </tr> + <tr> + <th scope="row"><code id="idl-def-RecordingStateEnum.recording">recording</code></th> + <td>記録が開始され、UA がデータをキャプチャしています。</td> + </tr> + <tr> + <th scope="row"><code id="idl-def-RecordingStateEnum.paused">paused</code></th> + <td>記録は開始され、その後一時停止されましたが、まだ停止または再開されていません。</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + record.onclick = function() { + mediaRecorder.start(); + console.log(mediaRecorder.state); + // "recording" を返します + console.log("レコーダー起動"); + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-state", "MediaRecorder.state")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.state")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/stop/index.html b/files/ja/web/api/mediarecorder/stop/index.html new file mode 100644 index 0000000000..2b2fea74b4 --- /dev/null +++ b/files/ja/web/api/mediarecorder/stop/index.html @@ -0,0 +1,76 @@ +--- +title: MediaRecorder.stop() +slug: Web/API/MediaRecorder/stop +tags: + - API + - Media Capture + - Media Recorder API + - MediaRecorder + - Method + - Reference + - stop +translation_of: Web/API/MediaRecorder/stop +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><span class="seoSummary"><strong><code>MediaRecorder.stop()</code></strong> メソッド（<a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> の一部）は、メディアキャプチャを停止するために使用します。</span></p> + +<p><code>stop()</code> メソッドを呼び出すと、UA は次の手順を実行するタスクをキューに入れます。</p> + +<ol> + <li>{{domxref("MediaRecorder.state")}} が <code>"inactive"</code> の場合は、DOM の <code>InvalidState</code> エラーを発生させてこれらの手順を終了します。 {{domxref("MediaRecorder.state")}} が <code>"inactive"</code> でない場合は、次の手順に進みます。</li> + <li>{{domxref("MediaRecorder.state")}} を <code>"inactive"</code> に設定してメディアのキャプチャを停止します。</li> + <li>収集されたデータの <code>Blob</code> を含む <code>dataavailable</code> イベントを発生させます。</li> + <li><code>stop</code> イベントを発生させます。</li> +</ol> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><span class="idlInterface" id="idl-def-IDBIndex"><span class="idlMethod"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlMethod"> </span></span></span></span></span></span></span></span></span></span></span></span><span class="idlInterface"><span class="idlMethod"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType"><span class="idlInterface"><span class="idlMethod"><span class="idlInterface"><span class="idlMethod"><span class="idlMethType">MediaRecorder.stop()</span></span></span></span></span></span></span></span></span></span></span></span></span></pre> + +<h3 id="Errors" name="Errors">エラー</h3> + +<p><code>MediaRecorder</code> オブジェクトの {{domxref("MediaRecorder.state")}} が <code>"inactive"</code> のときに <code>stop()</code> メソッドが呼び出されると、<code>InvalidState</code> エラーが発生します — メディアキャプチャが既に停止している場合は停止しても意味がありません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... + + stop.onclick = function() { + mediaRecorder.stop(); + console.log("レコーダー停止、データ使用可能"); + } + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-stop-void", "MediaRecorder.stop()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.stop")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("Navigator.getUserMedia")}}</li> +</ul> diff --git a/files/ja/web/api/mediarecorder/stream/index.html b/files/ja/web/api/mediarecorder/stream/index.html new file mode 100644 index 0000000000..c9416724f0 --- /dev/null +++ b/files/ja/web/api/mediarecorder/stream/index.html @@ -0,0 +1,74 @@ +--- +title: MediaRecorder.stream +slug: Web/API/MediaRecorder/stream +tags: + - API + - Media Recorder API + - MediaRecorder + - Property + - Reference + - stream +translation_of: Web/API/MediaRecorder/stream +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><strong><code>MediaRecorder.stream</code></strong> 読み取り専用プロパティは、<code>MediaRecorder</code> を作成したときに <code>MediaRecorder()</code> コンストラクタに渡したストリームを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>stream</em> = MediaRecorder.stream</pre> + +<h3 id="Values" name="Values">値</h3> + +<p>最初に <code>MediaRecorder</code> を作成したとき <code>MediaRecorde()</code> コンストラクタに渡した {{domxref("MediaStream")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js;highlight:[13,14]">if (navigator.getUserMedia) { + console.log('getUserMediaがサポートされています。'); + navigator.getUserMedia ( + // 制約 - このアプリに必要なのは音声のみ + { + audio: true + }, + + // 成功コールバック + function(stream) { + var mediaRecorder = new MediaRecorder(stream); + + var myStream = mediaRecorder.stream; + console.log(myStream); + +...</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-stream", "MediaRecorder.stream")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.MediaRecorder.stream")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">MediaStream Recording API の使用</a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">ウェブディクタフォン</a>: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、<a href="https://twitter.com/chrisdavidmills">Chris Mills</a> 著（<a href="https://github.com/mdn/web-dictaphone/">Github のソース</a>）。（英語）</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info の MediaStream Recording のデモ</a>、<a href="https://twitter.com/sw12">Sam Dutton</a> 著。（英語）</li> + <li>{{domxref("MediaDevices.getUserMedia")}}</li> +</ul> |