ウェブストリームが表示されないのはなぜですか？

Question

アンドロイドデバイスで以下のコードをテストしようとしましたが、動作しませんでした（スイッチのボタンは表示されましたが、カメラの出力は表示されませんでした）。私はそれをMacでテストすることにしました。それは機能しました（カメラの出力とボタンを示しただけですが、ボタンは何もしませんでした）。ここに私のコードは（それのjavascriptの部分。）である：

var constraints = { 
    audio: true, 
    video: { 
     width: 1280, 
     height: 720 
    } 
}; 
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { 
    var video = document.querySelector('#webcam'); 
    video.srcObject = mediaStream; 
    video.onloadedmetadata = function(e) { 
     video.play(); 
    }; 
}).catch(function(err) { 
    console.log(err.name + ": " + err.message); 
}); 
var front = false; 
document.getElementById('flip-button').onclick = function() { 
    front = !front; 
}; 
var constraints = { 
    video: { 
     facingMode: (front ? "user" : "environment") 
    } 
}; 

ここに私のコードのHTML部分です：

<video id="webcam"> 
</video> 
<button Id="flip-button">switch 
</button> 

ここに私のコードのCSSの一部です：

#webcam {} #flip-button { 
    background-color: #202060; 
    height: 15%; 
    width: 20%; 
    border: none; 
    margin-left: 40%; 
} 

御時間ありがとうございます。

Answer 1

あなたのIDは間違っています。 を#videoに置き換えてください。

それとも、この行削除：IDは、下位互換性のためにグローバルスコープで暗黙的に利用可能であるため、

var video = document.querySelector('#webcam'); 

後者の作品を。いくつかの人々はこれに眉をひそめていますが、きちんとした手品をするのはきれいです。

初心者の助言：ブラウザのWebコンソールでエラーがないか常に確認してください。ここでは、言った：

querySelectorから結果が nullたことが手掛かりだった

TypeError: video is null 

。

PS：また、constraintsの2つの競合する定義があり、facingModeは未使用のままです。最後に、frontを反転させない限り、多くのことが行われることはありません。