Как отобразить getUserMedia()

Question

Я нашел код онлайн для доступа к веб-камере. Он обращается к веб-камере, но не показывает, что он видит. Я знаю, что это нормально, потому что в документе нет html, но мне было интересно, как я могу отобразить результат. Код, который я нашел, это:

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); }); 

Благодарю вас за помощь.

Answer 1

Возможно, вы потеряли в своем HTML тег video, используемый для «сброса» потока веб-камеры. Так как не рекомендуется ссылаться на тег по имени его тега (video), вы должны использовать идентификатор (например, #webcam). Просто создайте тег видео с этим идентификатором:

<video id="webcam"></video> 

Обновить код, в document.querySelector, чтобы ссылаться на ваш новый тег:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints) 
.then(function(mediaStream) { 
    var video = document.querySelector('#webcam'); // <- Here 
    video.srcObject = mediaStream; 
    video.onloadedmetadata = function(e) { 
    video.play(); 
    }; 
}) 
.catch(function(err) { console.log(err.name + ": " + err.message); }); 

Вот рабочий пример на JSFiddle.

Кроме того, не забудьте разрешить веб-браузеру использовать веб-камеру и микрофон.