getUserMedia() not supported in chrome

Question

I am trying to access my webcam using the getUserMedia() using my own website that run using my own ip address.

it was working fine until i tried my website again. i had tried the other demo site and the error given was getUserMedia is not supported.

Chrome version v47.0.2526.80m 32bits

I am able to access the webcam if i enter localhost instead of my ipadress. it also work in firefox.

Yes, it did. On Monday I had to change my site to be all SSL for it work. — Clay, Dec 11 '15 at 04:31
how do i add SSL? i google and most certificate require purchase.. — Mick Jack, Dec 11 '15 at 05:18
Startssl has free certs.. on my phone but you can find tutorials on Google for startssl — Clay, Dec 11 '15 at 05:20
i read/watch a few tuts on setting up SSL using starssl but it need a valid domain? this is a sch project and i am testing the website in a intranet environment. — Mick Jack, Dec 11 '15 at 05:45
problem solve i am able to create a local SSL file to test my site using this http://www.mytechblog.in/wp-content/uploads/2015/09/Commands-Procedure.txt — Mick Jack, Dec 11 '15 at 06:40
You can provide your IP address as an exception in Chrome. Follow these steps here: https://stackoverflow.com/a/58090783/293280 — Joshua Pinter, Sep 25 '19 at 03:37

score 21 · Accepted Answer · answered Dec 11 '15 at 04:30

21

Chrome is requiring secure origins (HTTPS) for getUserMedia.

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

https://developers.google.com/web/updates/2015/10/chrome-47-webrtc?hl=en

answered Dec 11 '15 at 04:30

Clay

4,458
3
29
45

Is this strictly on mobile? – Kevin Hernandez Jan 27 '20 at 19:41

Kaiido · Answer 2 · 2015-12-11T05:05:35.327

Chrome finally implemented the new navigator.mediaDevices.getUserMedia() method, but they added a security that will prevent the calls from unsecure address (non https or non localhost servers)

You will call it like this :

var video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({video:true}).then(function(mediaStream){
    window.stream = mediaStream;
    video.src = URL.createObjectURL(mediaStream);
    video.play();
});

Or you can use the official webRTC polyfill adpater.js library.

var constraints = { video: true, audio: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

score 11 · Answer 3 · answered Apr 28 '20 at 05:06

I am not sure if this exactly solves your problem. However, it might be helpful to someone who is struggling to have getUserMedia() in a working state.

I came across a medium link that helped me solve this issue.

Go to : chrome://flags/#unsafely-treat-insecure-origin-as-secure

Enable the option.

Also, there will be a checkbox provided below. Use that to provide the link to your HTTP server.

Referr to this image for better clarity

Provide the port number too. (In my case it is 8000)

Source: https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339

Perfect answer, worked for me. one thing is we should add the http host origin in the same otherwise it wont work. — Puttamarigowda M S, Nov 25 '20 at 11:53

getUserMedia() not supported in chrome

3 Answers3

Linked

Related