Bowser for iOS getUserMedia is undefined

Question

I'm trying to get WebRTC to work with the Bowser browser for iOS. But whatever I try navigator.getUserMedia is undefined.

I'm testing the page on an iPhone6 running iOS 8.3.

This is how I've set it up:

var localMediaStream;

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

window.onload = function() {
    var video = document.getElementById('video');

    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);

        localMediaStream = stream;
    }, function(err) {
        if(err) throw err;
    });
};

The error I get is:

TypeError: undefined is not a function (evaluating 'navigator.getUserMedia')

If I don't feature-detect and use navigator.webkitGetUserMedia directly (which is as I understand it the method that should exist in Bower) I get the same error.

Answer 1

Do this

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

inside onload

But for me it doesn't work when you open the page for the first time. After page refresh it works.

UPD: It's due to the fact that Bowser's javascript was injected too late (or not injected at all). It was a iOs's webview problem. But bowser's team are saying that they have replaced it with the new control not web view but the newer one (don't remember the name, sorry).

Answer 2

navigator.mediaDevices.getUserMedia(..)

should be fully supported by Safari 11 and up. It can be only accessed from a SSL domain though, so if developing locally, try to add a https:// prefix to your alias. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia