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）でタグを参照することはお勧めできませんので、代わりにIDを使用する必要があります（たとえば、#webcam）。ただ、そのIDでvideoタグを作成します。

<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上の作業例です。

また、ウェブブラウザでウェブカメラとマイクを使用できるようにしてください。