1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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")}} イベントを処理するために呼び出される {{event("Event_handlers", "event handler")}} です。 これらは記録を停止する致命的なエラーです。 受信したイベントは {{domxref("MediaRecorderErrorEvent")}} インターフェイスに基づいていて、その {{domxref("MediaRecorderErrorEvent.error", "error")}} プロパティには、発生した実際のエラーを説明する {{domxref("DOMException")}} が含まれています。</dd>
<dt>{{domxref("MediaRecorder.onpause")}}</dt>
<dd>メディアの記録が一時停止したときに発生する {{event("pause")}} イベントを処理するために呼び出される {{event("Event_handlers", "event handler")}} です。</dd>
<dt>{{domxref("MediaRecorder.onresume")}}</dt>
<dd>メディアの記録が一時停止後に再開したときに発生する {{event("resume")}} イベントを処理するために呼び出される {{event("Event_handlers", "event handler")}} です。</dd>
<dt>{{domxref("MediaRecorder.onstart")}}</dt>
<dd>メディアの記録を開始したときに発生する {{event("start")}} イベントを処理するために呼び出される {{event("Event_handlers", "event handler")}} です。</dd>
<dt>{{domxref("MediaRecorder.onstop")}}</dt>
<dd>{{domxref("MediaStream")}} の終了時、または {{domxref("MediaRecorder.stop()")}} メソッドの呼び出し後のいずれかに、メディアの記録が終了したときに発生する {{event("stop")}} イベントを処理するために呼び出される {{event("Event_handlers", "event handler")}} です。</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>
|
