Skip to content

Commit

Permalink
[ru]: fix MacroLiveSampleError on docs/Web/API/MediaStream_Recording_…
Browse files Browse the repository at this point in the history
…API/Recording_a_media_element (mdn#12578)
  • Loading branch information
leon-win committed Nov 13, 2023
1 parent 1ff3316 commit 0293285
Showing 1 changed file with 11 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ slug: Web/API/MediaStream_Recording_API/Recording_a_media_element

В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}}) в качестве источника потока `MediaStream` для его записи. В этой статье рассматривается пример выполняющий это.

## HTML содержимое
## Пример записи с помощью медиа элемента

### HTML

```html hidden
<p>
Expand Down Expand Up @@ -101,11 +103,11 @@ h2 {
}
```

## JavaScript
### JavaScript

Теперь давайте посмотрим на код JavaScript

### Установка глобальных переменных
#### Установка глобальных переменных

Мы начнём с установления некоторых глобальных переменных, которые нам понадобятся.

Expand All @@ -122,7 +124,7 @@ let recordingTimeMS = 5000;

Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, `recordingTimeMS`, установлена на 5000 миллисекунд (5 секунд);.

### Используемые функции
#### Используемые функции

Далее мы создадим несколько служебных функций, которые будут использованы позже.

Expand All @@ -142,7 +144,7 @@ function wait(delayInMS) {

The `wait()` function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an [arrow function](/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.

### Starting media recording
#### Starting media recording

The `startRecording()` function handles starting the recording process:

Expand Down Expand Up @@ -185,7 +187,7 @@ function startRecording(stream, lengthInMS) {
- Lines 18-22
- : These lines create a new `Promise` which is fulfilled when both of the two `Promise`s (`stopped` and `recorded`) have resolved. Once that resolves, the array data is returned by `startRecording()` to its caller.

### Stopping the input stream
#### Stopping the input stream

The `stop()` function simply stops the input media:

Expand All @@ -197,7 +199,7 @@ function stop(stream) {

This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.

### Getting an input stream and setting up the recorder
#### Getting an input stream and setting up the recorder

Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:

Expand Down Expand Up @@ -257,7 +259,7 @@ When a {{domxref("Element/click_event", "click")}} event occurs, here's what hap
- Line 20
- : The `catch()` for all the `Promise`s outputs the error to the logging area by calling our `log()` function.

### Handling the stop button
#### Handling the stop button

The last bit of code adds a handler for the {{domxref("Element/click_event", "click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

Expand All @@ -277,7 +279,7 @@ This simply calls the [`stop()`](#stopping_the_input_stream) function we covered

When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:

{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}
{{ EmbedLiveSample("Пример_записи_с_помощью_медиа_элемента", 600, 440) }}

You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.

Expand Down

0 comments on commit 0293285

Please sign in to comment.