Отображение html-видео с помощью getusermedia

Question

Я хочу отобразить html-видео с помощью getusermedia (захваченного с помощью веб-камеры) после того, как пользователь нажал кнопку. Тег видео будет отображаться с помощью innerhtml.

Когда пользователь нажимает кнопку, отображается видео, но оно не захватывает веб-камеру.

<button id="rec" onclick="onBtnRecordClicked()">Record</button> 
<button id="stop" onclick="onBtnStopClicked()" disabled>Stop</button> 

<div id="videos-container"></div> 

<script> 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 

    document.getElementById('rec').onclick = function() { 
    var htmlElement = document.createElement('video'); 
    htmlElement.setAttribute('autoplay', true); 
    htmlElement.setAttribute('controls', true); 
    videosContainer.insertBefore(htmlElement, videosContainer.firstChild); 

    var mediaConfig = { 
      video: htmlElement, 
      onsuccess: function(stream) { 
       src: URL.createObjectURL(stream); 
      }, 
      onerror: function() { 
       alert('unable to get access to your webcam'); 
      } 
     }; 
     getUserMedia(mediaConfig); 
    } 

var videosContainer = document.getElementById('videos-container') || document.body; 

</script> 

Я получаю getUserMedia не определен в консоли.

код в jsfiddle https://jsfiddle.net/590c2mcp/

Answer 1

Там не в глобальном масштабе нет getUserMedia, вам нужно использовать метод getUserMedia из mediaDevices

navigator.mediaDevices.getUserMedia(mediaConfig); 

Answer 2

Чтобы GetUserMedia работать во всех браузерах, включая Chrome, у вас есть a два варианта:

1. Лучший вариант: Используйте adapter.js, официальное заполнение WebRTC, до Chrome unprefs the latest APIs. (https fiddle для Хрома):

   navigator.mediaDevices.getUserMedia({ video:true, audio:true }) 
    
       .then(stream => video.srcObject = stream) 
    
       .catch(log); 
    
   
    
   var log = msg => div.innerHTML += "<br>" + msg;

   <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 
    
   <video id="video" height="120" width="160" autoplay></video><br> 
    
   <div id="div"></div>

   Он прокладки и navigator.mediaDevices и srcObject.

2. Используйте устаревший API некоторое время дольше (https fiddle для Chrome):

   navigator.getUserMedia = navigator.mozGetUserMedia || 
    
            navigator.webkitGetUserMedia; 
    
   
    
   new Promise((y, n) => navigator.getUserMedia({ video:true, audio:true }, y, n)) 
    
       .then(stream => video.src = URL.createObjectURL(stream)) 
    
       .catch(log); 
    
   
    
   var log = msg => div.innerHTML += "<br>" + msg;

   <video id="video" height="120" width="160" autoplay></video><br> 
    
   <div id="div"></div>

   Хотя это может не работать в MS Edge.

Я не рекомендую второй вариант, более в том числе и его историческом контексте, поскольку есть еще много кода плавающей там что выглядит более или менее, как он (минус обещание обертка). После того, как вы начнете использовать constraints, you'll notice those have changed too, так придерживайтесь adapter.js.