javascript - 如何在浏览器中拍照并使用http协议(protocol)上传？

Question

我想用相机拍摄一张照片并将其上传到服务器。我的目标环境是用于 Hololens 的 EDGE 浏览器和 PC 浏览器(至少是最新版本的 Chrome 或 Firefox)。

我试过使用 HTML5 <input type="file" accept="image/*" capture="camera">然而，在 Hololens Edge 和 PC Chrome 中，捕获属性都被忽略了。(这在 Chrome for Android 中应该正常工作)

我试过了getUserMedia .

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

然后:从正在播放的视频中获取图片。

但是getUserMedia是一项强大的功能，我需要安全来源。它使用 localhost 播放, 但不是当我使用 localIP反而。根据chromium

“Secure origins” are origins that match at least one of the following (scheme, host, port) patterns:

(https, *, *)

(wss, *, *)

(*,localhost, *)

(*, 127/8, *)

(*, ::1/128, *)

(file, *, —)

(chrome-extension, *, —)

我该如何解决这个问题？

Answer 1

设置一个带有“self-signed SSL certificate”(谷歌搜索链接)的本地主机，这样你就有了一个 https 服务器。

这适用于您的测试环境，但当然不适用于生产环境。

因此，如果已设置且有效，要拍摄照片，您需要将视频绘制到 canvas 上，这样您就可以获得所需的图像。