Skip to content

Commit 8a9a737

Browse files
eduardolundgreneduardolundgren
committed
tracking.Camera augments tracking.Video; Wrappign canvas in tracking.Canvas;
1 parent bf2606e commit 8a9a737

2 files changed

Lines changed: 79 additions & 60 deletions

File tree

‎examples/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
var picture = tracking.one('#picture');
2525
picture.width = c1.get('width');
2626
picture.height = c1.get('height');
27-
picture.src = c1.get('video').toDataURL('image/png');
27+
picture.src = c1.toDataURL('image/png');
2828
};
2929
</script>
3030

‎src/tracking.js‎

Lines changed: 78 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ Attribute.prototype = {
154154
return instance.attrs_;
155155
},
156156

157-
linkAttr: function(attrName, attrTarget) {
157+
linkAttr: function(attrName, attrTarget, opt_set) {
158158
var instance = this,
159159
changeFnName = attrName + 'Change_',
160160
changeFn = instance[changeFnName];
@@ -165,49 +165,90 @@ Attribute.prototype = {
165165
}
166166
attrTarget.set(attrName, val);
167167
};
168+
169+
if (opt_set) {
170+
attrTarget.set(attrName, instance.get(attrName));
171+
}
168172
}
169173
};
170174

171175
tracking.Attribute = Attribute;
172176

177+
// tracking.Canvas
178+
179+
var Canvas = function(opt_config) {
180+
var instance = this;
181+
182+
instance.setAttrs(tracking.merge({
183+
canvasNode: null,
184+
height: 240,
185+
width: 320
186+
}, opt_config), true);
187+
188+
instance.createCanvas_();
189+
};
190+
191+
Canvas.prototype = {
192+
createCanvas_: function() {
193+
var instance = this,
194+
canvasNode = document.createElement('canvas');
195+
196+
instance.canvasContext = canvasNode.getContext('2d');
197+
canvasNode.height = instance.get('height');
198+
canvasNode.width = instance.get('width');
199+
200+
instance.set('canvasNode', canvasNode);
201+
202+
return canvasNode;
203+
},
204+
205+
data: function() {
206+
var instance = this,
207+
width = instance.get('width'),
208+
height = instance.get('height');
209+
210+
return instance.canvasContext.getImageData(0, 0, width, height);
211+
},
212+
213+
toDataURL: function(opt_format) {
214+
var instance = this,
215+
canvasNode = instance.get('canvasNode');
216+
217+
return canvasNode.toDataURL(opt_format || 'image/png');
218+
}
219+
};
220+
221+
tracking.Canvas = tracking.augment(Canvas, tracking.Attribute);
222+
173223
// tracking.Video
174224

175225
var Video = function(opt_config) {
176226
var instance = this;
177227

178228
instance.setAttrs(tracking.merge({
179229
autoplay: true,
180-
canvasNode: null,
230+
canvas: null,
181231
height: 240,
182232
controls: true,
183233
width: 320,
184234
videoNode: null
185235
}, opt_config), true);
186236

187-
instance.init_();
237+
instance.createVideo_();
238+
instance.createCanvas_();
188239
};
189240

