摄像头操控,轻松搞定！

掌上摄像头：用 JavaScript 随心控制你的摄像头

1. 获取摄像头权限：敲门，等候允许

打开摄像头的第一步就是获取用户的允许。我们使用 navigator.mediaDevices.getUserMedia()，这是一个神奇的函数，可以询问用户是否愿意让我们使用他们的摄像头。如果用户慷慨地点了 "允许"，我们将获得一个媒体流，它包含摄像头捕获的实时视频。

2. 显示摄像头画面：让画面动起来

有了媒体流，我们就可以将摄像头画面显示出来了。我们只需将流分配给视频元素的 srcObject 属性，即可让摄像头画面在我们眼前呈现。

3. 开启/关闭摄像头：开关自如

现在，是时候玩转摄像头开关了！为此，我们需要获取摄像头的轨道（track），然后使用 stop() 方法关闭摄像头。当我们想重新打开摄像头时，只需再次调用 getUserMedia() 并将媒体流分配给视频元素即可。

4. 关闭摄像头指示灯：熄灯号

关闭摄像头指示灯与打开/关闭摄像头类似。我们只需将视频元素的 srcObject 属性设置为 null 即可。这样做会关闭摄像头，让指示灯熄灭。

示例代码：让你的代码动起来

// 获取摄像头权限
navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    // 显示摄像头画面
    video.srcObject = stream;
  })
  .catch((error) => {
    console.error('摄像头权限获取失败：', error);
  });

// 开启/关闭摄像头
const toggleCamera = () => {
  if (video.srcObject) {
    // 关闭摄像头
    video.srcObject.getTracks().forEach((track) => {
      track.stop();
    });
  } else {
    // 开启摄像头
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        video.srcObject = stream;
      })
      .catch((error) => {
        console.error('摄像头权限获取失败：', error);
      });
  }
};

// 关闭摄像头指示灯
const turnOffCameraLight = () => {
  video.srcObject = null;
};

5 个常见问题解答

1. 为什么我的摄像头不能正常工作？
   • 确保你已经允许了摄像头权限，并且你的摄像头已正确连接。
2. 如何仅开启前置摄像头？
   • 在 getUserMedia() 中指定 { video: { facingMode: "user" } }。
3. 如何获取视频流的高清版本？
   • 在 getUserMedia() 中指定 { video: { width: 1280, height: 720 } }。
4. 如何旋转摄像头画面？
   • 旋转视频元素或使用 CSS 转换。
5. 如何在移动设备上控制摄像头？
   • 使用 navigator.mediaDevices.enumerateDevices() 获取设备的摄像头信息。

结论

利用 JavaScript，摄像头控制变得轻而易举。从获取权限到关闭指示灯，你都可以轻松掌握摄像头功能。通过理解这些步骤和代码示例，你可以开发出更强大的摄像头控制应用程序，尽享摄像头功能带来的便利。