Desde el punto de vista HTML, que es esencialmente sólo esto.
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
Para el CSS, sólo tiene que apilar el html sobre el vídeo usando position:absolute. La parte superior, izquierda y derecha solo se aseguran de que se alineen en la parte superior y se extienden al ancho del navegador.
#site_wrapper{
position:relative;
}
#video-bg {
position:absolute;
top: 0;
left: 0;
right: 0;
}
La alimentación de vídeo de la cámara es posible mediante el uso getUserMedia, convertir la corriente en una masa y alimentar la burbuja en el elemento <video>. Más sobre ella en 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);
}
);
La cámara web no tiene que transmitir a internet, el sitio sólo se necesita a la fuente de la señal de vídeo localmente
Ahora bien, esto me molesta un poco. Si su sitio web está en una red en línea, entonces la palabra "local" significaría la máquina del espectador, no la máquina de su discoteca. Si desea que el video de su club esté en segundo plano, deberá transmitir el video a través de la red y hacer que la página lo transmita.
Si su sitio web es un quiosco en su discoteca, entonces "local" tendría sentido. Su kiosco tendría una cámara web conectada y se aplicaría el código anterior.
¿Tiene * cualquier * información sobre cómo hacer esto? Por ejemplo, ¿puedes mostrar la cámara web en una página web? Si es así, ¿cómo haces eso? –
upvote para su nombre de usuario – samccone
No está claro si su pregunta es sobre cómo implementar el video como fondo o cómo transmitir el video. – feeela