ScriptCam/demo8.htm at master · teleline/ScriptCam · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
	<head>
		<style>
		.slides_container {
			width:570px;
			overflow:hidden;
			position:relative;
			display:none;
		}

		.slides_container div.slide {
			width:570px;
			height:270px;
			display:block;
		}

		.pagination {
			padding-left:260px;
		}

		.pagination li {
			float:left;
			margin:0 1px;
			list-style:none;
		}

		.pagination li a {
			display:block;
			width:12px;
			height:0;
			padding-top:12px;
			background-image:url(pagination.png);
			background-position:0 0;
			float:left;
			overflow:hidden;
		}

		.pagination li.current a {
			background-position:0 -12px;
		}
		</style>
		<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
		<script src="https://rawgithub.com/nathansearles/Slides/SlidesJS-1.1.8/source/slides.min.jquery.js"></script>
		<script language="JavaScript" src="scriptcam.js"></script>

		<script>
			$(document).ready(function() {
				$('#slides').slides({
					preload: true,
					preloadImage: 'loading.gif',
					next: 'nextb',
					prev: 'prevb'
				});
				$("#webcam").scriptcam({
					onHandLeft:onHandLeftFunction,
					onHandRight:onHandRightFunction,
					onError:onError,
					onWebcamReady:onWebcamReady,
					cornerRadius:0,
					zoom:0.7,
					posX:224,
					posY:0,
					flip:1
				});
			});

			function onError(errorId,errorMsg) {
				alert(errorMsg);
			}
			function changeCamera() {
				$.scriptcam.changeCamera($('#cameraNames').val());
			}
			function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
				$.each(cameraNames, function(index, text) {
					$('#cameraNames').append( $('<option></option>').val(index).html(text) )
				});
				$('#cameraNames').val(camera);
			}
			function onHandLeftFunction() {
				$('.prevb').click();
			}

			function onHandRightFunction() {
				$('.nextb').click();
			}
		</script>
	</head>
	<body>
		<div id="slides">
			<div class="slides_container">
				<div class="slide">
					<img src="slide-1.jpg">
				</div>
				<div class="slide">
					<img src="slide-2.jpg">
				</div>
				<div class="slide">
					<img src="slide-3.jpg">
				</div>
				<div class="slide">
					<img src="slide-4.jpg">
				</div>
				<div class="slide">
					<img src="slide-5.jpg">
				</div>
				<div class="slide">
					<img src="slide-6.jpg">
				</div>
				<div class="slide">
					<img src="slide-7.jpg">
				</div>
			</div>
			<button class="prevb">PREV</button>
			<button class="nextb">NEXT</button>
		</div>
		<br/>
		<div id="webcam"></div>
		<div style="margin:5px;">
			<img src="webcamlogo.png" style="vertical-align:text-top"/>
			<select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
			</select>
		</div>
	</body>
</html>