web-dev-qa-db-ja.com

getUserMedia（）をすべてのブラウザで動作させる方法

私はweb-rtcについて学びます、それはあなたがビデオカメラをキャプチャできると言います、私は demo を使用しました、これはうまくいきましたchromeのみ..

firefoxで開くと、メッセージ"getUserMedia() not supported in your browser."が表示されますが、これを開くと、もう一方のメッセージが表示されます HTML5-rocks-demo

100％働きました。 getusermedia()が機能する変更またはプラグイン、または見逃しているもの。

javascripthtml5html5-videowebrtc
18
Muath

問題は、接頭辞付きの関数名だけではありません。提供されるストリームは、ブラウザごとに動作が異なります。ここでは、その手順を説明します。

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

これはFirefoxの場合、ChromeとOpera。IEとSafariはまだサポートしていません。

気になる可能性があるもう1つの面倒なことは、Webページを離れる前にカメラの使用を停止する場合に、カメラの電源を切る方法です。この機能を使用します。

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

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

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);
11
Johnny Oin

フィドル

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の前にwebkit-またはmoz-を付ける必要があります。最初の例には、webkit-というプレフィックスのみが付いています。そのため、Firexoxでは動作せず、ChromeとSafariのみです。

コード例には接頭辞が表示されていません...

プレフィックスは次の方法で実行できます。

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