Как заставить getUserMedia() работать со всеми браузерами

Я узнал о web-rtc, он говорит, что вы можете захватывать видео-камеру, Я использовал demo, так что это работало только на хром.

когда я открываю его на firefox, я получаю сообщение "getUserMedia() not supported in your browser." с другой стороны, когда я открою этот HTML5-rock-demo

он работал на 100%. какие изменения или плагины или что-то, что я пропустил, что позволяет getusermedia() работать.

Ответ 1

Проблема заключается не только в имени префикса функции; поток в разных браузерах работает по-разному. Здесь я проведу вас через это.

Я предполагаю, что вы уже создали элемент видео в переменной под названием video.

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

getUserMedia.call(navigator, {
    video: true,
    audio: true //optional
}, function (stream) {
    /*
    Here where you handle the stream differently. Chrome needs to convert the stream
    to an object URL, but Firefox 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();
});

Это должно охватывать вас для Firefox, Chrome и Opera. IE и Safari еще не поддерживают его.

Еще одна неприятная вещь, о которой нужно знать, - это отключить камеру, если вы хотите прекратить ее использовать, прежде чем покинуть веб-страницу. Используйте эту функцию:

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

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

Ответ 2

Fiddles

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

Ответ 3

Так как Safari 11 отключен, это работает повсюду (тестируется в последних версиях Chrome, Firefox и 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);

Ответ 4

getUserMedia должен иметь префикс webkit- или moz-. Первый пример только с префиксом webkit-. Поэтому он никогда не будет работать на Firexox, только Chrome и Safari.

В примере кода не отображается префикс...

Префикс может быть выполнен следующим образом:

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