42

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

MilkyDeveloper
  • 608
  • 1
  • 6
  • 13
  • did you achieve it using a mobile device and connecting it to the host via lan network in 192.168.xxx.xxx?? I can't make it work since i don't know how to secure it in safari or other mobile browsers – GmloMalo Jun 03 '21 at 13:41
  • 1
    I eventually gave up on this project for other reasons, but I retried it using the answers below and it worked perfectly. See: https://stackoverflow.com/a/60964352/11849788 – MilkyDeveloper Jun 03 '21 at 15:36
  • 'My dilemma isn't navigator.mediaDevices undefinded.' Then why is your question navigator.mediaDevices undefinded'? It's misleading for those who actually have 'navigator.mediaDevices undefinded' – pjdupreez Sep 25 '22 at 20:16

3 Answers3

66

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

Philipp Hancke
  • 15,855
  • 2
  • 23
  • 31
  • 6
    Actually, for development the easiest solution it to run from http://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 – Vlad Dinulescu Nov 23 '20 at 13:18
33

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

Akif Kara
  • 442
  • 6
  • 14
  • 3
    The answer I've accepted is technically correct, but this one is very useful for rapid prototyping. I would recommend this if you are unable to host on localhost like the above answer. – MilkyDeveloper Mar 13 '21 at 01:20
  • 1
    MilkyDeveloper - you can't use your localhost server on other devices – mka Apr 03 '21 at 20:02
  • I was losing my mind for a while trying `about:config` in Chrome and Brave, but that page only seems to exist in Firefox. – Ryan Apr 09 '21 at 12:30
  • 3
    In Google Chrome go to `chrome://flags/#unsafely-treat-insecure-origin-as-secure` – Gjaa Feb 02 '23 at 14:07
0

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

Mithsew
  • 1,129
  • 8
  • 20