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);
}
);
ウェブカメラは、インターネットにストリーミングする必要はありません、ウェブサイトは、ローカルでのみ
映像信号を供給する必要がある今、これは私に少し気になります。あなたのウェブサイトがオンラインのネットワーク上にある場合、「ローカル」とは、ナイトクラブのマシンではなく視聴者のマシンを意味します。クラブのビデオをバックグラウンドで再生したい場合は、ネットワーク経由でビデオをストリーミングし、ページをストリーミングする必要があります。
あなたのウェブサイトがナイトクラブのキオスクの場合、 "ローカル"は理にかなっています。あなたのキオスクにはウェブカメラが接続されており、上記のコードが適用されます。
これを行う方法についての詳細はありますか?たとえば、既にWebページにウェブカメラを表示できますか?もしそうなら、あなたはどうやってそれをしますか?あなたの質問は、背景やどのようにビデオをストリーミングするような映像を実装する方法であれば、あなたのユーザ名の –
upvoteは – samccone
それは本当に明確ではありません。 – feeela