32

I've been using webkitGetUserMedia method (getUserMedia through adapter.js) to get the camera nad microhpone for webRTC on my web app. My server is not secure (no SSL certificate). It all worked fine until I started getting an error saying : "getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details."

I googled and I saw that now in Chrome I need to use navigator.mediaDevices.getUserMedia(). I'm using Chrome 47.0.2526.80 m, and on this page https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia it says that this method should be supported for this version. However when I call navigator.mediaDevices.getUserMedia I get undefined. So now I cannot use either method in Chrome.

Can anyone please help me with this issue. Thanks

Michael P
  • 2,017
  • 3
  • 25
  • 33
  • https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins. These wont work on non https sites – Jeffrey Nicholson Carré Dec 09 '15 at 01:39
  • Yes I saw that, however on the https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia it doesn't say anything about the method not working on a non secure origins. – Michael P Dec 09 '15 at 18:11
  • Actually, it does say that, in footnote 3 for Chrome. – jib Dec 15 '15 at 01:28

4 Answers4

59

As per new chrome update (From Google Chrome 47), getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin)

For development purpose,

1.localhost is treated as a secure origin over HTTP, so if you're able to run your server from localhost, you should be able to test the feature on that server.

2.You can run chrome with the --unsafely-treat-insecure-origin-as-secure="http://example.com" flag (replacing "example.com" with the origin you actually want to test), which will treat that origin as secure for this session. Note that you also need to include the --user-data-dir=/test/only/profile/dir to create a fresh testing profile for the flag to work.

reference: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Community
  • 1
  • 1
Mohammed Safeer
  • 20,751
  • 8
  • 75
  • 78
  • 7
    That was actually not my question. I saw and read all this information already. My question was that as I can see, navigator.getUserMedia is deprecated. But in the same time navigator.MediaDevices.getUserMedia is undefined! So how can one method become deprecated when the successor is non existent? The second question is if navigator.getUserMedia is not going to work on non-secure origins, what will? Only the "--unsafely-treat-insecure-origin-as-secure="example.com" way? It was not clear on the naviagtor.MediaDevices.getUserMedia whether that new method will work on non-secure origins or not! – Michael P Dec 14 '15 at 17:37
  • 4
    It doesn't work for Chrome 48.0.2564.116 Chrome says: You are using an unsupported command-line flag: --unsafely-treat-insecure-origin-as-secure – lega Feb 29 '16 at 07:20
  • Ya these flags no longer work but Firefox does still support this – mdw7326 Mar 11 '17 at 19:35
  • @Mohammed Safeer I get error on using this commands: "google chrome cannot read and write to its data directory: /test/only/profile/dir" – Dash May 12 '17 at 10:08
  • @Dash That may due to the permission issues. Check the user permissions for chrome – Mohammed Safeer May 12 '17 at 10:37
  • Full Control is provided for all the users for chrome. – Dash May 15 '17 at 09:07
  • How to run chrome with those options in windows? – Razin Jan 02 '18 at 12:44
  • can we add --unsafely-treat-insecure-origin-as-secure="http://example.com" in our app , so if we open our app directly then our app will work – sparsh610 Apr 25 '19 at 12:59
  • Add https binding to my site, solved the problem. Thanks. – Dr. MAF Oct 03 '19 at 12:55
15

The last google-chrome update makes getUserMedia work only on secure origins. There is a method to make it work, but only for developing purposes. Just run chrome using cmd with thoses options

--unsafely-treat-insecure-origin-as-secure="example.com"

and this option to use a new user profile

--user-data-dir=/test/only/profile/dir

FYI getUserMedia work on firefox until now, but in my opinion, it will recommend a secure origin like google-chrome.

Kassav'
  • 1,130
  • 9
  • 29
  • I can easily add this parameter to browser on desktop. But how to do this on my mobile, when I develop app? Or should I establish https connection on my localhost instead? – gkucmierz Jul 05 '20 at 10:58
  • 1
    Just saying this here in case it helps someone in the future. You can access the flag in android Chrome by going to chrome://flags/ and searching for "Insecure origins treated as secure". – Rajdeep Dutta Feb 20 '21 at 16:16
10

While testing on my phone on with a local server, I was struggling to get mic permissions for my pwa on android chrome. (Was working fine on my desktop.) Some of the above suggestions helped push me in the right direction, but I want clarify just a bit. ...Chrome on my phone was not allowing the permissions request to fire because the origin address was not secure. I found this article on the subject which was very helpful: Enabling the Microphone/Camera in Chrome for (Local) Unsecure Origins by Scott Carmichael.

He says,

  1. Navigate via address-bar to chrome://flags/#unsafely-treat-insecure-origin-as-secure in Chrome.

  2. Find and enable the Insecure origins treated as secure section.

  3. Add any addresses you want to ignore the secure origin policy for. (Include the port number if required.)

  4. Save and restart Chrome.

C-Note187
  • 585
  • 4
  • 11
7

You can still use the old method name in Chrome 47, as long as you use https. The name change is orthogonal to 47's new secure-origin requirement. See other answers.

On the missing methods: navigator.mediaDevices.getUserMedia was put back under a flag in Chrome, so you must either turn on chrome://flags/#enable-experimental-web-platform-features or use a recent version of adapter.js, like here: https://stackoverflow.com/a/34230983/918910.

Community
  • 1
  • 1
jib
  • 40,579
  • 17
  • 100
  • 158