如何创建一个网页来捕捉 phone 和 camputers 中的用户相机？

Question

我正在尝试构建一个网页，用于在 phone 和计算机上捕获用户的媒体流（拍摄身份证和此类文件的照片..），然后允许用户裁剪图像以去除不需要的部分，然后将文档的图片发送到 ocr 服务器进行处理。

我知道这是一项繁重的工作。我发现很多页面可以在计算机上运行，但在我的 phone ( android) 上无法正常工作我还不知道裁剪部分，我不知道如何将它发送到网站的服务器我想用它来进行 OCR。

如果您有任何帮助，我将永远感激不已

Answer 1

正如您所发现的，

getUserMedia() 在不同的浏览器和设备上工作不一致。（兼容性是这个领域众所周知的痛点。）您可以使用此 URL 中的示例来测试基本的快照功能。 https://webrtc.github.io/samples/src/content/getusermedia/canvas/

该示例代码将其结果放在普通的 2d canvas 中（canvases 实际上适用于多种浏览器。）

我不会在这里描述裁剪操作，只是说它适用于 canvas 元素，并将其结果放在另一个 canvas 中。您可以通过简单的网络搜索找到 plenty of implementations。

在 Javascript 中，一旦有了带有所需图像的 croppedCanvas，就可以像这样使用 toBlob()：

  var quality = 0.8
  croppedCanvas.toBlob(
     function callback (blob) {
       /* POST the blob here */
     }, 
     'image/jpg',
     quality);

在回调中你得到一个 Blob object containing the encoded (jpegged) image. You can then, from within the callback, POST it to your server with an ajax or fetch 操作。

我担心你的问题涉及很多主题，所以我没有为所有内容编写示例代码。但这应该让你开始。（我最近不得不自己爬过这一切，要弄清楚这一切是一场斗争。）

如何创建一个网页来捕捉 phone 和 camputers 中的用户相机？

How to create a webpage that captures the user's camera in phone and camputers?

html

camera

cross-browser

getusermedia