Подтвердить что ты не робот

Доступ к камере из браузера

Можно ли получить доступ к камере (встроенной в Яблоки) из браузера?

Оптимальное решение - клиентский javascript. Хотите избежать использования Java или Flash.

4b9b3361

ОТВЕТЫ

Ответ 1

Спецификация HTML5 разрешает доступ к веб-камерам, но в последнее время я проверил, он далеко не финализирован и имеет очень небольшую поддержку браузера.

Это ссылка, с которой вы начали: http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Вероятно, вам придется использовать flash, если вы хотите, чтобы он работал в кросс-браузере.

Проект W3

Ответ 2

Для этого есть замечательное решение от Дэнни Маркова. Он использует метод navigator.getUserMedia и должен работать в современных браузерах. Я успешно протестировал его с Firefox и Chrome. IE не работал:

Вот демо:

https://tutorialzine.github.io/pwa-photobooth/

Ссылка на страницу описания Дэнни Марковиса:

http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/

Ссылка на GitHub:

https://github.com/tutorialzine/pwa-photobooth/

Ответ 4

Вы можете использовать HTML5 для этого:

<video autoplay></video>
<script>
  var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, onFailSoHard);
</script>

Источник

Ответ 5

Начиная с 2017 года WebKit объявляет о поддержке WebRTC в Safari

Теперь вы можете получить к ним доступ с помощью video и стандартного javascript WebRTC

например.

var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = '200px';
video.style.width = '200px';

/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
var constraints = {
  audio: false,
  video: {
   facingMode: facingMode
  }
};

/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
  video.srcObject = stream;
});

Поиграйте с ним.