javascript - I do not have have access to navigator.mediaDevices when the site is deployed. How do I fix this? - Stack Overflow

admin管理员组

文章数量:1400211

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

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

• javascript
• webrtc
• web-deployment
• surge.sh

Share Improve this question Follow asked Jun 17, 2019 at 2:04 M.NarM.Nar 65111 gold badge1010 silver badges2626 bronze badges 3

• 2 You need https. navigator.mediaDevices is only available in SecureContext now in Chrome and in the spec. – jib Commented Jun 17, 2019 at 2:21
• Ahhh. Thank you. I had read something similar to that and it was not clear what the solution was. – M.Nar Commented Jun 17, 2019 at 2:31
• Glad it resolved your issue. Adding it as an answer. – jib Commented Jun 17, 2019 at 17:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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

本文标签：