How to use getUserMedia in Chrome for iOS

问题:

I am developing a simple application, in this I am trying to access camera and microphone using getUserMedia. Its working fine for me in desktop Chrome and Android Chrome but it's not working in iPhone and iPad 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);

回答1:

... but it's not working in iPhone and iPad Chrome.

The chrome app on your iPhone or iPad is not running "a full" version of chrome. It's capabilities are limited to the iOS platform. So getUserMedia and the like probably won't be available until Safari/Apple supports it.

Quoting from another question:

Apple policy forces other browser to use their version of webkit which does not support webRTC, so you will not have webRTC support in a web app on iOS anytime soon. Activity in webkit hints as a change, but time for this to land, it will be months.

回答2:

My understanding (I'm a Mozilla engineer) is that Chrome on iOS doesn't support webrtc or getUserMedia thus far.

回答3:

Since "navigator.getUserMedia" is deprecated you should use "navigator.mediaDevices.getUserMedia". This seems (still) to be a problem. Camera access on iOS 11.4 works fine as long as you are using it inside Safari. If you want to use it in any other browser (Chrome, Firefox) it is not supported. Here is an exmaple you can try out:

            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>

This code works fine on any desktop device, on Android mobile devices and on iPhone Mobile devices in Safari but just not in Chrome/Firefox: will jump to else case right away: "navigator.mediaDevices not supported"

Since iOS 11.x supports WebRTC I'm not sure where the problem is situated now: Apple or Google/Mozilla? Furthermore if any other working solution is around I'm glad to hear about it.

回答4:

UPDATE: I know this is a very old thread, but as of IOS 11.4 beta,

1. getUserMedia is supported but not in PWA (aka standalone aka mobile web app capable) apps 2 FFTSize is now up to 32768 for an analyzer node HOWEVER, there seems to be no way to feed raw live audio into the analyzer node (so roughly the top half of the frequencies are attenuated GREATLY going into the FFT node and forget about installing your own FFT because it will do no better GIGO)
2. Latest Desktop Safari seems to be 11.1 and it is even worse since FFTSize tops out at 2048 and you still don't get a raw audio feed.

I keep hoping!

回答5:

WebRTC (incl. getUserMedia) is due with iOS11 but will use h264/h265 codecs, i.e. no VP8/VP9.