Menu
I have a computer which has a webcam and sometimes displays a website at our nightclub ...
I would like to merge the two and display the website with the html background source being the video output from the webcam on the same computer.
The webcam does not need to stream to the internet, the website only needs to source the video signal locally ... I don't know how we'd do this but the effect is similar to this, only we're not using Youtube as the video source - http://www.seanmccambridge.com/tubular/!
Maybe this will be a combination of html, css, maybe jquery and java or flash (to access the video from the webcam)...
779
From the HTML standpoint, it's essentially just this.
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
For the CSS, you just need to stack the html over the video using position:absolute. The top, left, and right just makes sure that they align top, and stretch to the browser's width.
#site_wrapper{
position:relative;
}
#video-bg {
position:absolute;
top: 0;
left: 0;
right: 0;
}
Feeding video from the camera is possible by using getUserMedia, turn the stream into a blob and feed the blob into the <video> element. More on it on 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
Now this bothers me a bit. If your website is on a network on online, then the word "local" would mean the viewer's machine, not your nightclub's machine. If you want your club's video in the background, you'd need to stream the video over the network, and have the page stream it down.
If your website is a kiosk in your nightclub, then "local" would make sense. Your kiosk would have a webcam hooked and the code above would apply.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
