从 HTML 的角度来看,它本质上就是这样。
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
对于 CSS,您只需使用position:absolute
. 顶部、左侧和右侧只是确保它们与顶部对齐,并拉伸到浏览器的宽度。
#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);
}
);
网络摄像头无需流式传输到互联网,网站只需在本地获取视频信号
现在这让我有点困扰。如果您的网站位于 online 网络上,那么“本地”一词将表示观看者的机器,而不是您夜总会的机器。如果您想在后台播放俱乐部的视频,则需要通过网络传输视频,并让页面将其向下传输。
如果您的网站是夜总会中的信息亭,那么“本地”将是有意义的。您的信息亭将挂上网络摄像头,上面的代码将适用。