Z punktu widzenia HTML, to w zasadzie tylko to.
<body>
<video id="video-bg>
<div id="site_wrapper">
<!--the html-->
</div>
</body>
Dla CSS, wystarczy stos html nad filmem stosując position:absolute
. Górny, lewy i prawy po prostu upewnia się, że wyrównują górę i rozciągają się do szerokości przeglądarki.
#site_wrapper{
position:relative;
}
#video-bg {
position:absolute;
top: 0;
left: 0;
right: 0;
}
karmienia wideo z kamery jest możliwe za pomocą getUserMedia
skręcić strumień do blob i paszy blob na element <video>
. Więcej na nim na 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);
}
);
Kamera nie musi przesyłać do internetu, strona potrzebuje tylko do źródła sygnału wideo lokalnie
Teraz to przeszkadza mi trochę. Jeśli twoja strona internetowa znajduje się w sieci pod numerem, słowo "lokalny" będzie oznaczać komputer widza, a nie urządzenie twojego nocnego klubu. Jeśli chcesz, aby wideo Twojego klubu było w tle, musisz przesłać strumieniowo wideo przez sieć i przesłać je strumieniowo.
Jeśli twoja strona internetowa jest kioskiem w twoim klubie nocnym, wtedy "lokalny" miałby sens. Twój kiosk byłby podłączony do kamery internetowej, a powyższy kod miałby zastosowanie.
Czy masz * dowolne * dane, jak to zrobić? Na przykład, czy możesz już wyświetlać kamerę internetową na stronie internetowej? Jeśli tak, jak to zrobić? –
upvote dla swojej nazwy użytkownika – samccone
Nie jest jasne, czy Twoje pytanie dotyczy sposobu implementacji wideo jako tła lub przesyłania strumienia wideo. – feeela