javascript - 为什么我的网络流不显示？

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。将 #webcam 替换为 #video。

或者只是删除这一行:

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

后者之所以有效，是因为 id 在全局范围内隐式可用以实现向后兼容性。有些人对此不以为然，但这对于整洁的 fiddle 来说很整洁。

一些新手建议:始终检查浏览器的 Web 控制台是否有错误。这里说:

TypeError: video is null

这是 querySelector 的结果为 null 的线索。

PS:您还有两个相互竞争的 constraints 定义，使您的 facingMode 未被使用。最后，翻转 front 不会有太大作用，除非再次使用 front，但事实并非如此。