JS 实现调用网络摄像头及常见错误处理
调用摄像头
在网页中调用网络摄像头是一个常见的需求，在 web 中，我们可以使用 HTML5 中的 getUserMedia() 方法来获取摄像头的视频流，再利用 Canvas 技术实现对摄像头视频的处理。使用 getUserMedia() 方法时，需要用户授权方可使用摄像头。
// 判断浏览器是否支持
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.getElementById('myVideo');
// 兼容不同的浏览器
video.src = window.URL.createObjectURL(stream) || stream;
// 播放视频
video.play();
}).catch(function(err) {
console.log(err);
});
}
在调用 getUserMedia() 方法时，其中的参数可以设置调用音频、摄像头等。在本示例中，我们使用了 { video: true } 选项来获取摄像头的视频流。
常见错误处理
在调用摄像头时，可能会遇到一些错误。我们需要在代码中进行错误处理，避免代码运行失败。
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.getElementById('myVideo');
video.src = window.URL.createObjectURL(stream) || stream;
video.play();
}).catch(function(err) {
// 处理错误
console.log('getUserMedia error:', err);
alert('摄像头调用失败，请检查是否授权');
});
}
在上述代码中，我们添加了一个错误处理的函数来捕获错误。如果在调用摄像头失败时，会提示用户检查是否授权。同时在控制台输出错误信息以便调试。
示例一
下面是一个简单的示例，展示了如何调用摄像头并实时显示视频流。
<html>
<head>
<title>调用摄像头</title>
<meta charset="utf-8">
</head>
<body>
<div>
<video id="myVideo" width="480" height="360"></video>
</div>
<script>
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.getElementById('myVideo');
video.src = window.URL.createObjectURL(stream) || stream;
video.play();
}).catch(function(err) {
console.log('getUserMedia error:', err);
alert('摄像头调用失败，请检查是否授权');
});
}
</script>
</body>
</html>
在浏览器中打开上述 HTML 文件，即可调用摄像头并实时显示视频流。
示例二
下面是另一个示例，展示了如何添加滤镜来处理摄像头视频。
<html>
<head>
<title>调用摄像头并添加滤镜</title>
<meta charset="utf-8">
</head>
<body>
<div>
<video id="myVideo" width="480" height="360"></video>
<canvas id="myCanvas" width="480" height="360"></canvas>
</div>
<script>
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
var video = document.getElementById('myVideo');
video.src = window.URL.createObjectURL(stream) || stream;
video.play();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
setInterval(function() {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 添加滤镜
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(0, 0, canvas.width, canvas.height);
}, 100);
}).catch(function(err) {
console.log('getUserMedia error:', err);
alert('摄像头调用失败，请检查是否授权');
});
}
</script>
</body>
</html>
在浏览器中打开上述 HTML 文件，即可调用摄像头并实时显示视频流，并将视频添加蓝色的滤镜效果。
以上就是如何使用 JS 实现调用网络摄像头及常见错误处理的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现调用网络摄像头及常见错误处理 - Python技术站
微信扫一扫 
支付宝扫一扫 