40
40
</div>
41
41
</div>
42
42
<div class="right_container">
43
- <div class="label" >Scan From Camera</div>
44
- <canvas id="canvas" width="640" height="480"></canvas>
45
- <img id="photo" width="320px" height="320px" >
43
+ <div class="label" ><button id="scan_btn" >Scan From Camera</button></div>
46
44
<form action="imageprocess.php" method="post" enctype="multipart/form-data" >
47
- <video id="video" width="640" height="480" autoplay></video>
48
45
<!--<input type="file" name="userimage" class="file_button" accept="image/*;capture=camera" value="Scan">-->
49
46
<!--<input type="submit" value="upload" style="float: right; margin-right: 25px;">-->
50
47
</form>
51
- <button id="snap">Snap Photo</button>
52
48
</div>
53
49
</div>
50
+ <div class="cam" id="cam" >
51
+ <canvas id="canvas" width="640" height="480"></canvas>
52
+ <video id="video" width="640" height="480" autoplay></video>
53
+ <button id="snap">Snap Photo</button>
54
+ <button id="process" >Process</button>
55
+ </div>
56
+ <!--<img id="photo" width="320px" height="320px" >-->
54
57
<div class="maincontainer" >
55
58
<div class="leftcontainer" >
56
59
<div class="player" >
@@ -97,7 +100,9 @@ class="controls" >Your browser doesn't allow this feature</audio>
97
100
var angry_btn = document.getElementById("angry");
98
101
var bored_btn = document.getElementById("bored");
99
102
var music = document.getElementById("music");
100
-
103
+ var scan_btn = document.getElementById("scan_btn");
104
+
105
+
101
106
var visualizer = document.getElementById("visualizer");
102
107
var scene_path = "images/scene";
103
108
@@ -124,171 +129,48 @@ class="controls" >Your browser doesn't allow this feature</audio>
124
129
var canvas = document.getElementById('canvas');
125
130
var context = canvas.getContext('2d');
126
131
var video = document.getElementById('video');
132
+ var cam = document.getElementById("cam");
133
+ var process_btn = document.getElementById('process');
134
+ var dataURL;
135
+
136
+ scan_btn.onclick = function()
137
+ {
138
+ closeWindow("sense_window");
139
+ closeWindow("grey_mask");
140
+ cam.style.display = "block";
141
+ process_btn.style.display = "none";
142
+ }
143
+
144
+ process_btn.onclick = function()
145
+ {
146
+ cam.style.display = "none";
147
+ window.location = "imageprocess.php";
148
+ }
127
149
128
150
// Trigger photo take
129
151
document.getElementById("snap").addEventListener("click", function() {
130
152
context.drawImage(video, 0, 0, 640, 480);
131
- });
132
-
133
- /*var video;
134
- var webcamStream;
135
-
136
- function startWebcam() {
137
- if (navigator.getUserMedia) {
138
- navigator.getUserMedia (
139
-
140
- // constraints
141
- {
142
- video: true,
143
- audio: false
144
- },
145
-
146
- // successCallback
147
- function(localMediaStream) {
148
- video = document.querySelector('video');
149
- video.src = window.URL.createObjectURL(localMediaStream);
150
- webcamStream = localMediaStream;
151
- },
152
-
153
- // errorCallback
154
- function(err) {
155
- console.log("The following error occured: " + err);
156
- }
157
- );
158
- } else {
159
- console.log("getUserMedia not supported");
160
- }
161
- }
162
-
163
- function stopWebcam() {
164
- webcamStream.stop();
165
- }
166
- //---------------------
167
- // TAKE A SNAPSHOT CODE
168
- //---------------------
169
- var canvas, ctx;
170
-
171
- function init() {
172
- // Get the canvas and obtain a context for
173
- // drawing in it
174
- canvas = document.getElementById("myCanvas");
175
- ctx = canvas.getContext('2d');
176
- }
177
-
178
- function snapshot() {
179
- // Draws current image from the video element into the canvas
180
- ctx.drawImage(video, 0,0, canvas.width, canvas.height);
181
- }*/
182
-
183
-
184
- /*(function() {
185
- // The width and height of the captured photo. We will set the
186
- // width to the value defined here, but the height will be
187
- // calculated based on the aspect ratio of the input stream.
153
+ video.style.display = "none";
154
+ canvas.style.display = "block";
188
155
189
- var width = 320; // We will scale the photo width to this
190
- var height = 0; // This will be computed based on the input stream
156
+ dataURL = canvas.toDataURL();
191
157
192
- // |streaming| indicates whether or not we're currently streaming
193
- // video from the camera. Obviously, we start at false.
194
-
195
- var streaming = false;
196
-
197
- // The various HTML elements we need to configure or control. These
198
- // will be set by the startup() function.
199
-
200
- var video = null;
201
- var canvas = null;
202
- var photo = null;
203
- var startbutton = null;
204
-
205
- function startup() {
206
- video = document.getElementById('video');
207
- canvas = document.getElementById('canvas');
208
- photo = document.getElementById('photo');
209
- startbutton = document.getElementById('startbutton');
210
-
211
- navigator.mediaDevices.getUserMedia({video: true, audio: false})
212
- .then(function(stream) {
213
- video.srcObject = stream;
214
- video.play();
215
- })
216
- .catch(function(err) {
217
- console.log("An error occurred: " + err);
218
- });
219
-
220
- video.addEventListener('canplay', function(ev){
221
- if (!streaming) {
222
- height = video.videoHeight / (video.videoWidth/width);
223
-
224
- // Firefox currently has a bug where the height can't be read from
225
- // the video, so we will make assumptions if this happens.
226
-
227
- if (isNaN(height)) {
228
- height = width / (4/3);
229
- }
230
-
231
- video.setAttribute('width', width);
232
- video.setAttribute('height', height);
233
- canvas.setAttribute('width', width);
234
- canvas.setAttribute('height', height);
235
- streaming = true;
236
- }
237
- }, false);
238
-
239
- startbutton.addEventListener('click', function(ev){
240
- takepicture();
241
- ev.preventDefault();
242
- }, false);
243
-
244
- clearphoto();
245
- }
246
-
247
- // Fill the photo with an indication that none has been
248
- // captured.
249
-
250
- function clearphoto() {
251
- var context = canvas.getContext('2d');
252
- context.fillStyle = "#AAA";
253
- context.fillRect(0, 0, canvas.width, canvas.height);
254
-
255
- var data = canvas.toDataURL('image/png');
256
- photo.setAttribute('src', data);
158
+ $.ajax({
159
+ type: "POST",
160
+ url: "saver.php",
161
+ data: {
162
+ imgBase64: dataURL
257
163
}
258
-
259
- // Capture a photo by fetching the current contents of the video
260
- // and drawing it into a canvas, then converting that to a PNG
261
- // format data URL. By drawing it on an offscreen canvas and then
262
- // drawing that to the screen, we can change its size and/or apply
263
- // other changes before drawing it.
264
-
265
- function takepicture() {
266
- var context = canvas.getContext('2d');
267
- if (width && height) {
268
- canvas.width = width;
269
- canvas.height = height;
270
- context.drawImage(video, 0, 0, width, height);
271
-
272
- var data = canvas.toDataURL('image/png');
273
- photo.setAttribute('src', data);
164
+ }).done(function(o) {
165
+ process_btn.style.display = "block";
166
+ // If you want the file to be visible in the browser
167
+ // - please modify the callback in javascript. All you
168
+ // need is to return the url to the file, you just saved
169
+ // and than put the image in your browser.
170
+ });
171
+ });
274
172
275
- } else {
276
- clearphoto();
277
- }
278
- }
279
173
280
- // Set up our event listener to run the startup process
281
- // once loading is complete.
282
- window.addEventListener('load', startup, false);
283
- })();*/
284
-
285
- /*for(;;)
286
- {
287
- setInterval(function()
288
- {
289
-
290
- }, 5000);
291
- }*/
292
174
293
175
function getRandomInt(max) {
294
176
return Math.floor(Math.random() * Math.floor(max));
0 commit comments