html +JavaScript 实现camera调用摄像头系列
warning:
这篇文章距离上次修改已过282天，其中的内容可能已经有所变动。
在HTML中使用JavaScript调用摄像头可以通过navigator.mediaDevices.getUserMedia() API实现。以下是一个简单的例子，展示了如何在网页中获取视频流并显示在<video>元素中。
<!DOCTYPE html>
<html>
<head>
<title>Camera Example</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<script>
const videoElement = document.getElementById('video');
// 检查浏览器是否支持getUserMedia
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }) // 请求视频流
.then(function(stream) {
videoElement.srcObject = stream; // 将视频流设置到<video>元素
})
.catch(function(err) {
console.error("Error: ", err); // 处理错误
});
} else {
alert('不幸的是，你的浏览器不支持getUserMedia');
}
</script>
</body>
</html>在这个例子中，<video>元素用于显示摄像头捕获的内容。navigator.mediaDevices.getUserMedia函数会请求获取视频流（video），如果允许，则用户的摄像头会开始向页面提供实时视频流。如果用户拒绝或者浏览器不支持，会抛出错误，并显示相应的提示信息。
评论已关闭