如何在浏览器中拍照并使用http协议上传？答案

【问题标题】：How to take a picture in a browser and upload it with http protocol?如何在浏览器中拍照并使用http协议上传？
【发布时间】：2019-04-28 01:01:20
【问题描述】：

我想从相机中捕捉照片并将其上传到服务器。我的目标环境是用于 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

“安全来源”是与以下至少一项匹配的来源（方案、主机、端口）模式：

(https, *, *)

(wss, *, *)

(*,本地主机, *)

(*, 127/8, *)

(*, ::1/128, *)

(文件, *, —)

(chrome-extension, *, —)

我该如何解决这个问题？

【问题讨论】：

标签： javascript photo capture hololens

【解决方案1】：

使用“self-signed SSL certificate”（谷歌搜索链接）设置一个本地主机，这样你就有一个 https 服务器。

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

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

【讨论】：

我想在生产环境中使用 http，因为视频确实在 localhost 中播放。
没错。它适用于localhost，仅用于测试。但是，如果您使用本地 IP（无论是什么，例如 http://192.168.2.17）打开浏览器，它就不会运行。正如您在帖子中所写的那样，getUserMedia 需要 https。除此之外，在 2018 年，一切都应该在安全的环境中运行。
这不是我问的。我知道如果我使用我的 ip 它不起作用，因为我已经提到了被认为是“安全来源”的东西。我要问的是另一种拍照方式。