diff options
Diffstat (limited to 'files/zh-cn/web/api/mediarecorder/index.html')
| -rw-r--r-- | files/zh-cn/web/api/mediarecorder/index.html | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/mediarecorder/index.html b/files/zh-cn/web/api/mediarecorder/index.html new file mode 100644 index 0000000000..9f233604bc --- /dev/null +++ b/files/zh-cn/web/api/mediarecorder/index.html @@ -0,0 +1,256 @@ +--- +title: MediaRecorder +slug: Web/API/MediaRecorder +translation_of: Web/API/MediaRecorder +--- +<div>{{APIRef("Media Recorder API")}}</div> + +<p><strong><code>MediaRecorder</code></strong> 是 <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> 提供的用来进行媒体轻松录制的接口, 他需要通过调用 {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} 构造方法进行实例化.</p> + +<h2 id="构造函数">构造函数</h2> + +<dl> + <dt>{{domxref("MediaRecorder.MediaRecorder()")}}</dt> + <dd> 创建一个新的<code>MediaRecorder</code>对象,对指定的{{domxref("MediaStream")}} 对象进行录制,支持的配置项包括设置容器的MIME 类型 (例如<code>"video/webm"</code> 或者 <code>"video/mp4"</code>)和音频及视频的码率或者二者同用一个码率</dd> + <dd></dd> +</dl> + +<h2 id="配置项">配置项</h2> + +<dl> + <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt> + <dd> 返回 <code>MediaRecorder</code> 对象创建时选择器选择的录制容器的 MIME type</dd> + <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt> + <dd> 返回录制对象<code>MediaRecorder</code> 的当前状态(闲置中,录制中或者暂停 ) (<code>inactive</code>, <code>recording</code>, or <code>paused</code>.)</dd> + <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt> + <dd> 返回录制器对象 <code>MediaRecorder </code>创建时构造函数传入的stream对象</dd> + <dd></dd> + <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt> + <dd></dd> + <dd> 用以指定 <code>MediaRecorder</code>是否录制无声的输入源. 如果这个属性是false. 录制器对象<code>MediaRecorder</code> 会录制无声的音频或者黑屏的视频, 默认值是false</dd> + <dd></dd> + <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt> + <dd>返回视频采用的编码比率. 它可能和构造函数的设置比率不同. (if it was provided).</dd> + <dt>{{domxref("MediaRecorder.audioBitsPerSecond")}} {{readonlyInline}}</dt> + <dd>返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).</dd> + <dd></dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt> + <dd>返回一个{{domxref("Boolean")}} 值,来表示设置的MIME type 是否被当前用户的设备支持.</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>停止录制. 同时触发{{event("dataavailable")}}事件,返回一个存储<code>Blob</code>内容的录制数据.之后不再记录</dd> + <dd></dd> +</dl> + +<h2 id="静态方法">静态方法</h2> + +<dl> + <dt>{{domxref("MediaRecorder.isTypeSupported()")}}</dt> + <dd>静态方法，判断给定的MIME类型是否支持。返回{{domxref("Boolean")}}类型的值。</dd> + <dt></dt> +</dl> + +<h2 id="事件处理">事件处理</h2> + +<dl> + <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt> + <dd>调用它用来处理 {{event("dataavailable")}} 事件, 该事件可用于获取录制的媒体资源 (在事件的 <code>data</code> 属性中会提供一个可用的 {{domxref("Blob")}} 对象.)</dd> + <dt>{{domxref("MediaRecorder.onerror")}}</dt> + <dd>An {{domxref("EventHandler")}} called to handle the {{event("recordingerror")}} event, including reporting errors that arise with media recording. These are fatal errors that stop recording.</dd> + <dt>{{domxref("MediaRecorder.onpause")}}</dt> + <dd>用来处理 {{event("pause")}} 事件, 该事件在媒体暂停录制时触发（{{domxref("MediaRecorder.pause()")}}）.</dd> + <dt>{{domxref("MediaRecorder.onresume")}}</dt> + <dd>用来处理 {{event("resume")}} 事件, 该事件在暂停后回复录制视频时触发（{{domxref("MediaRecorder.resume()")}}）.</dd> + <dt>{{domxref("MediaRecorder.onstart")}}</dt> + <dd>用来处理 {{event("start")}} 事件, 该事件在媒体开始录制时触发（{{domxref("MediaRecorder.start()")}}）.</dd> + <dt>{{domxref("MediaRecorder.onstop")}}</dt> + <dd>用来处理 {{event("stop")}} 事件, 该事件会在媒体录制结束时、媒体流（{{domxref("MediaStream")}}）结束时、或者调用{{domxref("MediaRecorder.stop()")}} 方法后触发.</dd> +</dl> + +<h2 id="事件">事件</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/error_event">error</a></code></dt> + <dd>Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.<br> + Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onerror">onerror</a></code> property.</dd> + <dt></dt> +</dl> + +<h2 id="例子">例子</h2> + +<pre>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 occured: ' + err); + }) +} + +</pre> + +<div class="note"> +<p>This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; <a href="https://github.com/mdn/web-dictaphone/">refer to the source</a> for the complete code.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(47.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(47.0)}}</td> + <td>{{CompatChrome(47.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>1.3<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] The initial Firefox OS implementation only supported audio recording.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li> + <li><a href="https://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li> + <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li> + <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> + <li>{{domxref("navigator.mediaDevices.getUserMedia")}}</li> + <li><a href="https://www.fingerspell.org/">FingerSpell</a>: Sign Language Fingerspelling practice using MediaDevices and the MediaStream Recording API to create and download recordings, MediaRecorder API supported desktop browsers only (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source on GitHub</a>)</li> +</ul> |