部署站点时，我无权访问 navigator.mediaDevices。 我该如何解决？

Question

I am currently trying to use the WebRTC api and have everything working locally. When I deploy to surge.sh I lose access to the navigator.mediaDevices object. How can I resolve this?

The following line of code is where I am having trouble with.

const stream = await navigator.mediaDevices.getDisplayMedia({video: {mediaSource: 'screen'}});

I receive the following error message:

TypeError: Cannot read property 'getDisplayMedia' of undefined

Answer 1

You need https.

navigator.mediaDevices is only available in SecureContext now in Chrome 74 , Firefox 68 , and in the spec , which means the object will be missing in insecure contexts (http).

Answer 2

As jib answered, navigator.mediaDevices is not available when webserver uses HTTP scheme while not hosted on localhost , but with an exception in chrome/chromium:

$ chromium --unsafely-treat-insecure-origin-as-secure=http://WEBSERVER_FQDN:PORT_NUMBER

--unsafely-treat-insecure-origin-as-secure command line option allows to loosen the restriction. It's useful for developing/debugging when HTTPS is not set up yet or you need to analyze raw unencrypted HTTP messages (ie wireshark).