5

私はウェブカメラを搭載したコンピューターを持っており、時々ナイトクラブのウェブサイトを表示します...

2つをマージして、同じコンピューターのWebカメラからのビデオ出力であるhtmlバックグラウンドソースを使用してWebサイトを表示したいと思います。

ウェブカメラはインターネットにストリーミングする必要はありません。ウェブサイトはローカルでビデオ信号をソースするだけで済みます...どのようにこれを行うかはわかりませんが、効果はこれと似ていますが、YouTube を使用していないだけです。ビデオソースとして - http://www.seanmccambridge.com/tubular/ !

おそらく、これはhtml、css、おそらくjqueryとjavaまたはflash（ウェブカメラからビデオにアクセスするため）の組み合わせになるでしょう...

4

1 に答える 1

3

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

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

CSS の場合は、.html を使用して動画の上に html をスタックするだけですposition:absolute。上、左、および右は、それらが上に整列し、ブラウザの幅に伸びることを確認するだけです。

#site_wrapper{
    position:relative;
}

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

を使用してカメラからビデオをフィードすることができgetUserMediaます。ストリームをブロブに変換し、ブロブを<video>要素にフィードします。この MDNの例の詳細:

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 サイトが online のネットワーク上にある場合、「ローカル」という言葉は、ナイトクラブのマシンではなく、視聴者のマシンを意味します。バックグラウンドでクラブのビデオが必要な場合は、ビデオをネットワーク経由でストリーミングし、ページでストリーミングする必要があります。

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

于 2012-05-02T10:23:33.407 に答える