How to use getUserMedia in Chrome for iOS

Question

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

Please clarify: are you writing a Chrome App and deploying it with Mobile Chrome Apps toolchain, or are you building a web app? In the latter case, please fix the tag to [tag:google-chrome] — Xan, Mar 20 '15 at 09:20

score 19 · Answer 1 · edited May 23 '17 at 11:48

... 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.

score 12 · Answer 2 · answered Oct 21 '18 at 16:40

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.

April 2020 and still same issue on iOS Chrome - any news in that regard? — Pramus, Apr 15 '20 at 12:27
June 2020 and still no support on Chrome for IOS. Since the new apple developer forums are open for search result. https://developer.apple.com/forums/search/?q=getUserMedia%20Chrome-iOS a lot is going on. — NME New Media Entertainment, Jul 01 '20 at 14:16

score 10 · Answer 3 · answered Mar 20 '15 at 06:50

10

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

answered Mar 20 '15 at 06:50

jesup

6,765
27
32

score 5 · Answer 4 · answered Apr 26 '21 at 17:25

As of iOS 14, this changed. Now WKWebView adds support for getUserMedia. @Marcus explains it very well here: https://stackoverflow.com/a/63092094/6931862

TLDR;

WKWebView can use getUserMedia in iOS 14.3 beta 1.

https://bugs.webkit.org/show_bug.cgi?id=208667

https://bugs.chromium.org/p/chromium/issues/detail?id=752458

score 2 · Answer 5 · answered Apr 25 '18 at 00:00

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

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

So its not supported any chrome iphone, any work around? – Kay Sep 27 '18 at 12:46 — Kay, Sep 27 '18 at 12:46

score 0 · Answer 6 · answered Aug 02 '17 at 07:56

0

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

answered Aug 02 '17 at 07:56

jlchereau

1,152
1
7
5

How to use getUserMedia in Chrome for iOS

6 Answers6

Linked