blob: 48392d068923ff41744e2b4543a7357ecc49e7ae (
plain)
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
|
---
title: MediaRecorder.ondataavailable
slug: Web/API/MediaRecorder/ondataavailable
translation_of: Web/API/MediaRecorder/ondataavailable
---
<p><font><font>{{APIRef("MediaStream Recording")}}</font></font></p>
<p><strong><code>MediaRecorder.ondataavailable </code></strong><font><font>事件处理程序(</font></font>part of the <a href="/en-US/docs/Web/API/MediaStream_Recording_API"><font><font>MediaStream记录API</font></font></a><font><font>)处理{{event("dataavailable")}}事件，让您在响应运行代码{{domxref("Blob")}}数据被提供使用。</font></font></p>
<p><code>dataavailable</code><font><font>当MediaRecorder将媒体数据传递到您的应用程序以供使用时，将触发</font><font>该</font><font>事件。</font><font>数据在包含数据的{{domxref("Blob")}}对象中提供。</font><font>这在四种情况下发生：</font></font></p>
<ul>
<li><font><font>媒体流结束时，所有尚未传递到</font></font><code>ondataavailable</code><font><font>处理程序的</font><font>媒体数据都将在单个{{domxref("Blob")}}中传递。</font></font></li>
<li><font><font>当调用{{domxref("MediaRecorder.stop()")}}时，自记录开始或</font></font><code>dataavailable</code><font><font>事件</font><font>最后一次</font><font>发生</font><font>以来已捕获的所有媒体数据</font><font>都将传递到{{domxref("Blob")}}}中；</font><font>此后，捕获结束。</font></font></li>
<li><font><font>调用{{domxref("MediaRecorder.requestData()")}} </font></font><code>dataavailable</code><font><font>时，将传递</font><font>自记录开始或</font><font>事件</font><font>最后一次</font><font>发生</font><font>以来捕获的所有媒体数据</font><font>；</font><font>然后</font></font><code>Blob</code><font><font>创建</font><font>一个新文件</font><font>，并将媒体捕获继续到该blob中。</font></font></li>
<li><font><font>如果将</font></font><code>timeslice</code><font><font>属性传递到开始媒体捕获的{{domxref("MediaRecorder.start()")}}方法中，</font></font><code>dataavailable</code><font><font>则每</font></font><code>timeslice</code><font><font>毫秒</font><font>触发一次事件</font><font>。</font><font>这意味着每个Blob都有特定的持续时间（最后一个Blob除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。</font><font>因此，如果该方法调用看起来像这样- </font></font><code>recorder.start(1000);</code><font><font>-的</font></font><code>dataavailable</code><font><font>事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的BLOB每秒即坚持一个第二长。</font><font>您可以</font></font><code>timeslice</code><font><font>与{{domxref("MediaRecorder.stop()")}}}和{{domxref("MediaRecorder.requestData()")}}}一起使用，以产生多个相同长度的Blob，以及其他较短的Blob。</font></font></li>
</ul>
<div class="note">
<p><font><font>包含媒体数据的{{domxref("Blob")}}在{{event("dataavailable")}}事件的</font></font><code>data</code><font><font>属性中</font><font>可用</font><font>。</font></font></p>
</div>
<h2 id="句法"><font><font>句法</font></font></h2>
<pre class="notranslate"><em>MediaRecorder</em>.ondataavailable = function(event) { ... }
<em>MediaRecorder</em>.addEventListener('dataavailable', function(event) { ... })</pre>
<h2 id="例"><font><font>例</font></font></h2>
<pre id="line1">...
var chunks = [];
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
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);
}
...</pre>
<h2 id="技术指标"><font><font>技术指标</font></font></h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col"><font><font>规范</font></font></th>
<th scope="col"><font><font>状态</font></font></th>
<th scope="col"><font><font>评论</font></font></th>
</tr>
<tr>
<td>{{SpecName("MediaStream Recording", "#dom-mediarecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td>
<td>{{Spec2("MediaStream Recording")}}</td>
<td><font><font>初始定义</font></font></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
<p><font><font>{{Compat("api.MediaRecorder.ondataavailable")}}</font></font></p>
<h2 id="也可以看看"><font><font>也可以看看</font></font></h2>
<ul>
<li><a href="/en-US/docs/Web/API/MediaStream_Recording_API"><font><font>使用MediaStream录制API</font></font></a></li>
<li><a href="http://mdn.github.io/web-dictaphone/"><font><font>Web</font></font></a><font><font> Dictaphone：</font></font><a href="https://twitter.com/chrisdavidmills"><font><font>Chris Mills提供的</font></font></a><font><font> MediaRecorder + getUserMedia + Web Audio API可视化演示(</font></font><font><font><a href="https://github.com/mdn/web-dictaphone/">在Github上提供</a>)</font></font><font><font>。</font></font></li>
<li><a href="http://simpl.info/mediarecorder/"><font><font>simpl.info MediaStream录制演示</font></font></a><font><font>，作者</font></font><a href="https://twitter.com/sw12"><font><font>Sam Dutton</font></font></a><font><font>。</font></font></li>
<li><font><font>{{domxref("Navigator.getUserMedia")}}</font></font></li>
</ul>
|
