Dal punto di vista HTML, è essenzialmente solo questo.
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
Per il CSS, basta impilare il codice html per il video utilizzando position:absolute. In alto, a sinistra ea destra è sufficiente assicurarsi che si allineano in alto e si estendano fino alla larghezza del browser.
#site_wrapper{
position:relative;
}
#video-bg {
position:absolute;
top: 0;
left: 0;
right: 0;
}
Feeding video dalla telecamera è possibile utilizzando getUserMedia, ruotare il flusso in un blob e alimentare il blob nell'elemento <video>. Più su di esso su 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 webcam non ha bisogno per lo streaming a internet, il sito ha solo bisogno di fonte il segnale video in locale
Ora questo mi disturba un po '. Se il tuo sito web si trova su una rete online, la parola "locale" significherebbe la macchina dello spettatore, non la macchina del tuo locale notturno. Se vuoi il video del tuo club in background, devi eseguire lo streaming del video sulla rete e far scorrere la pagina verso il basso.
Se il tuo sito web è un chiosco nella tua discoteca, quindi "locale" avrebbe senso. Il tuo chiosco avrebbe una webcam agganciata e il codice sopra sarebbe applicato.
Avete * qualche * dettagli su come farlo? Ad esempio, puoi già visualizzare la webcam in una pagina web? Se è così, come si fa? –
upvote per il tuo username – samccone
Non è chiaro se la tua domanda è su come implementare il video come sfondo o come fare lo streaming del video. – feeela