Question

这是我目前正在使用的代码：

importlib_resources

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>

我也尝试过将z-index添加到背景图片，但这没用。

是什么导致视频始终显示在顶部？

Answer 1

您要让body显示在其中的内容前面。 body元素并不意味着要这样操作。您应该做的是将图像作为自己的元素添加到页面，然后将其叠加在视频上，如下所示：

<div class="wrap">
  <video id="video"></video>
  <div class="overlay">
    <img src="https://i.imgur.com/A9J4iWz.png" alt="">
  </div>
</div>

.wrap {
  position:relative;
}

video {
  background-color: blue;
  width:100%;
  height:100%;
  z-index:15;
}

.overlay {
  position:absolute;
  top:0;
  width:100%;
  z-index:25;
  text-align:center;
}

img {
  display:inline-block;
}

您可以在垂直和水平位置上进行游戏，以适应您想要实现的目标。这是一个小提琴的链接，它证明了这一点：https://jsfiddle.net/2fu5woe3/2/

如何居中和叠加图像（在流网络摄像头之上）

1 个答案: