使用网络摄像头作为 HTML 背景

Use Webcam as HTML Background

本文关键字：HTML 背景 摄像头 网络      更新时间：2023-09-26

我有一台电脑，它有一个网络摄像头，有时会在我们的夜总会显示一个网站......

我想将两者合并并显示网站，html背景源是同一台计算机上网络摄像头的视频输出。

网络摄像头不需要流式传输到互联网，网站只需要在本地获取视频信号......我不知道我们如何做到这一点，但效果与此类似，只是我们不使用 Youtube 作为视频源 - http://www.seanmccambridge.com/tubular/！

也许

这将是html，css，也许是jquery和java或flash的组合(从网络摄像头访问视频(...

从HTML的角度来看，它本质上就是这个。

<body>
    <video id="video-bg>
    <div id="site_wrapper">
       <!--the html-->
    </div>
</body>

对于 CSS，您只需要使用 position:absolute 将 html 堆叠在视频上。顶部、左侧和右侧只是确保它们在顶部对齐，并拉伸到浏览器的宽度。

#site_wrapper{
    position:relative;
}
#video-bg {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
}

通过使用getUserMedia，将流转换为 blob 并将 blob 馈送到 <video> 元素中，可以从摄像机馈送视频。更多关于这个 MDN 示例的信息：

navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
    function(stream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e) {
      video.play();
    };
  },
  function(err) {
    console.log("The following error occured: " + err.name);
  }
);

网络摄像头不需要流式传输到互联网，网站只需要在本地获取视频信号

现在这让我有点困扰。如果您的网站在线网络上，那么"本地"一词将意味着观众的机器，而不是您的夜总会的机器。如果您希望俱乐部的视频在后台播放，则需要通过网络流式传输视频，并让页面将其流式传输下来。

如果您的网站是夜总会的售货亭，那么"本地"将是有意义的。您的信息亭将连接一个网络摄像头，并且上面的代码将适用。

相关文章：