1

I am trying to run an Angular 4 project. It is a video chat app. When I am trying to run using localhost, it is not working and when I am using 

ng s --host 192.16.10.xxx:4200

it's causing problems using the webcam and showing this 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. See goo.gl/rStTGz for more details.

I don't know how to do this.

Can anyone help me with this?

EDITS -

I've generated ssl file localhost.key and localhost.csr and folder structure is

enter image description here

When I am trying to run

ng serve --ssl --ssl-key localhost.key --ssl-cert localhost.csr --host 0.0.0.0

It is giving an error 

error:0906D06C:PEM routines:PEM_read_bio:no start line
Error: error:0906D06C:PEM routines:PEM_read_bio:no start line
Rupesh
  • 850
  • 2
  • 13
  • 30

2 Answers2

1

you need to serve your project with an (self-signed) ssl certificate. you can do this on the command-line or specify in in the configuration file. you can find a procedure of generating a certificate and then for CLI. the host part is optional

# angular generates a self-signed certificate for localhost automatically
ng serve --ssl 

-or-

# tries to use to the provided certificate, it it cannot find generate one
ng serve --ssl --ssl-key <ssl_key_file>  --ssl-cert <ssl_cert_file>

don't forget to import the certificate as a trusted root certificate into your pc/browser. you can check how to do this for each browser.

jcuypers
  • 1,774
  • 2
  • 14
  • 23
  • I've generated ssl key but On running the above command, it producing error `error:0906D06C:PEM routines:PEM_read_bio:no start line Error: error:0906D06C:PEM routines:PEM_read_bio:no start line ` – Rupesh Mar 31 '19 at 20:46
  • you need to replace the placeholders with actual values/filenames right? mine for e.g. is `ng serve --ssl --ssl-key c:\certificates\localhost.key --ssl-cert c:\certificates\localhost.crt --host 0.0.0.0` (i have copied the files in a specific directory after generation) – jcuypers Mar 31 '19 at 20:47
  • My files are `localhost.key` and `localhost.csr`. And these files are inside project parent folder. – Rupesh Mar 31 '19 at 20:48
  • 1
    yes so you need need to make sure you reference them correctly. i'm using it here. i'm sure it works :) if you are not sure, just create a specific directory and reference them like that, just to be clear it works – jcuypers Mar 31 '19 at 20:50
  • I've updated my query, please check that. I think I am giving the right path. – Rupesh Mar 31 '19 at 20:58
  • Sorry i can't simulate it on windows, but i have found this with similar error: https://github.com/yagop/node-telegram-bot-api/issues/63. please check – jcuypers Mar 31 '19 at 21:14
  • I am using `ubuntu`. – Rupesh Mar 31 '19 at 21:15
  • https://stackoverflow.com/questions/22584268/node-js-https-pem-error-routinespem-read-biono-start-line – jcuypers Mar 31 '19 at 21:16
  • So I have to generate `.pem` and `.crt` ?? – Rupesh Mar 31 '19 at 21:20
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190993/discussion-between-jcuypers-and-rupesh). – jcuypers Mar 31 '19 at 21:21
0

So, try to run your Angular app locally with certificate. You can generate certificate using open ssl

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost.key -days 3560 -out localhost.crt -config certificate.cnf

and then run 

"start": "ng serve --ssl --ssl-key d:\\certificates\\localhost.key  --ssl-cert d:\\certificates\localhost.crt"

I found this info on https://medium.com/@richardr39/using-angular-cli-to-serve-over-https-locally-70dab07417c8 site

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47