diff options
Diffstat (limited to 'files/ru/web/api/mediastream_recording_api')
3 files changed, 10 insertions, 10 deletions
diff --git a/files/ru/web/api/mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/index.html index 7907634ec2..077c3c82a9 100644 --- a/files/ru/web/api/mediastream_recording_api/index.html +++ b/files/ru/web/api/mediastream_recording_api/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/MediaStream_Recording_API <li>Установите {{domxref("MediaRecorder.ondataavailable")}} обработчик событий для {{event("dataavailable")}} событий; он будет вызываться каждый раз, как данные будут доступны.</li> <li>Создайте {{domxref("MediaRecorder")}} объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрейт его треков).</li> <li>Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите {{domxref("MediaRecorder.start()")}} для начала записи.</li> - <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чье значение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li> + <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появляются данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чьё значение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событие, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li> <li>Запись останавливается автоматически, когда исходное медиа закончит проигрываться.</li> <li>Вы можете остановить запись в любое время, вызвав {{domxref("MediaRecorder.stop()")}}.</li> </ol> <p>Вы можете так же использовать свойства MediaRecorder объекта для определения состояния процесса записи и его {{domxref("MediaRecorder.pause", "pause()")}} и {{domxref("MediaRecorder.resume", "resume()")}} методы, чтобы остановить и возобновить запись исходной медиа.</p> -<p>Если вам нужно или вы хотите проверить, поддерживается ли определенный MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p> +<p>Если вам нужно или вы хотите проверить, поддерживается ли определённый MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p> <p>Чтобы узнать больше о MediaStream Recording API, смотрите <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a>, который показывает, как использовать API для записи аудио клипов. Другая статья, <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a>, описывает, как получить поток из {{HTMLElement("audio")}} или {{HTMLElement("video")}} элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).</p> diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html index 0ba9e31501..ff5714a279 100644 --- a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html +++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html @@ -108,7 +108,7 @@ h2 { <h3 id="Установка_глобальных_переменных">Установка глобальных переменных</h3> -<p>Мы начнем с установления некоторых глобальных переменных, которые нам понадобятся.</p> +<p>Мы начнём с установления некоторых глобальных переменных, которые нам понадобятся.</p> <pre class="brush: js">let preview = document.getElementById("preview"); let recording = document.getElementById("recording"); diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html index fb0c2b27b2..f0ce6a6e5b 100644 --- a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html +++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recordin <h2 id="CSS_плюшки">CSS плюшки</h2> -<p>Разметка HTML довольно проста, поэтому не будем ее рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p> +<p>Разметка HTML довольно проста, поэтому не будем её рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p> <h3 id="Сохраняйте_интерфейс_ограниченным_областью_просмотра_независимо_от_высоты_устройства_с_функцией_calc">Сохраняйте интерфейс ограниченным областью просмотра, независимо от высоты устройства, с функцией calc()</h3> @@ -70,7 +70,7 @@ translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recordin top: -100px; }</pre> -<p>Затем стилизуем блок информации (обернутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p> +<p>Затем стилизуем блок информации (обёрнутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p> <pre class="brush: css">aside { position: fixed; @@ -124,7 +124,7 @@ const soundClips = document.querySelector('.sound-clips');</pre> console.log('getUserMedia not supported on your browser!'); }</pre> -<p>Все обернуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем <code>getUserMedia()</code> и внутри определяем:</p> +<p>Все обёрнуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем <code>getUserMedia()</code> и внутри определяем:</p> <ul> <li><strong>Ограничения </strong>: Приложению нужен только аудиопоток .</li> @@ -138,7 +138,7 @@ const soundClips = document.querySelector('.sound-clips');</pre> <h2 id="Захват_медиа_потока">Захват медиа потока</h2> -<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаем новый объект типа Media Recorder конструктором <code>MediaRecorder()</code> и передаем ему поток, полученный функцией. Это точка входа использования интерфейса MediaRecorder — теперь поток готов для захвата и упаковки в объект {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p> +<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаём новый объект типа Media Recorder конструктором <code>MediaRecorder()</code> и передаём ему поток, полученный функцией. Это точка входа использования интерфейса MediaRecorder — теперь поток готов для захвата и упаковки в объект {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p> <pre class="brush: js">const mediaRecorder = new MediaRecorder(stream);</pre> @@ -213,11 +213,11 @@ mediaRecorder.ondataavailable = function(e) { } }</pre> -<p>Пройдем весь код выше и посмотрим, что он делает.</p> +<p>Пройдём весь код выше и посмотрим, что он делает.</p> <p>Сначала отображаем пользователю диалог с запросом имени будущей записи.</p> -<p>Затем создаем структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p> +<p>Затем создаём структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p> <pre class="brush: html"><article class="clip"> <audio controls></audio> @@ -225,7 +225,7 @@ mediaRecorder.ondataavailable = function(e) { <button>Delete</button> </article></pre> -<p>После этого создаем объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаем объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p> +<p>После этого создаём объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаём объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p> <p>Наконец, устанавливаем обработчик события <code>onclick</code> на кнопке удаления, для удаления всей структуры HTML проигрывания результата записи (элемент clip).</p> |