Метод Navigator: getUserMedia()

Устаревший Navigator.getUserMedia() метод запрашивает у пользователя разрешение на использование до одного устройства ввода видео (например, веб-камеры или общего экрана) и до одного устройства ввода аудио (например, микрофона) в качестве источника для MediaStream.

Если разрешение предоставлено, a MediaStream со звуковыми и/или видеодорожками, взятыми с этих устройств, передаётся указанному обработчику успеха. Если разрешение отказано, совместимых устройств ввода нет или произошла любая другая ошибка, обработчик ошибок выполняется с объектом, описывающим возникшую проблему. Если пользователь не сделает выбор вообще, ни один обработчик не выполняется.

constraints

Объект, определяющий типы запрошенных медиаданных и требования к каждому типу. Для получения подробной информации см. раздел «Ограничения» в современном методе MediaDevices.getUserMedia(), а также статью Возможности, ограничения и настройки.

successCallback

Функция, которая вызывается, когда запрос на доступ к медиаданным одобрен. Функция вызывается с одним параметром: объектом MediaStream, содержащим поток медиаданных. Ваш обработчик может затем назначить поток нужному объекту (например, элементу <audio> или <video>), как показано в следующем примере:

function successCallback(stream) {
  const video = document.querySelector("video");
  video.srcObject = stream;
  video.onloadedmetadata = (e) => {
    // Do something with the video here.
  };
}

errorCallback

При ошибке вызывается функция, указанная в errorCallback, с объектом в качестве единственного аргумента; этот объект моделируется по DOMException.

Ничего (undefined).

Вот пример использования getUserMedia(), включая код для обработки префиксов различных браузеров. Обратите внимание, что это устаревший способ сделать это: см. раздел «Примеры» в MediaDevices.getUserMedia() для современных примеров.

navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    (stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
      };
    },
    (err) => {
      console.error(`The following error occurred: ${err.name}`);
    },
  );
} else {
  console.log("getUserMedia not supported");
}

• MediaDevices.getUserMedia() который заменяет этот устаревший метод.
• WebRTC - стартовая страница API
• API захвата медиа и потоков - API для объектов потоков медиа
• Снимок веб-камеры - обучающее пособие по использованию getUserMedia() для фотосъёмки вместо видео.