Как сделать снимок в браузере и загрузить его по протоколу http? - PullRequest
Новая
       86

Как сделать снимок в браузере и загрузить его по протоколу http?

0 голосов
/ 26 ноября 2018

Я хочу сделать снимок с камеры и загрузить его на сервер.Мои целевые среды - браузер EDGE для Hololens и браузеры для ПК (по крайней мере, последние версии Chrome или Firefox).

Я пробовал использовать HTML5 <input type="file" accept="image/*" capture="camera"> Однако как в Hololens Edge, так и в ПК Chrome атрибут захвата игнорируется(В Chrome для 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.Согласно хром

«Безопасные источники» - это источники, которые соответствуют по крайней мере одному из следующих шаблонов (схема, хост, порт):

(https,*, *)

(wss, *, *)

(*, localhost, *)

(*, 127/8, *)

(*, :: 1/128, *)

(файл, *, -)

(расширение хрома, *, -)

Какя могу решить эту проблему?

1 Ответ

0 голосов
/ 27 ноября 2018

Настройте локальный хост с " самозаверяющим SSL-сертификатом " (поисковая ссылка Google), чтобы у вас был https-сервер.

Это нормально для вашей среды тестирования, но, конечно,не для производства.

Так что, если это настроено и работает, чтобы сделать снимок, вам нужно нарисовать ваше видео на canvas, чтобы вы получили нужное изображение.

...