navigator.mediaDevices is undefined
Solution 1
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
Solution 2
in mozilla developer
go to about:config
set to true media.devices.insecure.enabled
and media.getusermedia.insecure.enabled
MilkyDeveloper
Updated on March 13, 2021Comments
-
MilkyDeveloper about 3 years
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 afile:///
scheme it works perfectly; the same withhttps://
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 on192.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.) -
Vlad Dinulescu over 3 yearsActually, for development the easiest solution it to run from localhost, as that's considered secure - see blog.mozilla.org/webrtc/… and w3c.github.io/webappsec-secure-contexts/#localhost
-
MilkyDeveloper about 3 yearsThe 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.
-
mka about 3 yearsMilkyDeveloper - you can't use your localhost server on other devices
-
Ryan about 3 yearsI was losing my mind for a while trying
about:config
in Chrome and Brave, but that page only seems to exist in Firefox.