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

[apeengggg]

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

[Sec-ant]

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:

  vue-qrcode-reader/src/misc/camera.ts

  Lines 32 to 40 in 504e46d

  	// At least in Chrome `navigator.mediaDevices` is undefined when the page is
  	// loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
  	// initialized with `false` although the API might actually be supported.
  	// So although `getUserMedia` already should have a built-in mechanism to
  	// detect insecure context (by throwing `NotAllowedError`), we have to do a
  	// manual check before even calling `getUserMedia`.
  	if (window.isSecureContext !== true) {
  	throw new InsecureContextError()
  	}

  And set your insecure origin in the chrome flags page.

[apeengggg]

iam using vuejs3, with core ui template

[Sec-ant]

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]

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]

The detection of insecure context is hardcoded here:

vue-qrcode-reader/src/misc/camera.ts

Lines 32 to 40 in 504e46d

	// At least in Chrome `navigator.mediaDevices` is undefined when the page is
	// loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
	// initialized with `false` although the API might actually be supported.
	// So although `getUserMedia` already should have a built-in mechanism to
	// detect insecure context (by throwing `NotAllowedError`), we have to do a
	// manual check before even calling `getUserMedia`.
	if (window.isSecureContext !== true) {
	throw new InsecureContextError()
	}

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]

The detection of insecure context is hardcoded here:

vue-qrcode-reader/src/misc/camera.ts

Lines 32 to 40 in 504e46d

	// At least in Chrome `navigator.mediaDevices` is undefined when the page is
	// loaded using HTTP rather than HTTPS. Thus `STREAM_API_NOT_SUPPORTED` is
	// initialized with `false` although the API might actually be supported.
	// So although `getUserMedia` already should have a built-in mechanism to
	// detect insecure context (by throwing `NotAllowedError`), we have to do a
	// manual check before even calling `getUserMedia`.
	if (window.isSecureContext !== true) {
	throw new InsecureContextError()
	}

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 ?

[github-actions]

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