52

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

3
  • 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
    Commented Jun 3, 2021 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: stackoverflow.com/a/60964352/11849788 Commented Jun 3, 2021 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
    Commented Sep 25, 2022 at 20:16

3 Answers 3

75

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

1
42

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

5
  • 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. Commented Mar 13, 2021 at 1:20
  • 1
    MilkyDeveloper - you can't use your localhost server on other devices
    – mka
    Commented Apr 3, 2021 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
    Commented Apr 9, 2021 at 12:30
  • 7
    In Google Chrome go to chrome://flags/#unsafely-treat-insecure-origin-as-secure
    – Gjaa
    Commented Feb 2, 2023 at 14:07
  • Is there a way to get getdisplaymedia working in insecure mode? I wanted to test out a feature locally and it is not possible since getdisplaymedia is not available via http Commented Jan 11 at 11:23
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.