html +JavaScript 实现camera调用摄像头系列

作者：System 时间：2024年08月21日分类：所有,html 字数：910

这篇文章距离上次修改已过257天，其中的内容可能已经有所变动。

在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），如果允许，则用户的摄像头会开始向页面提供实时视频流。如果用户拒绝或者浏览器不支持，会抛出错误，并显示相应的提示信息。

html +JavaScript 实现camera调用摄像头系列

评论已关闭

推荐阅读