Всем привет. Сегодня мы рассмотрим интересный api MediaRecorder в javascript который позволяет записывать видео и аудио, и выводить все это дело в браузер. Итак, поехали!

Для того чтобы начать работать с api MediaRecorder нам необходимо создать его объект делается это следующим образом.

const mediaRecorder = new MediaRecorder(stream);

Здесь мы экземпляр класса MediaRecorder() положили в константу mediaRecorder это по сути и есть наш объект. Обратите внимание в сам класс MediaRecorder мы передали параметр stream. Это медиа поток полученный с нашего микрофона и камеры. Получить мы его можем через метод getUserMedia() объекта navigator.mediaDevices.

navigator.mediaDevices.getUserMedia({ audio: true})
       .then(stream => {
//На выходе получаем объект медиа потока stream
});

В качестве аргумента данный метод принимает объект в котором могут быть указаны следующие пары свойств и значений (audio: true и video: true)

audio: true - запись звука с микрофона

video : true - запись видео с веб камеры

Сразу скажу что работать с методом getUserMedia() мы можем только через защищенный протокол https, c http с данный метод не работает. И следовательно для работы с api MediaRecorder нам тоже понадобится https. Еще для работы с веб-камерой и микрофоном нужно разрешить доступ в браузере. Ну и конечно они должны быть исправны. Проверьте это!

Итак, c этим мы разобрали идем дальше.

Для того чтобы начать запись нам необходимо воспользоваться методом start() объекта mediaRecorder.

mediaRecorder.start();

А чтобы прекратить запись:

mediaRecorder.stop();

Для записи медиа потока нужно воспользоваться событием dataavailable.

var audioChunks = [];
    mediaRecorder.addEventListener("dataavailable",function(event) {
        audioChunks.push(event.data);
    });

Здесь мы в массив audioChunks помещаем данные медиа потока.

Вот в принципе и все что вы должны знать для реализации записи видео и аудио через api MediaRecorder.

Теперь рассмотрим все на конкретном примере.

<div id="audio"></div>
  <button id="start">Начать запись</button>
  <button id="stop">Остановить запись</button>
<script>
navigator.mediaDevices.getUserMedia({ audio: true})
       .then(stream => {
      const mediaRecorder = new MediaRecorder(stream);
    
      document.querySelector('#start').addEventListener('click', function(){
      	mediaRecorder.start();
      });
    var audioChunks = [];
    mediaRecorder.addEventListener("dataavailable",function(event) {
        audioChunks.push(event.data);
    });

    mediaRecorder.addEventListener("stop", function() {
        const audioBlob = new Blob(audioChunks, {
            type: 'audio/wav'
        });
    const audioUrl = URL.createObjectURL(audioBlob);
      var audio = document.createElement('audio');
      audio.src = audioUrl;
      audio.controls = true;
      audio.autoplay = true;
    document.querySelector('#audio').appendChild(audio);
       audioChunks = [];
});
    document.querySelector('#stop').addEventListener('click', function(){
      	 mediaRecorder.stop();
      });
});
</script>

Здесь я реализовал типичный диктофон. Нажимая кнопку ' Начать запись ' у нас начинается запись звука с микрофона. Как только мы останавливаем запись ' Остановить запись ' запись останавливается и помещается в тег audio который тут же проигрывается. При создании новых записей у нас каждый раз создается новый тег аудио. В результате мы можем прослушивать каждую нашу запись снова и снова.

Точно таким же образом мы можем записывать видео.

<div id="video"></div>
  <button id="start">Начать запись</button>
  <button id="stop">Остановить запись</button>
<script>
navigator.mediaDevices.getUserMedia({ audio: true, video: true})
       .then(stream => {
       
    const mediaRecorder = new MediaRecorder(stream);
    
      document.querySelector('#start').addEventListener('click', function(){
      	mediaRecorder.start();
      });
    

    var audioChunks = [];
    mediaRecorder.addEventListener("dataavailable",function(event) {
        audioChunks.push(event.data);
    });

    mediaRecorder.addEventListener("stop", function() {
        const audioBlob = new Blob(audioChunks);
    const audioUrl = URL.createObjectURL(audioBlob);
      var video = document.createElement('video');
      video.src = audioUrl;
      video.controls = true;
      video.autoplay = true;
    document.querySelector('#video').appendChild(video);
       audioChunks = [];
});
     document.querySelector('#stop').addEventListener('click', function(){
      	 mediaRecorder.stop();
      });
});
</script>

Напоследок скажу что данный api неплохо поддерживается всеми современными браузерами и конечно же имеет более обширную документацию.

Ознакомится более подробно с документацией вы можете на этом

ресурсе

Используя данный api можно вполне реализовать стрим трансляции и звуковые сообщения.

На этом данная статья подошла к концу. Если у вас появились вопросы пишите их в комментариях или группе

вк.

На этом я с вами прощаюсь! Желаю успехов и удачи! Пока.