Doesn't capture from camera: "Native web camera streaming (getUserMedia) not supported in this browser"

[yphastos]

Hello, I've managed to get the site running, but when trying to use the camera capture, the console shows an error:

Native web camera streaming (getUserMedia) not supported in this browser.

Such error appears on Firefox, Firefox Developer Edition, Opera and also Chrome.

I've found a post on stackoverflow with a similar problem: https://stackoverflow.com/questions/12407321/navigator-getusermedia

and they mention that it is not a browser problem, because the webcam works on another example site, i.e. https://www.html5rocks.com/en/tutorials/getusermedia/intro/

One answer mentions the problem is that navigator.getUserMedia() is deprecated and navigator.mediaDevices.getUserMedia(constraints); should be used instead.

old method: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

current one: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

So I guess it doesn't work because it uses deprecated methods?

Could you look into it so it works in current browsers? Thanks

[yphastos]

Update, looking further, I think you use two methods, and the option 1 is the one showing the error.

However, Option 2 doesn't work either, but this time, the error is different. In the console (firefox), it shows:

TypeError: mediaDevices is undefined webcodecamjs.js:16:5
    WebCodeCamJS http://laravel-qr-code-login.test/qr_login/option2/js/webcodecamjs.js:16
    <anonymous> http://laravel-qr-code-login.test/qrLogin-option1:283
    <anonymous> http://laravel-qr-code-login.test/qrLogin-option1:440

And the viewport for the camera image appears blank:

Note that the browser never asks for permission to use the webcam.

The browser does ask for permission on the html5 example page mentioned before, and it works fine, so it is not a browser/camera problem.

How can it be fixed?

[rolandalla]

Hello :) It looks like you are using a custom domain.test. The camera will not work without a https on the real domains . Or for the localhost you can test it using localhost , or 127.0.0.1

yphastos notifications@github.com schrieb am Do. 26. Sep. 2019 um 23:59:

Update, looking further, I think you use two methods, and the option 1 is the one showing the error.

However, Option 2 doesn't work either, but this time, the error is different. In the console (firefox), it shows:

TypeError: mediaDevices is undefined webcodecamjs.js:16:5 WebCodeCamJS http://laravel-qr-code-login.test/qr_login/option2/js/webcodecamjs.js:16

http://laravel-qr-code-login.test/qrLogin-option1:283 http://laravel-qr-code-login.test/qrLogin-option1:440 And the viewport for the camera image appears blank: [image: image] Note that the browser never asks for permission to use the webcam. The browser does ask for permission on the html5 example page mentioned before, and it works fine, so it is not a browser/camera problem. How can it be fixed? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub , or mute the thread . --

Mit freundlichen Grüßen / Best Regards,

Roland Alla

Web Developer

Mob: +49 152 09469879 <+49+152+09469879> | Email: info@rolandalla.com | Website: www.rolandalla.com

Linkedin https://www.linkedin.com/in/roland-alla | Xing https://www.xing.com/profile/Roland_Alla | Github https://github.com/roladn

[yphastos]

It looks like you are using a custom domain.test

Hello, yes, I am using a custom domain, but the reason is because I am running Laravel via Homestead in a VM (with Vagrant), and the default configuration suggests to use custom urls for each site.

I am completely new to both Vagrant, and Laravel in general, but I will try to change some settings and try to run it as localhost.

What I just tried is accesing the site via direct IP:

http://192.168.10.10/qrLogin-option1, being 192.168.10.10 the IP configured in my Homestead.yaml file.

The site opens, but it still shows the error with mediaDevice:

TypeError: mediaDevices is undefined webcodecamjs.js:16:5

Could it work with local IPs instead of test domains? Or it MUST be localhost (or 127.0.0.1) in order to work without https?

Do you by any chance know how to configure Homestead for such case?

---

On another thought, if the problem is HTTPS, shouldn't the console error be more specific about it? and mention something like 'you are not allowed to use mediaDevices on insecure sites' similar to the message firefox gives when there are password fields in insecure sites:

Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. index.php

In such case, firefox is very clear abut the warning being because of insecure sites.

But in this case, the error seems more generic, so it may be something else.

Anyway, I will try to do more tests, and appreciate any help you can give.

Thank you

[rolandalla]

Sorry , I don’t have much experience with Vagrant and can’t help with that . But I am sure if you access the project using https , localhost or 127.0.0.1 ... Also the project is a bit older. But I have tested it some months ago and was working correctly. Also the same code is used on a live project and looks pretty good . Good luck with it :)

yphastos notifications@github.com schrieb am Fr. 27. Sep. 2019 um 19:42:

It looks like you are using a custom domain.test

Hello, yes, I am using a custom domain, but the reason is because I am running Laravel via Homestead in a VM (with Vagrant), and the default configuration suggests to use custom urls for each site.

I am completely new to both Vagrant, and Laravel in general, but I will try to change some settings and try to run it as localhost.

What I just tried is accesing the site via direct IP:

http://192.168.10.10/qrLogin-option1, being 192.168.10.10 the IP configured in my Homestead.yaml file.

The site opens, but it still shows the error with mediaDevice:

TypeError: mediaDevices is undefined webcodecamjs.js:16:5

Could it work with local IPs instead of test domains? Or it MUST be localhost (or 127.0.0.1) in order to work without https?

Do you by any chance know how to configure Homestead for such case?

On another thought, if the problem is HTTPS, shouldn't the console error be more specific about it? and mention something like 'you are not allowed to use mediaDevices on insecure sites' similar to the message firefox gives when there are password fields in insecure sites:

Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. index.php

In such case, firefox is very clear abut the warning being because of insecure sites.

But in this case, the error seems more generic, so it may be something else.

Anyway, I will try to do more tests, and appreciate any help you can give.

Thank you

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/rolandalla/laravel-qr-code-login/issues/4?email_source=notifications&email_token=ABNUGV4YVLV2ESNMAHY3JMTQLZAXTA5CNFSM4I27NVI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7ZTVZQ#issuecomment-536034022, or mute the thread https://github.com/notifications/unsubscribe-auth/ABNUGV3TLB6QHP4Q2ZGJA3TQLZAXTANCNFSM4I27NVIQ .

--

Mit freundlichen Grüßen / Best Regards,

Roland Alla

Web Developer

Mob: +49 152 09469879 <+49+152+09469879> | Email: info@rolandalla.com | Website: www.rolandalla.com

Linkedin https://www.linkedin.com/in/roland-alla | Xing https://www.xing.com/profile/Roland_Alla | Github https://github.com/roladn

[yphastos]

Update,

I verified that the problem was indeed attempting to use mediaDevices without SSL (despite the error message in the console not being very clear about it).

Anyway, I investigated, and it happens that Vagrant (Homestead at least) has SSL included natively (at least current versions), so it was very simple to implement it and access the site via https:// instead of http://

The browser (firefox in my case) still notifies that the certificate may be invalid (because is self signed or something), but you can simply add an exception, and then the site and webcam simply work!

For posterity, or for someone to find it useful, I put here some links I found to configure SSL in Homestead:

https://www.eaglepeakweb.com/blog/how-to-enable-ssl-https-tls-laravel-homestead https://laracasts.com/discuss/channels/servers/homestead-ssl https://medium.com/@adnanxteam/how-to-setup-https-with-laravel-homestead-ad7915470fa8

I'll close the issue. Thanks