6

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
M.Nar
  • 512
  • 1
  • 9
  • 24
  • 2
    You need https. `navigator.mediaDevices` is only available in SecureContext now in Chrome and in the spec. – jib Jun 17 '19 at 02:21
  • Ahhh. Thank you. I had read something similar to that and it was not clear what the solution was. – M.Nar Jun 17 '19 at 02:31
  • Glad it resolved your issue. Adding it as an answer. – jib Jun 17 '19 at 17:47

2 Answers2

6

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

jib
  • 40,579
  • 17
  • 100
  • 158
0

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 (i.e. wireshark).

AleXoundOS
  • 341
  • 1
  • 4
  • 13