WebRTC (Web Real-Time Communication) — это мощная технология, которая обеспечивает аудио- и видеосвязь между веб-браузерами в режиме реального времени без необходимости использования дополнительных плагинов или программного обеспечения. Хотя WebRTC обеспечивает бесперебойную связь, он также предлагает возможность записи аудио- и видеопотоков, что делает его отличным выбором для приложений, которым требуется функция записи. В этой статье мы рассмотрим различные методы реализации записи WebRTC в веб-приложениях, дополненные разговорными объяснениями и примерами кода.

Метод 1: использование getUserMedia и MediaRecorder
Один из самых простых способов записи аудио и видео в приложении WebRTC — использование API getUserMedia для доступа к мультимедийным устройствам пользователя (микрофону и камере) и API MediaRecorder для записи. медиапотоки.

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function (stream) {
    const mediaRecorder = new MediaRecorder(stream);
    const chunks = [];
    mediaRecorder.ondataavailable = function (event) {
      chunks.push(event.data);
    };
    // Start recording
    mediaRecorder.start();
    // Stop recording after 10 seconds
    setTimeout(function () {
      mediaRecorder.stop();
      // Create a Blob from the recorded chunks
      const blob = new Blob(chunks, { type: 'video/webm' });
      // Download the recorded video
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      document.body.appendChild(a);
      a.style = 'display: none';
      a.href = url;
      a.download = 'recorded-video.webm';
      a.click();
      // Clean up
      URL.revokeObjectURL(url);
    }, 10000);
  })
  .catch(function (error) {
    console.error('Error accessing media devices:', error);
  });

Метод 2: использование API записи MediaStream
Другой метод записи медиапотоков WebRTC — использование API записи MediaStream. Этот API обеспечивает больший контроль над процессом записи и позволяет сохранять записанные данные на стороне сервера.

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function (stream) {
    const mediaRecorder = new MediaRecorder(stream);
    const recordedChunks = [];
    mediaRecorder.ondataavailable = function (event) {
      recordedChunks.push(event.data);
    };
    // Start recording
    mediaRecorder.start();
    // Stop recording after 10 seconds
    setTimeout(function () {
      mediaRecorder.stop();
      // Create a Blob from the recorded chunks
      const recordedBlob = new Blob(recordedChunks, { type: 'video/webm' });
      // Send the recorded data to the server
      const formData = new FormData();
      formData.append('video', recordedBlob, 'recorded-video.webm');
      fetch('/save-recorded-video', {
        method: 'POST',
        body: formData,
      })
        .then(function (response) {
          console.log('Recorded video saved successfully!');
        })
        .catch(function (error) {
          console.error('Error saving recorded video:', error);
        });
    }, 10000);
  })
  .catch(function (error) {
    console.error('Error accessing media devices:', error);
  });

WebRTC предоставляет несколько методов записи аудио и видео в веб-приложениях. В этой статье мы рассмотрели два популярных подхода: использование getUserMedia и MediaRecorder для записи на стороне клиента и использование API записи MediaStream для записи на стороне сервера. Реализуя эти методы, разработчики могут добавлять в свои приложения WebRTC мощные возможности записи, позволяя пользователям беспрепятственно создавать и обмениваться записанным аудио- и видеоконтентом.