camera does not appear / not showing when i deploy the application in server

gruhn / vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes.

https://gruhn.github.io/vue-qrcode-reader

MIT License

2.03k stars 330 forks source link

camera does not appear / not showing when i deploy the application in server #398

Closed apeengggg closed 4 months ago

apeengggg commented 6 months ago

I have tried locally and successfully displayed the camera and read QR, when I deploy to the server, the camera does not appear, how do I solve it? I don't use https

apeengggg commented 6 months ago

iam using vuejs3, with core ui template

Sec-ant commented 6 months ago

You can only use the camera in a secure context (https or localhost): https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

apeengggg commented 6 months ago

You can only use the camera in a secure context (https or localhost): https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

so how to allow it in http ?

I have tried entering the url into => chrome://flags/#unsafely-treat-insecure-origin-as-secure

but the camera still isn't showing

Sec-ant commented 6 months ago

The detection of insecure context is hardcoded here: https://github.com/gruhn/vue-qrcode-reader/blob/504e46d2d01c70fce4679740294849b12e18f325/src/misc/camera.ts#L32-L40

So chrome://flags/#unsafely-treat-insecure-origin-as-secure is not gonna work.

Do you have a reason to serve this in an insecure context?

apeengggg commented 6 months ago

The detection of insecure context is hardcoded here:

https://github.com/gruhn/vue-qrcode-reader/blob/504e46d2d01c70fce4679740294849b12e18f325/src/misc/camera.ts#L32-L40

So chrome://flags/#unsafely-treat-insecure-origin-as-secure is not gonna work.

Do you have a reason to serve this in an insecure context?

i dont have spesific reason to serve that in an insecure origin, what should i check ?

Sec-ant commented 6 months ago

i dont have spesific reason to serve that in an insecure origin, what should i check ?

Sorry I don't understand your question. I was asking your use case?

If you're deploying the service to end users, you'll need an SSL certificate because it's very unsafe to getUserMedia in an insecure context.
For local development and testing, localhost is required, or check the README to learn how to test your service on your mobile device without https.
If you really want chrome://flags/#unsafely-treat-insecure-origin-as-secure to work. You can fork or patch the vue-qrcode-reader to comment out this piece of detection code: https://github.com/gruhn/vue-qrcode-reader/blob/504e46d2d01c70fce4679740294849b12e18f325/src/misc/camera.ts#L32-L40 And set your insecure origin in the chrome flags page.

github-actions[bot] commented 4 months ago

This issue has been marked as stale. If there is no further activity it will be closed.