190241
Video.prototype = {
191242
canvasContext: null,
192243

193-
init_: function() {
194-
var instance = this;
195-
196-
instance.createVideo_();
197-
instance.createCanvas_();
198-
},
199-
200244
createCanvas_: function() {
201245
var instance = this,
202-
canvasNode = document.createElement('canvas');
246+
canvas = instance.set('canvas', new tracking.Canvas());
203247

204-
canvasNode.height = instance.get('height');
205-
canvasNode.width = instance.get('width');
206-
instance.canvasContext = canvasNode.getContext('2d');
207-
208-
instance.set('canvasNode', canvasNode);
248+
instance.linkAttr('height', canvas, true);
249+
instance.linkAttr('width', canvas, true);
209250

210-
return canvasNode;
251+
return canvas;
211252
},
212253

213254
createVideo_: function() {
@@ -226,18 +267,18 @@ Video.prototype = {
226267

227268
data: function() {
228269
var instance = this,
229-
width = instance.get('width'),
230-
height = instance.get('height');
270+
canvas = instance.get('canvas');
231271

232-
instance.syncData();
272+
instance.syncVideo();
233273

234-
return instance.canvasContext.getImageData(0, 0, width, height);
274+
return canvas.data();
235275
},
236276

237277
heightChange_: function(val) {
238278
var instance = this,
239-
canvasNode = instance.get('canvasNode'),
240-
videoNode = instance.get('videoNode');
279+
videoNode = instance.get('videoNode'),
280+
canvas = instance.get('canvas'),
281+
canvasNode = canvas.get('canvasNode');
241282

242283
canvasNode.height = val;
243284
videoNode.height = val;
@@ -286,28 +327,30 @@ Video.prototype = {
286327
videoNode.src = stream;
287328
},
288329

289-
syncData: function() {
330+
syncVideo: function() {
290331
var instance = this,
332+
canvas = instance.get('canvas'),
291333
width = instance.get('width'),
292334
height = instance.get('height'),
293335
videoNode = instance.get('videoNode');
294336

295-
instance.canvasContext.drawImage(videoNode, 0, 0, width, height);
337+
canvas.canvasContext.drawImage(videoNode, 0, 0, width, height);
296338
},
297339

298340
toDataURL: function(opt_format) {
299341
var instance = this,
300-
canvasNode = instance.get('canvasNode');
342+
canvas = instance.get('canvas');
301343

302-
instance.syncData();
344+
instance.syncVideo();
303345

304-
return canvasNode.toDataURL(opt_format || 'image/png');
346+
return canvas.toDataURL(opt_format);
305347
},
306348

307349
widthChange_: function(val) {
308350
var instance = this,
309-
canvasNode = instance.get('canvasNode'),
310-
videoNode = instance.get('videoNode');
351+
videoNode = instance.get('videoNode'),
352+
canvas = instance.get('canvas'),
353+
canvasNode = canvas.get('canvasNode');
311354

312355
canvasNode.width = val;
313356
videoNode.width = val;
@@ -327,55 +370,31 @@ var Camera = function(opt_config) {
327370
width: 320
328371
}, opt_config), true);
329372

330-
instance.init_();
373+
instance.initUserMedia_();
331374
};
332375

333376
Camera.prototype = {
334-
init_: function() {
377+
initUserMedia_: function() {
335378
var instance = this;
336379

337-
var video = instance.initVideo_();
338-
339380
navigator.getUserMedia(
340381
{ audio: instance.get('audio'), video: true },
341382
tracking.bind(instance.defSuccessHandler_, instance),
342383
tracking.bind(instance.defErrorHandler_, instance));
343-
344-
instance.linkAttr('width', video);
345-
instance.linkAttr('height', video);
346-
},
347-
348-
initVideo_: function() {
349-
var instance = this;
350-
351-
return instance.set('video', new tracking.Video({
352-
height: instance.get('height'),
353-
width: instance.get('width')
354-
}));
355384
},
356385

357386
defSuccessHandler_: function(stream) {
358-
var instance = this,
359-
video = instance.get('video');
387+
var instance = this;
360388

361-
video.set('src', URL.createObjectURL(stream));
389+
instance.set('src', URL.createObjectURL(stream));
362390
},
363391

364392
defErrorHandler_: function(err) {
365393
throw Error(err);
366-
},
367-
368-
render: function(opt_selector) {
369-
var instance = this,
370-
video = instance.get('video');
371-
372-
video.render(opt_selector);
373-
374-
return instance;
375394
}
376395
};
377396

378-
tracking.Camera = tracking.augment(Camera, tracking.Attribute);
397+
tracking.Camera = tracking.augment(Camera, tracking.Video);
379398

380399
// self.Int32Array polyfill
381400
if (!self.Int32Array) {

0 commit comments

Comments
 (0)