我试图在安卓设备上测试下面的代码,它没有工作(开关按钮出现但相机输出没有。)。然后我决定在 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%;
}
感谢您的宝贵时间。
最佳答案
你弄错了你的ID。将 #webcam
替换为 #video
。
或者只是删除这一行:
var video = document.querySelector('#webcam');
后者之所以有效,是因为 id 在全局范围内隐式可用以实现向后兼容性。有些人对此不以为然,但这对于整洁的 fiddle 来说很整洁。
一些新手建议:始终检查浏览器的 Web 控制台是否有错误。这里说:
TypeError: video is null
这是 querySelector
的结果为 null
的线索。
PS:您还有两个相互竞争的 constraints
定义,使您的 facingMode
未被使用。最后,翻转 front
不会有太大作用,除非再次使用 front
,但事实并非如此。
关于javascript - 为什么我的网络流不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42326674/