如何使用 javascript 访问移动设备摄像头？

Question

我想编写一个网络应用程序（html+css+javaScript），当它在带有摄像头的设备（如手机）上运行时，应该能够将此摄像头用作条形码扫描仪。我知道有条码阅读器库，但我想尝试编写自己的扫描仪。 （因为我想详细了解它的工作原理。）

加载网络应用后，用户应允许该应用使用摄像头。但是其他一切都应该在没有用户交互的情况下工作，即在允许使用相机后必须不需要点击任何按钮。用户接下来的工作是将相机放在条形码上，直到他按下完成按钮或直到他关闭浏览器。但是在扫描时，不需要敲击。

我的应用应该经常从相机视频流中生成快照。这样的快照不打算显示（用户可以直接从摄像头观看视频流），也不打算存储在任何地方。它必须在 javaScript 中作为位图可用，即二维数组，其中该数组中的每个项目都保存单个像素的 RGB 值。

当脚本接收到这样的数组时，它会对其进行分析并尝试识别条形码。如果成功识别代码，则将此代码发送到服务器。然后应该拍摄下一个快照。此外，如果找不到代码，则应拍摄新的快照。这会无休止地重复，直到用户退出扫描。

很高兴拥有：
我不需要相机能够看到的全屏区域。我只需要一个小的矩形剪裁（例如 640x320 像素）。

我知道你可以使用这个 html-sn-p 将视频上传到服务器

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="video" accept="video/*" capture>
  <input type="submit" value="Upload">
</form>

但我不知道这如何帮助我解决我的问题。你能帮帮我吗？

（我不知道这是否有区别，但我使用 jQuery。）

Answer 1

看看getUserMedia API，它可以让你提示用户是否允许在网络上使用他们设备的相机，纯粹通过JS。然后，您可以将输入作为流进行操作。

请注意，iOS 仍然不支持此功能，唯一真正的替代方法是要求用户使用文件上传/blob 拍摄图片，然后在该图像中搜索条形码。

编辑：链接到none deprecated method