web-dev-qa-db-fra.com

Accéder à la caméra depuis un navigateur

Est-il possible d'accéder à la caméra (intégrée aux pommes) à partir d'un navigateur?

La solution optimale serait le javascript côté client. Vous cherchez à éviter d'utiliser Java ou Flash.

javascriptcamera
32
Justin

La spécification HTML5 permet d'accéder à la webcamera, mais la dernière fois que j'ai vérifié, elle est loin d'être finalisée et a très, très peu de support de navigateur.

Ceci est un lien pour vous aider à démarrer: http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Vous devrez probablement utiliser Flash si vous voulez qu'il fonctionne sur plusieurs navigateurs.

brouillon W

14
xbonez

Depuis 2017, WebKit annonce la prise en charge de WebRTC sur Safari

Vous pouvez maintenant y accéder avec video et le javascript WebRTC standard

Par exemple.

var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = '200px';
video.style.height = '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;
});

Jouez avec.

8
vadi taslim

Il y a une solution vraiment cool de Danny Markov pour cela. Il utilise la méthode navigator.getUserMedia et devrait fonctionner dans les navigateurs modernes. Je l'ai testé avec succès avec Firefox et Chrome. IE ne fonctionnait pas:

Voici une démo:

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

Lien vers la page de description de Danny Markovs:

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

Lien vers GitHub:

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

5
alex

Possible avec HTML5.

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

2
Justin

Vous pouvez utiliser HTML5 pour cela:

<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>

Source

1
Daniil Ryzhkov

Tutoriel vidéo: Accéder à la caméra avec HTML5 et l'API appMobi vous sera utile.

Vous pouvez également essayer la méthode getUserMedia (prise en charge par Opera 12)

enter image description here

1
blasteralfred Ψ