Here is the current code I am working on:
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserBarcodeReader()
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
const sourceSelect = document.getElementById('sourceSelect')
selectedDeviceId = videoInputDevices[0].deviceId
codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
window.location.href = 'https://www.example.com'
}).catch((err) => {
window.location.href = 'https://www.example.com'
})
})
})html,body {
margin:0;
}
body {
padding:45px 0;
background-image: url("https://i.imgur.com/A9J4iWz.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
</head>
<body>
<video id="video" width="100%" height="100%"></video>
<script type="text/javascript" src="https://pastebin.com/raw/STztkMyB"></script>
</body>
</html>This page will display a live video from your webcam.
I tried to add an image overlay on the video using the following code, but it's not working as expected:
body {
padding:45px 0;
background-image: url("https://i.imgur.com/A9J4iWz.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
I also attempted to set z-index for the background image, however, that did not yield the desired results.
What could be causing the video to always appear on top?