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

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

Answer 2

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.