Cordova: getUserMedia() no longer works on insecure origins

Question

THE SITUATION

In my Cordova hybrid app (built with Quasar framework), I need to a add a video-call feature.

I need to use the function getUserMedia().

Everything works fine while testing on localhost, but when testing on the device it doesn't work.

THE ERROR:

[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

Most probably this error is caused by the fact that Cordova doesn't run on https.

ATTEMPTS:

I have tried everything I could find on Google but nothing worked..

Crosswalk:

I have seen somebody suggesting to install the crosswalk plugin. I have tried but nothing changed.

Permissions:

I have tried asking for permission using the android-permissions plugin.

But when it prompt the request, despite clicking on the ALLOW button, the permission was set to DENIED_ALWAYS...

I have tried using the diagnostic cordova plugin, but the result was the same

THE QUESTION:

How can I use getUserMedia() in a cordova app?

EDIT - THE SOLUTION:

@Andre solution is the correct solution to the question.

I was getting that error while running the app in a dev environment in my device. Quasar run my devServer on 192.168.0.18, that is not same as localhost, and thus not recognized as secure.

By setting https: true in the config, that issue was resolved.

After building the app, Cordova run on file://, and on the file:// protocol there is no insecure origin issue, as pointed out by @jcesarmobile in the comments.

I had still problems on build, but not related with this problem itself, but involving permissions, and I managed to resolve them using the cordova-plugin-android-permissions plugin.

Answer 1

You can't.

Using getUserMedia() is no longer supported over http:// (Unsecure Origin), It will work only over https:// (Secure Origin)

• For development purpose, 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 work on that server. That's why it works on your case using locahost.
• For production purpose, consider using HTTPS. You can get a free SSL certificate using Let's encrypt.

With Quasar framework, you can use Webpack over HTTPS by editing your quasar.conf.js file. Here are allowed parameters.

// quasar.conf.js
devServer: {
    https: true
}

It'll use a self signed certificate.

If you want to use your own certificate, use as following :

// quasar.conf.js
devServer: {
  https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
  }
}