How to obtain object from navigator.getUserMedia() in mobile web?

Question

Trying to get a JavaScript reference/promise to a MediaStream returned from MediaDevices in HTML5 and WebRTC.

JavaScript here is run on Chrome and Safari on iOS and Android.

navigator.mediaDevices.getUserMedia(session, initRec , onErr);

This throws TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')

Fine, let's try it the slightly older way:

navigator.getUserMedia(parms,initfunc,errfunc);

This throws TypeError: navigator.getuserMedia is not a function. (In 'navigator.getUserMedia(parms,initfunc,errfunc)', 'navigator.getUserMedia' is undefined)

Note: Both of those calls work on desktop versions. Did mobile web EVER work for audio recording?

Mopboard

Answer 1

Safari (or any browser on iOS) does not support getUserMedia and WebRTC until the upcoming Safari 11. See the webkit blog post for details and note that it does not mention the MediaRecorder API.

Penicillin

Still seeing this occur in mobile Safari in 2020. – Sterlingsterlitamak

I still got this on iOS 14.4 in Feb. 2021 :( – Triolein

Safari choose not to implement the 'legacy' API navigator.getUserMedia. Try navigator.mediaDevices.getUserMedia – Penicillin

@PhilippHancke mediaDevices is undefined. – Eris

Facing same issue on ios 14.0.1 chrome – Copulate

Answer 2

Try to serve the web page over HTTPS. I've read that iOS Safari only allows access to the microphone (and camera) on secure connections.

I had the same problem while implementing ng-audio-recorder in my Ionic Angular app. While working flawlessly on desktop, mobile safari threw this error. Switching to HTTPS solved the problem.

Verdha

Thanks. this worked. – Tristan