CODEWITHSUNDEEP
javascripthtmlcssreactjs
AG_HIHI
AG_HIHI

Reputation: 1995

Object navigator.mediaDevices is not accessible on mobile chrome browser

I have been working on an application in which I use the object navigator to stream my webcam.
It works perfectly on my pc browser, here's the github link.

However, when I launch the app on my phone it crashes. I kept testing different things until I found-out that for some reason the object navigator is not accessible on my mobile browser.

This is how I found-out. I create this function: 

 logErrors(){
  return(navigator.mediaDevices.toString())

}

And I displayed it this way: 

<h1>{this.logErrors()}</h1>

PS: I am using React, if the syntax seems a bit strange.

Anyway, on my pc browser, I get this:

enter image description here

On my phone browser, I get this error:
enter image description here

Any idea why mediaDevices is not accessible on my phone browser?

Upvotes: 0

Views: 1910

Answers (2)

AG_HIHI
AG_HIHI

Reputation: 1995

I have solved this issue.
1. Open package.json and paste this inside scripts:

"start": "set HTTPS=true&&react-scripts start"

This should serve the app over https
2. If this gives you this error:

React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

Open

node_modules/react-dev-utils/webpackHotDevClient.js

And paste this code inside the definition of the connection: 

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

This is apparently a bug in react-sripts that hasn't been solved yet. If https protocol is being used we should use WebSockets over SSL/TLS (WSS) protocol instead of WebSockets (WS). You can learn more about it here:

Upvotes: 1

Ricardo Rocha
Ricardo Rocha

Reputation: 16236

If you check the API of the MediaDevices in here, they say:

It returns a Promise that resolves to a MediaStream object. If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError respectively.

and

If the current document isn't loaded securely, navigator.mediaDevices will be undefined, and you cannot use getUserMedia(). See Security for more information on this and other security issues related to using getUserMedia()

So I'm guess that your application does have a security issue (you should have given access through an https application).

Moreover in here:

Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost

Upvotes: 2

Related Questions