0

Web ページの Web カメラ画面に画像を配置しようとしています。jQuery ウェブカメラ プラグインを使用して、ウェブカメラ画面をウェブページに配置しました。

jQuery プラグインへのリンク: http://www.xarg.org/project/jquery-webcam-plugin/

ここで、画面の上に画像を配置して、ウェブカメラの画面を非表示にしたり、その上に背景を配置したりして、木の後ろにいるように見せたいと考えています。

これを行う方法を知っている人はいますか? その上に画像を配置するだけで試してみましたが、常にウェブカメラが一番上に来ます。

4

1 に答える 1

0

簡単な解決策は、jQuery を使用してオブジェクトを非表示にすることです...

それが<div id="webcam">あなたが使用できる内にあると仮定します：

 $('#webcam').hide();

そして後で使用します：

 $('#webcam').fadeIn(); // or .show();

しかし、画像ソリューションの場合、次のようなことを試すことができます:

 <div id="webcam">
    <div id="over_image"></div>
    <object id="webcam-object" type="application/x-shockwave-flash" data="/download/jscam_canvas_only.swf" width="320" height="240"><param name="movie" value="/download/jscam_canvas_only.swf"><param name="WMODE" value="transparent"> <param name="FlashVars" value="mode=callback&amp;quality=85"></object>
 </div>

css を次のようにします。

 #webcam { width: 320px; height: 240px; position: relative; }
 #over_image { width: 320px; height: 240px; 
               position: absolute; z-index: 100; top: 0;
               background-image: url('someimage.jpg');
 }

以下を含める必要があることに注意してください。

<param name="WMODE" value="transparent">jquery プラグインがフラッシュを設定する方法がわからないため、コードの一部を変更する必要がある場合があります。

これを含めないと、z-indexプロパティは正しく機能しません。(これが、試していた背景画像が正しく機能しなかった理由である可能性があります。)

于 2012-05-19T07:33:51.143 に答える