01.<style type="text/css">
02.body{
03. margin:0;
04.padding:0;
05.}
06..img
07. { background:#ffffff;
08. padding:12px;
09. border:1px solid #999999; }
10..shiva{
11. -moz-user-select: none;
12. background: #2A49A5;
13. border: 1px solid #082783;
14. box-shadow: 0 1px #4C6BC7 inset;
15. color: white;
16. padding: 3px 5px;
17. text-decoration: none;
18. text-shadow: 0 -1px 0 #082783;
19. font: 12px Verdana, sans-serif;}
20.</style>
21.<html>
22.<body style="background-color:#dfe3ee;">
23.<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
24.</div>
25.<div id="main" style="height:800px; width:100%">
26.<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
27.<script type="text/javascript" src="webcam.js"></script>
28.<script language="JavaScript">
29. document.write( webcam.get_html(440, 240) );
30.</script>
31.<form>
32.<br />
33.
34. <input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
35.
36. <input type=button value="snap" onClick="take_snapshot()" class="shiva">
37. </form>
38.
39.
40.</div>
41.
42.<script type="text/javascript">
43. webcam.set_api_url( 'handleimage.php' );
44. webcam.set_quality( 90 );
45. webcam.set_shutter_sound( true );
46. webcam.set_hook( 'onComplete', 'my_completion_handler' );
47.
48. function take_snapshot(){
49.
50. document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
51.
52. webcam.snap();
53. }
54.
55. function my_completion_handler(msg) {
56.
57. if (msg.match(/(http\:\/\/\S+)/)) {
58.
59.
60. document.getElementById('img').innerHTML ='<h3>Upload Successfuly done</h3>'+msg;
61.
62. document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";
63.
64.
65.
66. webcam.reset();
67. }
68. else {alert("Error occured we are trying to fix now: " + msg); }
69. }
70. </script>
71.
72.<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
73.</div>
74.</div>
75.</body>
76.</html>
