2012-05-02 19 views
5

Mam komputer, który ma kamerę i czasami wyświetla stronę internetową w naszym klubie ...Zastosowanie Kamera jako HTML Tło

Chciałbym połączyć dwa i wyświetlić stronę internetową ze źródłem tło html będąc wideo wyjście z kamery internetowej na tym samym komputerze.

Kamera internetowa nie musi być przesyłana strumieniowo do Internetu, witryna musi jedynie lokalnie pozyskiwać sygnał wideo ... Nie wiem, jak byśmy to zrobili, ale efekt jest podobny do tego, tylko my " nie używaj Youtube jako źródła wideo - http://www.seanmccambridge.com/tubular/!

Może to być kombinacja HTML, CSS, jQuery i być może java lub lampy błyskowej (aby uzyskać dostęp do wideo z kamery) ...

+2

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ć? –

+0

upvote dla swojej nazwy użytkownika – samccone

+0

Nie jest jasne, czy Twoje pytanie dotyczy sposobu implementacji wideo jako tła lub przesyłania strumienia wideo. – feeela

Odpowiedz

2

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.

+0

Zastanawiasz się, jak zidentyfikować kamerę internetową jako źródło wideo ... –

+0

@BryanLovesPHP, który byłby w części flash. – Joseph

+0

VLC może przesyłać strumieniowo kamerę internetową, a następnie użyć jej jako źródła wideo Flash lub HTML5. – mddw