Question

我试图在Android设备上测试下面的代码，它不起作用（出现了切换按钮，但相机输出没有。）。然后我决定在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

你错了。将#webcam替换为#video。

或者只是删除这一行：

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

后者的工作原理是因为在全局范围内隐式提供了ID以实现向后兼容性。有些人对此不以为然，但整齐的小提琴很整洁。

初学者的一些建议：请务必检查浏览器的网络控制台是否有错误。在这里说：

TypeError: video is null

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

PS：您还有constraints的两个竞争定义，未使用facingMode。最后，翻转front不会做太多，除非再次使用front，否则不会。

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

1 个答案: