web-dev-qa-db-ja.com

Chrome）でgetUserMediaを使用する方法

私は単純なアプリケーションを開発しています。ここでは、getUserMediaを使用してカメラとマイクにアクセスしようとしています。デスクトップChrome and Android Chrome.

navigator.getUserMedia = navigator.getUserMedia
        || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var constraints = "";
if (mediaType === "audio,video") {
    constraints = {
        audio : true,
        video : true
    };
} else {
    constraints = {
        audio : true,
        video : false
    };
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
iosiphoneipadgoogle-chromewebrtc
15
Rao

...しかし、iPhoneやiPad Chromeでは機能しません。

chrome iPhoneまたはiPadのアプリは、「フル」バージョンのChromeを実行していません。その機能はiOSプラットフォームに制限されています。したがって、getUserMediaなどはおそらく動作しません Safari/Appleがサポートする になるまで利用できません。

別の質問からの引用 ：

Appleポリシーにより、他のブラウザーはwebRTCをサポートしないバージョンのwebkitを使用することを強制されるため、iOS上のWebアプリでwebRTCがサポートされなくなります。 webkitでのアクティビティは変化を示唆していますが、これが上陸するまでの時間は数か月です。

15
wpp

私の理解（私はMozillaエンジニアです）は、ChromeはこれまでのところwebrtcまたはgetUserMediaをサポートしていないことです。

8
jesup

「navigator.getUserMedia」は非推奨であるため、「navigator.mediaDevices.getUserMedia」を使用する必要があります。これは（まだ）問題のようです。 iOS 11.4でのカメラアクセスは、Safari内で使用している限り正常に機能します。他のブラウザー（Chrome、Firefox）で使用する場合はサポートされていません。ここにあなたが試すことができる例があります：

            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                var constraints = {
                    audio: true,
                    video: true
                };

                navigator.mediaDevices.getUserMedia(constraints)
                    .then(function(stream) {
                        var video = document.querySelector('video');
                        video.srcObject = stream;
                        video.onloadedmetadata = function(e) {
                            video.play();
                        };
                    })
                    .catch(function(err) {
                        console.log (err);
                    });
            }
            else {
                console.log ("navigator.mediaDevices not supported")
            }
<video id="video" width="200" height="200" autoplay playsinline></video>

このコードは、すべてのデスクトップデバイス、Androidモバイルデバイス、およびSafariのiPhoneモバイルデバイスでは正常に機能しますが、Chrome/Firefoxでは機能しません。すぐに別のケースにジャンプします。 "navigator.mediaDevices notサポートされています」

IOS 11.xはWebRTCをサポートしているので、問題がどこにあるのかわかりません：AppleまたはGoogle/Mozilla？さらに、他の実用的な解決策があれば、それについて聞いてうれしいです。

5
Jonny

更新：私はこれが非常に古いスレッドであることを知っていますが、IOS 11.4 beta以降、

  1. getUserMediaはサポートされていますが、PWA（スタンドアロン、別名モバイルWebアプリ対応）アプリではサポートされていません。周波数の半分は大幅に減衰されてFFTノードに入り、独自のFFTをインストールすることを忘れます。
  2. 最新のデスクトップサファリは11.1のようですが、FFTSizeが2048でトップに達し、未加工のオーディオフィードを取得できないため、さらに悪化します。

期待してます！

2
Kerry Davis

WebRTC（getUserMediaを含む）の予定はiOS11ですが、h264/h265コーデックを使用します。つまり、VP8/VP9は使用しません。

0
jlchereau