diff options
Diffstat (limited to 'files/ru/web/api/mediarecorder')
| -rw-r--r-- | files/ru/web/api/mediarecorder/index.html | 185 | ||||
| -rw-r--r-- | files/ru/web/api/mediarecorder/mediarecorder/index.html | 157 | ||||
| -rw-r--r-- | files/ru/web/api/mediarecorder/ondataavailable/index.html | 81 | ||||
| -rw-r--r-- | files/ru/web/api/mediarecorder/requestdata/index.html | 123 | ||||
| -rw-r--r-- | files/ru/web/api/mediarecorder/start/index.html | 80 | ||||
| -rw-r--r-- | files/ru/web/api/mediarecorder/state/index.html | 84 |
6 files changed, 710 insertions, 0 deletions
diff --git a/files/ru/web/api/mediarecorder/index.html b/files/ru/web/api/mediarecorder/index.html new file mode 100644 index 0000000000..4957359f56 --- /dev/null +++ b/files/ru/web/api/mediarecorder/index.html @@ -0,0 +1,185 @@ +--- +title: MediaRecorder +slug: Web/API/MediaRecorder +translation_of: Web/API/MediaRecorder +--- +<p>{{APIRef("Media Recorder API")}}</p> + +<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/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", "MediaRecorder()")}}</dt> + <dd>Создает новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt> + <dd>Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. </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>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если аттрибут равен<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="Методы">Методы</h2> + +<dl> + <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt> + <dd>Возвращает {{domxref("Boolean")}} значение показывающее поддерживается ли MIME тип текущим user agent.</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> +</dl> + +<h2 id="Обработчики_событий">Обработчики событий</h2> + +<dl> + <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt> + <dd>Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в <code>timeslice</code> миллисекунд (или, если <code>timeslice</code> не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}. Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.</dd> + <dt>{{domxref("MediaRecorder.onerror")}}</dt> + <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd> + <dt>{{domxref("MediaRecorder.onpause")}}</dt> + <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.</dd> + <dt>{{domxref("MediaRecorder.onresume")}}</dt> + <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("resume")}}, случившегося во время возбновления записи.</dd> + <dt>{{domxref("MediaRecorder.onstart")}}</dt> + <dd>{{domxref("EventHandler")}}вызывается для обработки события {{event("start")}}, случившегося во время начала записи.</dd> + <dt>{{domxref("MediaRecorder.onstop")}}</dt> + <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("stop")}}, случившегося во время завершения записи, а так же при окончании {{domxref("MediaStream")}} — или после вызова {{domxref("MediaRecorder.stop()")}}</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre>navigator.getUserMedia = (navigator.getUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia || + navigator.webkitGetUserMedia); + + +if (navigator.getUserMedia) { + console.log('getUserMedia supported.'); + + var constraints = { audio: true }; + var chunks = []; + + var onSuccess = 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.requestData(); + } + + 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 = window.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); + } + } + + var onError = function(err) { + console.log('The following error occured: ' + err); + } + + navigator.getUserMedia(constraints, onSuccess, onError); +} else { + console.log('getUserMedia not supported on your browser!'); +}</pre> + +<div class="note"> +<p>Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите <a href="https://github.com/mdn/web-dictaphone/">здесь</a></p> +</div> + +<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", "#MediaRecorderAPI")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимоть_с_браузерами">Совместимоть с браузерами</h2> + + + +<p>{{Compat("api.MediaRecorder")}}</p> + +<h2 id="Еще_по_теме">Еще по теме</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование 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="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> + <li>{{domxref("Navigator.getUserMedia")}}</li> +</ul> diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.html b/files/ru/web/api/mediarecorder/mediarecorder/index.html new file mode 100644 index 0000000000..eaae4075bc --- /dev/null +++ b/files/ru/web/api/mediarecorder/mediarecorder/index.html @@ -0,0 +1,157 @@ +--- +title: MediaRecorder.MediaRecorder() +slug: Web/API/MediaRecorder/MediaRecorder +translation_of: Web/API/MediaRecorder/MediaRecorder +--- +<div>{{APIRef("MediaStream Recording")}}</div> + +<p><strong><code>MediaRecorder()</code></strong> конструктор {{domxref("MediaRecorder")}} объекта который будет делать запись переданного {{domxref("MediaStream")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>mediaRecorder</em> = new MediaRecorder(<em>stream</em>[, <em>options</em>]);</pre> + +<h3 id="Параметры">Параметры</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>mime</code> тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта <code>MediaRecorder</code>. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или испоьзуйте <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр codecs</a> или параметр<code> profiles</code> для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определенного типа из свойства <code>mimeType</code> , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.</li> + <li><code>audioBitsPerSecond</code>: Скорость записи медиа данных аудио.</li> + <li><code>videoBitsPerSecond</code>: Скорость записи медиа данных видео.</li> + <li><code>bitsPerSecond</code>: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется вместо отсутствующей настройки выше..</li> + </ul> + + <div class="note"> + <p> Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.</p> + </div> + </dd> +</dl> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>NotSupportedError</code></dt> + <dd>Определяет MIME тип, не поддерживающийся браузером.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере 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="Спецификации">Спецификации</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")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</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)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>options object</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43.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</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>1.3<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The initial Firefox OS implementation only supported audio recording.</p> + +<h2 id="Смотри_так_же">Смотри так же</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li> + <li><a href="http://mdn.github.io/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="http://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> +</ul> diff --git a/files/ru/web/api/mediarecorder/ondataavailable/index.html b/files/ru/web/api/mediarecorder/ondataavailable/index.html new file mode 100644 index 0000000000..e84e622f74 --- /dev/null +++ b/files/ru/web/api/mediarecorder/ondataavailable/index.html @@ -0,0 +1,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> diff --git a/files/ru/web/api/mediarecorder/requestdata/index.html b/files/ru/web/api/mediarecorder/requestdata/index.html new file mode 100644 index 0000000000..07fb15a876 --- /dev/null +++ b/files/ru/web/api/mediarecorder/requestdata/index.html @@ -0,0 +1,123 @@ +--- +title: MediaRecorder.requestData() +slug: Web/API/MediaRecorder/requestData +translation_of: Web/API/MediaRecorder/requestData +--- +<p>{{APIRef("MediaStream Recording")}}</p> + +<p><span class="seoSummary">Метод <strong><code>MediaRecorder.requestData()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется, чтобы поднять {{domxref("dataavailable")}} событие содержащее {{domxref("Blob")}} объект захваченных медиа-данных как это было когда метод был вызван.</span> This can then be grabbed и маниулировать как необходимо.</p> + +<p>When the <code>requestData()</code> method is invoked, the browser queues a task that runs the following steps:</p> + +<ol> + <li>If {{domxref("MediaRecorder.state")}} is not "recording", raise a DOM <code>InvalidState</code> error and terminate these steps. If {{domxref("MediaRecorder.state")}} is "recording", continue to the next step.</li> + <li>Raise a {{domxref("dataavailable")}} event containing a {{domxref("Blob")}} of the currently captured data (the Blob is available under the event's <code>data</code> attribute.)</li> + <li>Create a new Blob and place subsequently captured data into it.</li> +</ol> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">MediaRecorder.requestData()</pre> + +<h3 id="Errors">Errors</h3> + +<p>An <code>InvalidState</code> error is raised if the <code>requestData()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "recording" — the media cannot be captured if recording is not occurring.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">... + + captureMedia.onclick = function() { + mediaRecorder.requestData(); + // makes snapshot available of data so far + // ondataavailable fires, then capturing continues + // in new Blob + } + +...</pre> + +<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", "#widl-MediaRecorder-requestData-void", "MediaRecorder.requestData()")}}</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)}}<sup>[2]</sup></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</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>1.3<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The intial Firefox OS implementation only supported audio recording.</p> + +<p>[2] To try this feature on Chrome, enable <em>Experimental Web Platform features</em> from <a>chrome://flags</a> . Currently only video is supported, not audio.</p> + +<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="http://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="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> + <li>{{domxref("Navigator.getUserMedia")}}</li> +</ul> diff --git a/files/ru/web/api/mediarecorder/start/index.html b/files/ru/web/api/mediarecorder/start/index.html new file mode 100644 index 0000000000..c86d17137e --- /dev/null +++ b/files/ru/web/api/mediarecorder/start/index.html @@ -0,0 +1,80 @@ +--- +title: MediaRecorder.start() +slug: Web/API/MediaRecorder/start +translation_of: Web/API/MediaRecorder/start +--- +<div>{{APIRef("Media Recorder API")}}</div> + +<p><span class="seoSummary">Метод <strong><code>MediaRecorder.start()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется для начала захвата медиа {{domxref("Blob")}}.</span></p> + +<p>When the <code>start()</code> method is invoked, the UA queues a task that runs the following steps:</p> + +<ol> + <li>If the {{domxref("MediaRecorder.state")}} is not "inactive", raise a DOM <code>InvalidState</code> error and terminate these steps. if the {{domxref("MediaRecorder.state")}} is "inactive", continue on to the next step.</li> + <li>Set the {{domxref("MediaRecorder.state")}} to "recording" and wait until media becomes available from the <code>stream</code> passed into {{domxref("Navigator.getUserMedia")}}.</li> + <li>Once data becomes available, raise a {{domxref("MediaRecorder.start")}} event and start gathering the data into a {{domxref("Blob")}} (see <cite><a class="bibref" href="https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html#bib-FILE-API">FILE-API</a></cite>).</li> + <li>If the <code>timeSlice</code> argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of collected data, and start gathering a new Blob of data. If <code>timeSlice</code> has not been provided, continue gathering data into the original Blob.</li> + <li>When the <code>stream</code> is ended, set {{domxref("MediaRecorder.state")}} to "inactive" and stop gathering data.</li> + <li>Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.</li> + <li>Raise a {{domxref("MediaRecorder.stop")}} event.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If the browser is unable to start recording or continue recording, it<em> will</em> raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">MediaRecorder.start(timeslice)</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>timeslice</code> {{optional_inline}}</dt> + <dd>Этот параметр принимает значение в миллисекундах, и переопределяет длину куска захвата медиа для возвращения в каждом Blob. Если не указан, то все медиа данные будут занесены в один Blob, только если не был вызван метод {{domxref("MediaRecorder.requestData")}}.</dd> +</dl> + +<h3 id="Ошибки">Ошибки</h3> + +<p>An <code>InvalidState</code> error is raised if the <code>start()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">... + + record.onclick = function() { + mediaRecorder.start(); + console.log("рекордер запущен"); + } + +...</pre> + +<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", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.MediaRecorder.start")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder 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</a> от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> + <li>{{domxref("Navigator.getUserMedia")}}</li> +</ul> diff --git a/files/ru/web/api/mediarecorder/state/index.html b/files/ru/web/api/mediarecorder/state/index.html new file mode 100644 index 0000000000..b153d0d1ae --- /dev/null +++ b/files/ru/web/api/mediarecorder/state/index.html @@ -0,0 +1,84 @@ +--- +title: MediaRecorder.state +slug: Web/API/MediaRecorder/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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>state</em> = MediaRecorder.state</pre> + +<h3 id="Значения">Значения</h3> + +<p>Объект <a href="http://w3c.github.io/web-animations/#enumdef-animationplaystate">AnimationPlayState</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="Пример">Пример</h2> + +<pre class="brush: js">... + + record.onclick = function() { + mediaRecorder.start(); + console.log(mediaRecorder.state); + // Должно вернуть "recording" + console.log("захват начат"); + } + +...</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</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="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.MediaRecorder.state")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder 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> |