7

I have a react application that should record audio from microphone and send it to a backend. The microphone input is implemented with navigator.mediaDevices.getUserMedia. The page runs perfectly over localhost and from other devices in my wifi network(for that I had to start my react app with https). But when I test it with this website: http://appsimulator.net/webapp/?frame=apple_iphone_6_v, I get the following error: TypeError: Cannot read property 'getUserMedia' of undefined. I don't know why it is not possible to test the app over this site.

guzgftt
  • 83
  • 1
  • 1
  • 4

2 Answers2

18

This is answered directly in the MDN documentation for MediaDevices.getUserMedia():

Note: If the current document isn't loaded securely, navigator.mediaDevices will be undefined, and you cannot use getUserMedia(). See Security for more information on this and other security issues related to using getUserMedia().

AppSimulator.net is not presented securely, so this call will always fail in the manner you observed. Serve the page over HTTPS.

esqew
  • 42,425
  • 27
  • 92
  • 132
4

I got this error using the local network port. I decided to test as localhost instead 192.168.100.4 and it worked:

[Vue] App running at: 
   - Location: http://localhost:5000/ #works
   - Network: http://192.168.100.4:5000/ #error
Mithsew
  • 1,129
  • 8
  • 20