As I work on a website that requires a QR Code scan function, the interface specifications are quite precise.
The camera must occupy the full screen, with a transparent black layer covering it. However, at the center, there should be an unshielded square for scanning the QR code.
This is how I have approached the design:
<div class="videobox">
<div class="shape-qr"></div>
<div class="videobox__inner">
<video id="video" autoplay playsinline ></video>
</div>
</div>
For styling purposes, I used the following CSS:
.videobox, #video{
text-align: center;
position: relative;
height: 100%;
width: 100%;
}
.videobox .shape-qr{
background: rgba(0,0,0,0.5);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right:0;
bottom: 0;
}
The current output resembles this pattern, although I am uncertain about how to properly center the camera within the square space:
Your understanding and assistance would be greatly appreciated due to my limited proficiency in English!
Thank you!