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
|
---
title: MediaRecorder.ondataavailable
slug: Web/API/MediaRecorder/ondataavailable
translation_of: Web/API/MediaRecorder/ondataavailable
---
<p>{{APIRef("MediaStream Recording")}}</p>
<p><strong><code>MediaRecorder.ondataavailable </code></strong>обработчик события (часть <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>) обрабатывает {{event("dataavailable")}} событие, позволяет выполнить код, когда тип данных {{domxref("Blob")}}, представляющий обработанные данные становиться доступным для использования.</p>
<p>Событие <code>dataavailable</code> вызывается когда MediaRecorder доставляет медиа данные в ваше приложение для использования. Они представляются в виде объекта типа {{domxref("Blob")}}, содержащего данные. Это происходит в четырёх ситуациях:</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> , и захват порций медиаданных продолжается уже в этот новый объект <code>blob</code>.</li>
<li>Если свойство <code>timeslice</code> передаётся в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие <code>dataavailable</code> запускается каждые <code>timeslice</code> миллисекунд. Это значит, что каждый объект типа <code>blob</code> будет иметь специфический размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : <code>recorder.start(1000);</code> то событие <code>dataavailable</code> будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа <code>blob</code> , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство <code>timeslice</code> вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа<code> blob</code> одинакового объёма данных , плюс последние короткие объекты типа<code> blob.</code></li>
</ul>
<div class="note">
<p>Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве <code>data</code> , возвращаемого в параметре объекта события {{event("dataavailable")}}.</p>
</div>
<h2 id="Синтаксис">Синтаксис</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="Пример">Пример</h2>
<pre class="brush: js" id="line1"><span>...
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("recorder stopped");
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
...</span>
</pre>
<h2 id="Спецификации">Спецификации</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", "#widl-MediaRecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td>
<td>{{Spec2("MediaStream Recording")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.MediaRecorder.ondataavailable")}}</p>
<h2 id="Смотри_так_же">Смотри так же</h2>
<ul>
<li><a href="/en-US/docs/Web/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/">source on Github</a>.)</li>
<li><a href="http://simpl.info/mediarecorder/">Демонстрационный пример записи медиапотока</a>, от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
<li>{{domxref("Navigator.getUserMedia")}}</li>
</ul>
|
