изображение поверх экрана веб-камеры, созданного jQuery

Question

Я пытаюсь разместить изображение на экране веб-камеры на своей веб-странице. Я использовал плагин веб-камеры jQuery, чтобы разместить экран веб-камеры на моей веб-странице.

Ссылка на плагин JQuery: http://www.xarg.org/project/jquery-webcam-plugin/

Теперь я хочу, чтобы поместить изображение выше экрана, так что я мог бы сделать экран веб-камеры невидимы, или поместить фон над ним, так что это будет выглядеть, как вы позади дерево.

У кого-нибудь есть идея, как это сделать; Я попытался просто поместить в него изображение, но веб-камера всегда на вершине.

Answer 1

Простое решение может быть просто использовать JQuery, чтобы скрыть объект ...

Assumming это внутри <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 будет работать неправильно. (Возможно, поэтому фоновое изображение, которое вы пытались, работало неправильно.)