使用网络摄像头作为 HTML 背景
Posted
技术标签:
【中文标题】使用网络摄像头作为 HTML 背景【英文标题】：Use Webcam as HTML Background 【发布时间】：2012-05-11 19:29:22 【问题描述】：我有一台带有网络摄像头的电脑，有时会在我们的夜总会显示一个网站......
我想将两者合并并显示网站，其中 html 背景源是同一台计算机上网络摄像头的视频输出。
网络摄像头不需要流式传输到互联网，网站只需要在本地获取视频信号......我不知道我们该怎么做，但效果类似，只是我们是不使用 Youtube 作为视频源 - http://www.seanmccambridge.com/tubular/!
也许这将是 html、css、jquery 和 java 或 flash 的组合（从网络摄像头访问视频）...
【问题讨论】：
您有任何关于如何执行此操作的详细信息吗？例如，您可以在网页中显示网络摄像头吗？如果是这样，你是怎么做到的？ 为您的用户名点赞 不清楚您的问题是关于如何将视频实现为背景或如何流式传输视频。 【参考方案1】：从 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> 元素。更多信息请访问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);
);
网络摄像头无需流式传输到互联网，网站只需在本地获取视频信号
现在这让我有点困扰。如果您的网站位于在线网络上，那么“本地”一词将表示观看者的机器，而不是您夜总会的机器。如果您希望在后台播放俱乐部的视频，则需要通过网络传输视频，并让页面向下传输。
如果您的网站是您夜总会中的信息亭，那么“本地”是有意义的。您的信息亭将挂上一个网络摄像头，上面的代码将适用。
【讨论】：
@BryanLovesphp 将在 Flash 部分中。 VLC 可以流式传输网络摄像头，然后您可以将其用作 Flash 视频或 HTML5 视频的来源。以上是关于使用网络摄像头作为 HTML 背景的主要内容，如果未能解决你的问题，请参考以下文章