使用getusermedia顯示html視頻

我希望在用戶單擊按鈕後使用getusermedia（捕獲使用網絡攝像頭）顯示html視頻。視頻標籤將使用innerhtml進行顯示。使用getusermedia顯示html視頻

當用戶點擊按鈕時，視頻顯示，但它不捕獲網絡攝像頭。

<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/

來源

2016-03-14 Mick Jack

請參閱https://jsfiddle.net/srn9db4h/ – jib

@jib該代碼無法在Chrome上運行？我在鉻測試，但沒有視頻。它在Firefox上工作..但我的網站功能主要在鉻.. –

這是一個[更新的小提琴]（https://jsfiddle.net/jib1/k8rened5/）應該在Chrome中工作（它不支持'srcObject '還）。請注意，這仍然需要Chrome中的[adapter.js]（https://github.com/webrtc/adapter）填充或啓用* chrome：// flags /＃enable-experimental-web-platform-features *。或者，您可以使用已棄用的非promise API ['navigator.getUserMedia']（https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia）。 – jib

代碼有一個在全球範圍內沒有getUserMedia，您需要使用getUserMedia方法從mediaDevices

navigator.mediaDevices.getUserMedia(mediaConfig);

來源

2016-03-14 06:49:47

我在輸入年代碼後仍然沒有定義getUserMedia。 –

爲了使getUserMedia工作在所有瀏覽器，包括Chrome，你有兩個選擇：

最好的選擇：使用adapter.js，官方WebRTC填充，直到Chrome unprefs the latest APIs。（適用於Chrome的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。

使用棄用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邊工作。

我不建議第二個選項，更包括它的歷史背景，因爲仍然有浮在那裏，看起來或多或少大量的代碼像它（減去承諾包裝）。一旦你開始使用constraints, you'll notice those have changed too，那麼堅持adapter.js。

來源

2016-03-15 17:15:31 jib

使用getusermedia顯示html視頻

回答

相關問題