navigator.mediaDevice.getUserMedia ... как получить доступ к фактическому потоку? - PullRequest
Новая
       22

navigator.mediaDevice.getUserMedia ... как получить доступ к фактическому потоку?

0 голосов
/ 17 сентября 2018

Я тестирую кусок кода, взятый из https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia. Я пытаюсь записать данные с микрофона, чтобы получить доступ к ним для других пользователей и записать их в базу данных. На самом деле я даже не получаю данные с веб-камеры в любом случае. 

// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
 video.onloadedmetadata = function(e) {
 video.play();
  };
  })
.catch(function(err) { console.log(err.name + ": " + err.message); }); //               always check for errors at the end.

Для меня приведенный выше код пытается открыть пользовательский носитель, и в случае успеха информация о потоке из mediaStream сохраняется в видео, а видео воспроизводится. Проблема в том, что mediaStream не предоставляется самим getUserMedia. Чтобы сказать это ясно: даже если getUserMedia работает и разрешение предоставлено, ГДЕ Я ПОЛУЧУ ОТ ПОТОКА? ты за ответ

1 Ответ

0 голосов
/ 17 сентября 2018

Это работает для меня, я вижу видеопоток в браузере.

https://granite -ambulance.glitch.me 

    const video = document.querySelector('video');

    async function stream() {
      
      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
        video.srcObject = mediaStream;
      } catch (e) {
        console.error(e)
      }
      video.onloadedmetadata = async function(event) {
        try {
          await video.play();
        } catch (e) {
          console.error(e)
        }
      }
    }

    stream()
<video></video>
...