将网络摄像头用作HTML背景

Question

将网络摄像头用作HTML背景

javascripthtml

5

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

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

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

也许这将是html、css、可能是jquery和java或flash（用于访问来自网络摄像头的视频）的组合...

- Bryan Loves PHP

3

你有关于如何做到这一点的任何细节吗？例如，您可以在网页中显示网络摄像头吗？如果可以，那么如何实现呢？ - Lasse V. Karlsen

给你的用户名点赞 - samccone

你的问题不是很清楚，是关于如何将视频作为背景实现还是如何流式传输视频。 - feeela

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph · Accepted Answer

从HTML的角度来看，它基本上只是这样。

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

对于CSS，您只需要使用position:absolute将HTML叠加在视频上。 top，left和right仅确保它们对齐顶部并延伸到浏览器的宽度。

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

摄像头不需要流到互联网上，网站只需要在本地获取视频信号。

现在这让我有点困扰。如果你的网站在一个网络或在线上，那么“本地”一词将意味着观看者的机器，而不是你的夜总会的机器。如果你想要在背景中播放你的俱乐部视频，你需要通过网络传输视频，并让页面将其下载流式传输。

如果你的网站是你的夜总会里的一个信息亭，那么“本地”就有意义了。你的信息亭会连接一个摄像头，上述代码将适用。