1
我尝试从网络摄像头拍摄网络浏览器的快照。当我在下面使用此代码时，它适用于移动设备（Google Chrome on Android），但不适用于Google Chrome on Desktop。视频不显示。我收到错误名称：TrackStartError或DevicesNotFoundError。它使用外部USB摄像头进行测试。从网络摄像头拍摄网站快照
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0 auto;
max-width: 480px;
}
video, img {
max-width: 100%;
background-color: #f2f3f5;
}
video {
height: 400px;
}
</style>
</head>
<body>
<div id="container">
<video autoplay></video>
</div>
<script>
var video = document.querySelector('video'), canvas;
function takeSnapshot() {
var img = document.querySelector('img') || document.createElement('img');
var context;
var width = video.offsetWidth, height = video.offsetHeight;
canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
var constraints = {audio: false, video: {width: 640, height: 480}};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
video.addEventListener('click', takeSnapshot);
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
</script>
</body>
</html>我出的任何选项:( 我做错了吗？它可以工作在最常用的桌面网络浏览器。