web-dev-qa-db-fra.com

comment faire fonctionner getUserMedia () sur tous les navigateurs

J'apprends sur web-rtc , il dit que vous pouvez capturer une caméra vidéo, j'ai utilisé démo , et bien cela a fonctionné chrome uniquement ..

quand je l'ouvre sur firefox j'obtiens un message "getUserMedia() not supported in your browser." d'autre part quand j'ouvre ceci HTML5-rocks-demo

cela a fonctionné à 100%. quels changements ou plugins ou quelque chose qui me manque et qui permettent à getusermedia() de fonctionner.

javascripthtml5html5-videowebrtc
18
Muath

Le problème n'est pas seulement le nom de fonction préfixé; le flux fourni fonctionne différemment dans les différents navigateurs. Ici, je vais vous guider à travers cela.

Je suppose que vous avez déjà configuré un élément vidéo dans la variable appelée video.

//I don't usually like to overwrite publicly accessible variables, but that's just me
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var cameraStream;

getUserMedia.call(navigator, {
    video: true,
    audio: true //optional
}, function (stream) {
    /*
    Here's where you handle the stream differently. Chrome needs to convert the stream
    to an object URL, but Firefox's stream already is one.
    */
    if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
    } else {
        video.src = stream;
    }

    //save it for later
    cameraStream = stream;

    video.play();
});

Cela devrait vous couvrir pour Firefox, Chrome et Opera. IE et Safari ne le prennent pas encore en charge).

Une autre chose potentiellement ennuyeuse à savoir est de savoir comment éteindre l'appareil photo si vous souhaitez arrêter de l'utiliser avant de quitter la page Web. Utilisez cette fonction:

function stopWebCam() {
    if (video) {
        video.pause();
        video.src = '';
        video.load();
    }

    if (cameraStream && cameraStream.stop) {
        cameraStream.stop();
    }
    stream = null;
}
27
brianchirls

Depuis Safari 11 est sorti, cela fonctionne partout (testé sur les versions récentes de Chrome, Firefox et Safari 11):

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  video.srcObject = stream;
  video.play();
}

function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(successCallback)
  .catch(errorCallback);
11
Johnny Oin

Violons 

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);
8
Muath

getUserMedia doit être préfixé avec webkit- ou moz-. Le premier exemple est uniquement préfixé avec webkit-. Pour cela, il ne fonctionnera jamais sur Firexox, seulement Chrome et Safari.

L'exemple de code n'affiche pas le préfixe ...

Le préfixe peut être fait de cette manière:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
1
Mikael Holmgren