CODEWITHSUNDEEP
javascripthtmlnetwork-programmingruntime-errorwebrtc
MilkyDeveloper
MilkyDeveloper

Reputation: 736

navigator.mediaDevices is undefined

So I've made a WebRTC screen sharing app as a self-hosted alternative to Chrome Remote Desktop and other common remote desktop / game streaming services.

My dilemma isn't navigator.mediaDevices undefinded. Whenever I launch the app over a file:/// scheme it works perfectly; the same with https:// as mentioned within Mozilla's docs. But the problem is I don't want to host it as it has a few major security issue(s). So how would I host it on 192.168.XXX.XXXX without it giving the error? (I would like to host it on my local network so I can test it on other mobile devices.)

Upvotes: 53

Views: 61303

Answers (3)

pxeba
pxeba

Reputation: 1766

I got this error with firefox 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

Same problem on chrome

Upvotes: 2

Akif Kara
Akif Kara

Reputation: 665

in mozilla developer go to about:config set to true media.devices.insecure.enabled and media.getusermedia.insecure.enabled

Upvotes: 43

Philipp Hancke
Philipp Hancke

Reputation: 17275

APIs with functions like getUserMedia, getDisplayMedia and enumerateDevices require a secure context, access to these from http: origins has been removed in Chrome back in 2019

For development, the easiest solution may be to create a self-signed certificate.

--UPDATE--

For development the easiest solution is to run from localhost, as that's considered secure - see https://blog.mozilla.org/webrtc/camera-microphone-require-https-in-firefox-68/ and https://w3c.github.io/webappsec-secure-contexts/#localhost

Comment from: Vlad Dinulescu

Upvotes: 78

Related Questions