By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.

com
Integrate JPEGCAM with WaveMaker
1.Start a new project on wavemaker or use your current project
2.On Main page or desired page add a panel widget and put name
panelHolder
3.reate a wm.varia!le called varia!le"ast#icture$%" and set owner
to &pplication
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
'.On javascript source code o( t)e current page add t)is code
on start (unction and later we going to create t)e (unction init*orm to
add in panelHolder t)e jpegcam components..please c)eck t)e
)ig)tlig)ted words
start: function() {
try {
need insert !ere t!e custom code for "#egcam to a $m.#anel via domnode
t!is.init%orm()&
' catc! (e) {
a##.toast(rror(t!is.name ) *.start() %ailed: * ) e.to+tring())&
'
',
init%orm: function() {
!ere add t!e controls for "#egcam
var !tmlContent - .
/<em0ed id-*$e0cam1movie* src-*$e0cam.s$f* loo#-*false* menu-*false* 2uality-*0est* 0gcolor-*3ffffff*
$idt!-*456* !eig!t-*576* name-*$e0cam1movie* align-*middle* allo$+cri#t8ccess-*al$ays*
allo$%ull+creen-*false* ty#e-*a##lication9:s!oc;$ave:flas!*
#lugins#age-*!tt#:$$$.macromedia.comgogetflas!#layer*
flas!vars-*s!utter1ena0led-<=s!utter1url-s!utter.m#4=$idt!-456=!eig!t-576=server1$idt!-456=server1!eig!t-5
76* >/,
/<form>/,
/<in#ut ty#e-0utton value-*Configure...* onClic;-*$e0cam.configure()*>/,
/<in#ut ty#e-*!idden* name-*met!od* value-*u#load%ile* >/,
/=n0s#&/,
/=n0s#&/,
/<in#ut ty#e-0utton value-*>a;e +na#s!ot* onClic;-*document.get(lementBy?d(@/u#load1results@/).innerA>MB -
@/<!<>C#loading...<!<>@/&$e0cam.sna#()&*>/,
/<form>/,
/<div id-*u#load1results* style-*0ac;ground:color:3eee&*>/,
/<div>/D&
try {
var node - t!is.*#anelAolder<*D.domEode&
node.innerA>MB - !tmlContent."oin(//)&

' catc! (e) {
console.error(/(RRFR ?E init%orm: / ) e)&
'
',
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
+.opy t)e jpegcam sources t)at i attac)ed on
,O$%-#&.H-O*-/&01M&21%-#%O31.S4projects4,O$%-#%O31.
-5&M14we!approot and also create a (older called uploads (or
store t)e pictures
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
6.7o to
,O$%-#&.H-O*-/&01M&21%-#%O31.S4projects4,O$%-#%O3
1.-5&M14we!approot
and edit t)e inde8.)tml (ile wit) your custom editor.
/e need to add t)e ne8t code (or sources o( jpegcam can load in
wavemaker project
after
<scri#t ty#e-*te9t"avascri#t* src-*>a;eGicture."s*><scri#t>
and before of this
<scri#t ty#e-*te9t"avascri#t*>
function #rom#tHoogle%rame()
add this code:
<!-- First, include the JPEGCam JavaScript Library -->
<script type!te"t#$avascript! src!%ebcam&$s!><#script>
<!-- C'n(i)ure a settin)s here ('r start the $pe)cam ('r -->
<script lan)ua)e!JavaScript!>
%ebcam&set*api*url+ ,%ebcam&d', -.##callin) t' servlet %ebcam&d' url address
%ebcam&set*/uality+ 01 -. ## JPEG /uality +2 - 211-
%ebcam&set*shutter*s'und+ true -. ## play shutter clic3 s'und
%ebcam&set*h''3+ ,'nC'mplete,, ,my*c'mpleti'n*handler, -.##sendin) the resp'nse t' the (uncti'n
!my*c'mpleti'n*handler!
<#script>
<!-- end start c'de ('r $pe)cam -->
and more in t!e 0ottom
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
after
C%?nstall.c!ec;({node:/googleC!rome%rameIiv/, #reventGrom#t:false, onmissing: do"o.!itc!($indo$,
/#rom#tHoogle%rame/)')&
'
and before of this
ne$ >a;eGicture({domEode: *$avema;erEode*').run()&
add this code:
##this (uncti'n receive the return resp'nse (r'm $pe)cam a
##nd save int' the %avema3er variable variableLastPicture45L
(uncti'n my*c'mpleti'n*handler+ms)- 6
## e"tract 45L 'ut '( Java Servlet 'utput
i( +ms)&match+#+http787#7#7S9-#-- 6
var ima)e*url 5e)E"p&:2.
## sh'% JPEG ima)e in pa)e
d'cument&)etElement;y<d+,upl'ad*results,-&inner=>?L
,<h2>4pl'ad Success(ul!<#h2>,.
try6
##here insert the ima)e url in 'ne %avema3er variable
app&variableLastPicture45L&set@alue+!data@alue!,ima)e*url-.
A
catch+e-6
%ind'%&alert+e&name-.
A
## reset camera ('r an'ther sh't
%ebcam&reset+-.
A
else alert+!Java Err'r8 ! 9 ms)-.
A
##EBC JPEGCam CDCE
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
9. *or t)e java servlet class t)at need receive t)e jpeg and store on t)e
server. 7o to
,O$%-#&.H-O*-/&01M&21%-#%O31.S4projects4,O$%-#%O3
1.-5&M14we!approot4/1:;<5*
and edit t)e (ile user;we!.8ml wit) your custom editor and add t)e
)iglig)ted code
<E"ml versi'n!2&1! enc'din)!4>F-F!E>
<!--
>his is an appr'priate place ('r user m'di(icati'ns t' the %eb&"ml&
Entries (r'm this (ile %ill be c'mbined %ith the de(ault Gave?a3er %eb&"ml.
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
the 'rder is n't )uaranteed&
C'ntent chan)es must )' bet%een the t%' ta)s bel'%&
-->
<%eb-app "mlns!http8##$ava&sun&c'm#"ml#ns#$Hee!
"mlns8"si!http8##%%%&%I&'r)#H112#J?LSchema-instance!
"si8schemaL'cati'n!http8##$ava&sun&c'm#"ml#ns#$Hee http8##$ava&sun&c'm#"ml#ns#$Hee#%eb-app*H*K&"sd!
versi'n!H&K!>
<display-name>Pr'$ect Bame<#display-name>
<%elc'me-(ile-list>
<%elc'me-(ile>inde"&html<#%elc'me-(ile>
<#%elc'me-(ile-list>

<!-- Servlet Class ('r send the $pe) ima)e t' server-->
<servlet>
<servlet-name>upl'adJpe)Cam<#servlet-name>
<servlet-class>PictureCaptureServlet<#servlet-class>
<#servlet>
<servlet-mappin)>
<servlet-name>upl'adJpe)Cam<#servlet-name>
<url-pattern>#%ebcam&d'<#url-pattern>
<#servlet-mappin)>
<!-- end Servlet -->

<#%eb-app>
=.reate a java service wit) any name...>not goin to used? ...just (or
create t)e java (olders and can work wit) t)e servlet class t)at we
need
9. On netbeans or another IDE for java imort the wavemaker roje!t for
!an !reate the serv"et an# !omi"e
$htt%&&#ev.wavemaker.!om&for'ms&()*no#e&+,+9 -
Just need create a #ro"ect on t!is case in net0eans ?I( $it! same name of #ro"ect of $avema;er
and set t!e src "ava files $!ere is located t!e "ava service t!at create on t!e #revios ste#.
Bater add t!e "ar li0s of your $avema;er #ro"ect into net0eans #ro"ect and also add t!e servlet:
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
a#i."ar (is attac!ed on t!e files t!at i send you) for can recognize t!e servlets classes.
8fter made t!is im#ort create a java class called PictureCaptureServlet
and add t)is code
imp'rt $ava&i'&File.
imp'rt $ava&i'&FileDutputStream.
imp'rt $ava&i'&<DE"cepti'n.
imp'rt $ava&util&Cate.
imp'rt $ava"&servlet&ServletC'n(i).
imp'rt $ava"&servlet&ServletE"cepti'n.
imp'rt $ava"&servlet&http&=ttpServlet.
imp'rt $ava"&servlet&http&=ttpServlet5e/uest.
imp'rt $ava"&servlet&http&=ttpServlet5esp'nse.
public class PictureCaptureServlet e"tends =ttpServlet 6
private static (inal l'n) serial@ersi'n4<C 2L.
private Strin) (ileSt're45L !!.
public PictureCaptureServlet+- 6
super+-.
A
public v'id init+ServletC'n(i) c'n(i)- thr'%s ServletE"cepti'n 6
(ileSt're45L c'n(i)&)etServletC'nte"t+-&)et5ealPath+!!- 9 !#upl'ads!.
try 6
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
File ( ne% File+(ileSt're45L-.
i( +!(&e"ists+-- 6
(&m3dirs+-.
A
A catch +E"cepti'n e- 6
A
A
pr'tected v'id service+=ttpServlet5e/uest re/uest,
=ttpServlet5esp'nse resp'nse- thr'%s ServletE"cepti'n, <DE"cepti'n 6
try 6
l'n) time ne% Cate+-&)et>ime+-.
FileDutputStream (ileDutputStream ne% FileDutputStream+
(ileSt're45L 9 !#!9time9!&$p)!-.
int res.
%hile ++res re/uest&)et<nputStream+-&read+-- ! -2- 6
(ileDutputStream&%rite+res-.
A
(ileDutputStream&cl'se+-.
#LL
L >' ma3e sure each url is di((ereent and n't cached added time t' tit
L#
resp'nse&)etGriter+-&append+!http://localhost:8094/TakePicture/uploads/!9 time9 !&$p)!-.
A catch +E"cepti'n e- 6
e&printStac3>race+-.
A (inally 6
A
A
A
Fne im#ortant t!ing !ere is t!is if you $ant c!ange t!e url or name of folder to u#loads t!e #!otos
so need to c!ange t!is 5 lines of code to your customs names..
(ileSt're45L c'n(i)&)etServletC'nte"t+-&)et5ealPath+!!- 9 !#upl'ads!.
resp'nse&)etGriter+-&append+!http://localhost:8094/TakePicture/uploads/!9 time9 !&$p)!-. t' 'ther name
1@. compile t)e java servlet
...if all is good you !ave a class file in Ho to
KFCR1G8>A1F%1L8M(M8N(R1GRFJ(C>+#ro"ectsKFCR1GRFJ(C>1E8M(0uildclasses
By Manuel Rodriguez Coria <mavirroco> mavirroco@gmail.com
called PictureCaptureServlet.class so ne9t ste# is co#y to
KFCR1G8>A1F%1L8M(M8N(R1GRFJ(C>+#ro"ectsKFCR1GRFJ(C>1E8M($e0a##root
L(B:?E%classes
and RCE t!e $avema;er #ro"ect..
t)atAs all )ope t)is can !e like you e8pected...