FileAPI/examples/webcam.html at dev · brainzhang-javascript/FileAPI · 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
127
128
129
<!DOCTYPE html>
<!--


		~~~ Демонстрация работы с Камерой ~~~
		           (NativeJS + FileAPI)


-->
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<meta name="viewport" content="user-scalable=no, width=400, initial-scale=1, maximum-scale=1" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
	<meta name="format-detection" content="email=no" />
	<meta name="HandheldFriendly" content="true" />

	<title>FileAPI :: WebCam :: example</title>

	<script>
		// Settings
		var FileAPI = {
			  debug: true // debug mode
			, staticPath: '../dist/'
		};
	</script>

	<script src="../dist/FileAPI.js"></script>
	<script src="../plugins/FileAPI.exif.js"></script>

	<style>
		body {
			font-size: 15px;
			font-family: "Helvetica Neue";
		}

		button {
			font-size: 20px;
		}
	</style>

</head>
<body>
	<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">
		<div style="padding: 5px 10px 10px">
			<a href="../">&larr; index</a> |
			<a href="./demo.html">demo</a> -
			<a href="./userpic.html">userpic</a> -
			<a href="./thumbnails.html">thumbnails</a> -
			<a href="./watermark.html">watermark</a> -
			<b>webcam</b> -
			<a href="./caman.html">caman.js</a>
		</div>
	</div>

	<div style="padding-bottom: 100px;">
		<h2>WebCam</h2>
		<div id="box"></div>

		<div id="readyBox" style="display: none">
			<button id="shotBtn">shot</button>
			<button id="startBtn">start</button>
			<button id="stopBtn">stop</button>

			<h3>Shots</h3>
			<div id="shots"><b></b></div>

			<h3>Server</h3>
			<div id="server"><b></b></div>
		</div>
	</div>

	<script>
		(function (){
			FileAPI.Camera.publish(box, { width: 320, height: 240 }, function (err, cam){
				readyBox.style.display = '';

				FileAPI.event.on(startBtn, 'click', function (){
					cam.start();
				});

				FileAPI.event.on(stopBtn, 'click', function (){
					cam.stop();
				});

				FileAPI.event.on(shotBtn, 'click', function (){
					if( cam.isActive() ){
						var shot = cam.shot();

						shot
							.clone()
							.preview(100, 100)
							.get(function (err, img){
								img.style.marginRight = '5px';
								shots.insertBefore(img, shots.firstChild);
							})
						;

						var file = shot
							.preview(200, 200)
							.overlay({
								  x: 5
								, y: 5
								, src: '../statics/watermark.png'
								, rel: FileAPI.Image.RIGHT_TOP
							})
						;

						FileAPI.upload({
							  url: 'http://rubaxa.org/FileAPI/server/ctrl.php'
							, files: { shot: file }
							, complete: function (err, xhr){
								var res = JSON.parse(xhr.responseText);
								var img = new Image;
								img.src = res.images.shot.dataURL;
								img.style.marginRight = '5px';
								server.insertBefore(img, server.firstChild);
							}
						});
					}
				});
			});
		})();
	</script>
</body>
</html>