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

我有一台装有网络摄像头的计算机，有时在我们的夜总会中显示一个网站...

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

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

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

解决方案如下：

从HTML的 Angular 来看，本质上就是这样。

<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>元素。有关
this MDN example的更多信息:

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);
  }
);

The webcam does not need to stream to the internet, the website only needs to source the video signal locally

现在，这让我有些困扰。如果您的网站位于在线网络上，则“本地”一词将表示观看者的机器，而不是您的夜总会的机器。如果要在后台显示俱乐部的视频，则需要通过网络流式传输视频，并使页面向下流式传输。

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