我該如何顯示getUserMedia（）

我在網上找到了一些代碼來訪問我的攝像頭。它訪問攝像頭，但不顯示它所看到的內容。我知道這是正常的，因爲文檔中沒有html，但我想知道如何顯示結果。我找到的代碼是：我該如何顯示getUserMedia（）

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

我感謝您的幫助。

來源

2017-02-18 Theodore Tremblot

您可能會遺失HTML中的video標記，用於「轉儲」攝像頭的流。由於通過標籤名稱（video）引用標籤並不是一個好主意，所以應該使用ID（例如，#webcam）。只要創建一個視頻標籤與ID：

<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工作的例子。

此外，請記住允許網絡瀏覽器使用您的攝像頭和麥克風。

來源

2017-02-18 20:10:01 Wikiti

非常感謝。我測試了它，它工作。我將使用移動設備的代碼（android和ios）。我不知道這是否會改變任何事情。無論如何，它在jsFiddle上工作。再次感謝！哦，是的，我差點忘了。對於我的應用程序，我需要捕捉視頻和照片。如果您可以告訴我如何拍攝照片和視頻並將其存儲在文件中，那就太好了。 –

我在Android設備上嘗試過它，並沒有要求權限。因此它不起作用（我只是假設，因爲它沒有要求權限它不起作用，但我不知道肯定。）。 –

@TheodoreTremblot對於你的第一個評論，因爲這是另一個問題，你應該可以在互聯網上搜索一些信息;如果您遇到困難，請創建另一個StackOverflow問題，因爲它與此不直接相關。現在，爲了迴應您的第二條評論，我嘗試了使用Chrome和Firefox在Android設備上使用JSFiddle（4.4.4）。你能否提供更多信息？有關兼容性的更多信息，請查看[本頁]（http://caniuse.com/#feat=stream）。 – Wikiti

我該如何顯示getUserMedia（）

回答

相關問題