html5怎么调用摄像头拍照

HTML5 提供了一种在网页上调用摄像头进行拍照的方法，这种方法被称为 getUserMedia API，getUserMedia API 允许网页访问用户的摄像头和麦克风，从而实现视频通话、拍照等功能，下面将详细介绍如何使用 HTML5 调用摄像头拍照。

1. 获取用户媒体设备

我们需要使用 getUserMedia API 来获取用户的媒体设备，这个 API 接受一个参数，即媒体设备的类型，可以是 "video"（摄像头）、"audio"（麦克风）或者两者的组合，在本例中，我们将使用 "video" 类型来获取摄像头。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 在这里处理摄像头的流
  })
  .catch(function(err) {
    console.log("发生错误：" + err);
  });

2. 创建视频元素

接下来，我们需要创建一个 video 元素来显示摄像头的实时画面，我们可以使用 JavaScript 的 document.createElement() 方法来创建一个新的 video 元素，并设置其 srcObject 属性为刚刚获取到的摄像头流。

var video = document.createElement("video");
video.srcObject = stream;
video.setAttribute("autoplay", "true");
document.body.appendChild(video);

3. 拍照功能实现

现在我们已经可以在网页上显示摄像头的实时画面了，接下来我们来实现拍照功能，要实现拍照功能，我们需要监听 video 元素的 click 事件，并在事件触发时调用 captureStream() 方法来捕获当前帧的画面，captureStream() 方法返回一个 MediaStream，我们可以将其转换为 Blob 对象，然后使用 URL.createObjectURL() 方法创建一个图片的 URL，我们可以将这个 URL 设置为一个 image 元素的 src 属性，从而实现拍照功能。

video.addEventListener("click", function() {
  var canvas = document.createElement("canvas");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  var image = document.createElement("img");
  image.src = dataURL;
  document.body.appendChild(image);
});

至此，我们已经实现了使用 HTML5 调用摄像头拍照的功能，用户可以点击视频画面来进行拍照，拍摄的照片将会显示在网页上。

相关问题与解答：

Q1：为什么有时候拍照后的图片是黑色的？

A1：这种情况通常是因为摄像头没有正确获取到权限，在使用 getUserMedia API 之前，需要确保用户已经授权访问摄像头，可以通过在页面上添加一个按钮来提示用户授权访问摄像头，当用户点击按钮时，再次调用 getUserMedia API，如果用户已经授权，那么这次调用将会成功获取到摄像头流。

Q2：如何保存拍照后的图片？

A2：在上述代码中，我们已经将拍照后的图片显示在了网页上，如果需要将图片保存到本地，可以使用 FileSaver.js 这个库来实现，需要在页面上引入 FileSaver.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

在拍照完成后，将图片转换为 Blob 对象，并使用 saveAs() 方法将其保存到本地：

var dataURL = canvas.toDataURL("image/png");
var imageBlob = dataURLtoBlob(dataURL);
saveAs(imageBlob, "photo.png");