Comments (5)
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?
from laravel-qr-code-login.
from laravel-qr-code-login.
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
from laravel-qr-code-login.
from laravel-qr-code-login.
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
from laravel-qr-code-login.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from laravel-qr-code-login.