Question

我想从相机捕获照片并将其上传到服务器。我的目标环境是用于Hololens的EDGE浏览器和PC浏览器（至少是最新版本的Chrome或Firefox）。

我尝试使用HTML5 <input type="file" accept="image/*" capture="camera">，但是在Hololens Edge和PC Chrome中，捕获属性都将被忽略。（这与Android版Chrome一样）

我尝试过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时不播放。根据{{3}}

“安全原产地”是指与以下至少一项匹配的原产地   （方案，主机，端口）模式：

（https，*，*）

（wss，*，*）

（*，localhost，*）

（*，127/8，*）

（*，:: 1/128，*）

（文件，*，—）

（chrome-extension，*，—）

我该如何解决这个问题？

Answer 1

使用“ self-signed SSL certificate”（Google搜索链接）设置本地主机，以便拥有https服务器。

这对于您的测试环境是可以的，但对于生产环境而言当然不是。

因此，如果设置成功并且可以拍摄照片，则需要将视频绘画到canvas上，这样才能获得所需的图像。

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

1 个答案: