2012-05-02 8 views
5

として、私はウェブカメラを持って、時には私たちのナイトクラブでのウェブサイトを表示するコンピュータを持っている...使用WebcamのHTMLの背景

同じコンピュータ上のWebカメラから出力されます。

ウェブカメラは、インターネットにストリーミングする必要はありません、ウェブサイトは、ローカルでのみ映像信号を供給する必要があります...だけ私たちは」私たちはこれを行うだろうか知らないが、効果はこれに似ていますYoutubeをビデオソースとして使用しないでください - http://www.seanmccambridge.com/tubular/

多分これは多分jqueryの、CSS、HTMLの組み合わせであると、Javaまたはフラッシュ(ウェブカメラからビデオにアクセスするために)します...

+2

これを行う方法についての詳細はありますか?たとえば、既にWebページにウェブカメラを表示できますか?もしそうなら、あなたはどうやってそれをしますか?あなたの質問は、背景やどのようにビデオをストリーミングするような映像を実装する方法であれば、あなたのユーザ名の –

+0

upvoteは – samccone

+0

それは本当に明確ではありません。 – feeela

答えて

2

HTMLの観点から、それは基本的にこれだけです。

<body> 
    <video id="video-bg> 
    <div id="site_wrapper"> 
     <!--the html--> 
    </div> 
</body> 

CSSの場合は、position:absoluteを使用してビデオにHTMLをスタックする必要があります。上、左、右は、それらが上に揃えられ、ブラウザの幅に伸びるようにします。カメラからの映像を給餌

#site_wrapper{ 
    position:relative; 
} 

#video-bg { 
    position:absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

は、BLOBに流れを向けると<video>要素にブロブを送り、getUserMediaを使用することにより可能です。それにより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); 
    } 
); 

ウェブカメラは、インターネットにストリーミングする必要はありません、ウェブサイトは、ローカルでのみ

映像信号を供給する必要がある今、これは私に少し気になります。あなたのウェブサイトがオンラインのネットワーク上にある場合、「ローカル」とは、ナイトクラブのマシンではなく視聴者のマシンを意味します。クラブのビデオをバックグラウンドで再生したい場合は、ネットワーク経由でビデオをストリーミングし、ページをストリーミングする必要があります。

あなたのウェブサイトがナイトクラブのキオスクの場合、 "ローカル"は理にかなっています。あなたのキオスクにはウェブカメラが接続されており、上記のコードが適用されます。

+0

ちょうど...ビデオソースとしてフラッシュ部分にあるであろう –

+0

@BryanLovesPHPをウェブカメラを識別するか疑問。 – Joseph

+0

VLCでウェブカメラをストリーミングできるので、これをFlashビデオまたはHTML5ビデオのソースとして使用できます。 – mddw