Trigger to open users camera so they can scan QR code

Site URL: https://burgundy-onion-29xp.squarespace.com/

Hi,

I'm building a very simple site, mainly for use on mobile that has a few images with hyperlinks off to various external websites.

With one of the images I want to embed code, so that when the user taps the image it triggers their camera app to open, to then enable them to scan a QR code which will take them to an external link. Does anyone know how I can do this?

By way of explanation - as a business we label clients assets with QR codes. The client can then scan the QR code with their phone and see a report about that asset.

Actually, yeah. You can do this using simple HTML and enhance with Javascript if you need, or if there are permissions you need to override. Just use a code block and be sure to give your code a unique class and style as you need. This is just the prompt to open the camera.

Also, just as a warning -- I would probably blacklist the website if I were a random visitor and my camera automatically opened. This code may also throw activation errors on browsers.

<a>
  <input type="file" accept="image/*" capture="camera">   
</a>

An example of styles would look like:

<div>
  <input type="file" accept="image/*" capture="camera" style="display:block">
</div>

CSS:

div {
  border: 5px solid yellow;
  padding: 1em;
  text-align: center;
  color: #fff;
  position: relative;
  width: 200px;
  height: 100px;
  background: black;
}

input[type="file"] { 
  width: 100%;
  height: 100%;
  opacity: 0; /* make transparent */
  z-index: 1; /* move under anything else */
  position: absolute; /* don't let it take up space */
}