Exploring the limits of HTML5The Moustamera edition
What’s the goal?+ + =
The contentsAccessing the cameraUsing the Canvas & Haar.JSLet’s fix thatSome useful tips
Part IAccessing the Camera
Accessing the camera in pure HTML5Just add this to your HTML<video autoplay controls></video>
Accessing the camera in pure HTML5And fire up the JavaScript!navigator.getUserMedia = navigator.getUserMedia ||navigator.we...
Accessing the camera in pure HTML5The results?
Attempt II: Invoking the native cameraSimpleblackberry.invoke.card.invokeCamera(blackberry.invoke.card.CAMERA_MODE_PHOTO,f...
Attempt II: Invoking the native cameraBut don’t forget to edit your config.xml file!<rim:permissions><rim:permit>access_shar...
Part IIUsing the Canvas & HAAR.js
What is the HTML5 canvas?Allows for dynamic, scriptablerendering of 2D shapes andbitmap images.Container for on the flygene...
How do I create a HTML5 canvas?<canvas></canvas>
What is HAAR.js?A feature detection library forJavaScriptDetect various features usingexisting OpenCV cascades
Lets combine them!newHAAR.Detector(haarcascade_frontalface_alt).image(image).complete(function(){console.log(Detection fin...
Drawing an Image to the Canvasfunction drawImageToCanvas(image){var canvas = document.querySelector(canvas);canvas.width =...
function processDetectionResults(objects){for(var i = 0; i < objects.length; i++){var rect = objects[i];if(rect.width > 20...
The result?
Part IIILet’s fix that
Why?Looping several time over all 8MPIn JavaScript...
Solution?Resize the image before detection!In JavaScript...
ProcedureLoad the picture in an Image objectDraw the picture on a canvas with the approximate size of the screenSave that ...
Loading the original imagevar image = new Image();image.onload = function(){resizeImage(image, file:// + path);}image.src ...
Resizing the imagefunction resizeImage(img, imagePath){//Calculate the appropriate size//width = ...;//height = ...;var ca...
Saving the canvas to a PNG file<script type="text/javascript" src="js/canvas-toBlob.min.js"></script>
function saveCanvas(canvas){var filePath = blackberry.io.home + /temp.pngwindow.requestFileSystem = window.requestFileSyst...
function onFileError(e){var msg = ;switch (e.code){case FileError.QUOTA_EXCEEDED_ERR:msg = QUOTA_EXCEEDED_ERR;break;case F...
The result?
Part IVTips and tricks
Some bugs in WebWorks2013-02-23 13:41:37 GET /ripple/build_status/8265 200out: [INFO] java.lang.NullPointerException	at co...
Solution?Don’t use a folder named src in your WebWorks project!
Conclusion
Too early for HTML5 Camera (even on BB10)JavaScript is not without limitsEverybody looks cool with a moustache!
Upcoming SlideShare
Loading in …5
×

Moustamera

298 views
255 views

Published on

Moustamera is an all HTML5 application written for BlackBerry 10 devices. It combines face detection with HTML5 canvas editing.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
298
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Moustamera

  1. 1. Exploring the limits of HTML5The Moustamera edition
  2. 2. What’s the goal?+ + =
  3. 3. The contentsAccessing the cameraUsing the Canvas & Haar.JSLet’s fix thatSome useful tips
  4. 4. Part IAccessing the Camera
  5. 5. Accessing the camera in pure HTML5Just add this to your HTML<video autoplay controls></video>
  6. 6. Accessing the camera in pure HTML5And fire up the JavaScript!navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || false;if(!!navigator.getUserMedia){navigator.getUserMedia({audio: true, video: true}, function(stream) {var video = document.querySelector(video);video.src = (webkitURL in window)?window.webkitURL.createObjectURL(stream):stream;}, onFailSoHard);}else{alert("not supported"); // fallback.}
  7. 7. Accessing the camera in pure HTML5The results?
  8. 8. Attempt II: Invoking the native cameraSimpleblackberry.invoke.card.invokeCamera(blackberry.invoke.card.CAMERA_MODE_PHOTO,function(path){console.log(Picture path is: + path);}, function(reason){console.log(Cancelled for reason: + reason);}, function(error){console.log(Invoke error: + error);});
  9. 9. Attempt II: Invoking the native cameraBut don’t forget to edit your config.xml file!<rim:permissions><rim:permit>access_shared</rim:permit><rim:permit>use_camera</rim:permit></rim:permissions><feature id="blackberry.invoke" /><feature id="blackberry.invoke.card" /><feature id="blackberry.io" /><access uri="file:///accounts/1000/" />
  10. 10. Part IIUsing the Canvas & HAAR.js
  11. 11. What is the HTML5 canvas?Allows for dynamic, scriptablerendering of 2D shapes andbitmap images.Container for on the flygenerated graphics
  12. 12. How do I create a HTML5 canvas?<canvas></canvas>
  13. 13. What is HAAR.js?A feature detection library forJavaScriptDetect various features usingexisting OpenCV cascades
  14. 14. Lets combine them!newHAAR.Detector(haarcascade_frontalface_alt).image(image).complete(function(){console.log(Detection finished: + this.objects.length + "Objects found");drawImageToCanvas(image);processDetectionResults(this.objects);}).detect(1, 1.25, 0.1, 1, true);Somewhat impressive code block-baseScale-scale_inc-increment-min_neighbors-doCannyPruning
  15. 15. Drawing an Image to the Canvasfunction drawImageToCanvas(image){var canvas = document.querySelector(canvas);canvas.width = image.width;canvas.height = image.height;canvas.getContext(2d).drawImage(image, 0, 0, image.width,image.height);}
  16. 16. function processDetectionResults(objects){for(var i = 0; i < objects.length; i++){var rect = objects[i];if(rect.width > 200) //Filter out mistakes{var moustache = new Image();moustache.onload = function(){var x = rect.x + rect.width/2.0 - moustache.width/2.0;var y = rect.y + rect.height/8*5;var scaleFactor = rect.width/2 / moustache.width;var moustacheHeight = moustache.height * scaleFactor;canvas.getContext(2d).drawImage(moustache, x, y, rect.width/2, moustacheHeight);}moustache.src = images/moustaches/ + selectedMoustache + .png;}}}
  17. 17. The result?
  18. 18. Part IIILet’s fix that
  19. 19. Why?Looping several time over all 8MPIn JavaScript...
  20. 20. Solution?Resize the image before detection!In JavaScript...
  21. 21. ProcedureLoad the picture in an Image objectDraw the picture on a canvas with the approximate size of the screenSave that picture to the file system
  22. 22. Loading the original imagevar image = new Image();image.onload = function(){resizeImage(image, file:// + path);}image.src = file:// + path;
  23. 23. Resizing the imagefunction resizeImage(img, imagePath){//Calculate the appropriate size//width = ...;//height = ...;var canvas = document.createElement("canvas");canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);saveCanvas(canvas);}
  24. 24. Saving the canvas to a PNG file<script type="text/javascript" src="js/canvas-toBlob.min.js"></script>
  25. 25. function saveCanvas(canvas){var filePath = blackberry.io.home + /temp.pngwindow.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;window.requestFileSystem(window.TEMPORARY, 5.0 * 1024 * 1024, function (fs){console.log(Got FileSystem access...);console.log(Trying to get a FileEntry object to + filePath + ...);fs.root.getFile(filePath, {create: true}, function(fileEntry){console.log(Got FileEntry access to + filePath + ...);fileEntry.createWriter(function(fileWriter){console.log(Got FileWriter access...);fileWriter.onerror = onFileError;fileWriter.onwriteend = function(){console.log(Done writing canvas to file + filePath);};//Save the image to the file systemcanvas.toBlob(function (blob){fileWriter.write(blob);}, image/png);}, onFileError);}, onFileError);}, onFileError);}
  26. 26. function onFileError(e){var msg = ;switch (e.code){case FileError.QUOTA_EXCEEDED_ERR:msg = QUOTA_EXCEEDED_ERR;break;case FileError.NOT_FOUND_ERR:msg = NOT_FOUND_ERR;break;case FileError.SECURITY_ERR:msg = SECURITY_ERR;break;case FileError.INVALID_MODIFICATION_ERR:msg = INVALID_MODIFICATION_ERR;break;case FileError.INVALID_STATE_ERR:msg = INVALID_STATE_ERR;break;default:msg = Unknown Error;break;};console.log(Error: + msg);}
  27. 27. The result?
  28. 28. Part IVTips and tricks
  29. 29. Some bugs in WebWorks2013-02-23 13:41:37 GET /ripple/build_status/8265 200out: [INFO] java.lang.NullPointerException at com.qnx.bbt.packager.Asset.setSourcePath(Asset.java:88) at com.qnx.bbt.packager.Asset.<init>(Asset.java:75) atcom.qnx.bbt.xml.BbtExtensionXml.getAsset(BbtExtensionXml.java:571) at com.qnx.bbt.xml.BbtExtensionXml.getAssets(BbtExtensionXml.java:541) atcom.qnx.bbt.packager.BbtBarValueProvider.getAssets(BbtBarValueProvider.java:202) at com.qnx.bbt.bar.BARPackager.getAssets(BARPackager.java:71) atcom.qnx.bbt.bar.BARPackager.findAsset(BARPackager.java:233)out: [INFO] at com.qnx.bbt.bar.BARPackager.associateSourceAssets(BARPackager.java:227) atcom.qnx.bbt.packager.AbstractPackager.parseDescriptorAndCreateBarManifest(AbstractPackager.java:577) atcom.qnx.bbt.packager.AbstractPackager.doRun(AbstractPackager.java:238) at com.qnx.bbt.packager.AbstractPackager.runPackager(AbstractPackager.java:164) atcom.qnx.bbt.nativepackager.BarNativePackager.main(BarNativePackager.java:61)out: [ERROR] Error: nullout: [ERROR] Native Packager exception occurred2013-02-23 13:41:38 GET /ripple/build_status/8265 2002013-02-23 13:41:38 GET /ripple/build_status/8265 200out: [INFO] java.lang.NullPointerExceptionout: [INFO] at com.qnx.bbt.packager.Asset.setSourcePath(Asset.java:88) at com.qnx.bbt.packager.Asset.<init>(Asset.java:75) atcom.qnx.bbt.xml.BbtExtensionXml.getAsset(BbtExtensionXml.java:571) at com.qnx.bbt.xml.BbtExtensionXml.getAssets(BbtExtensionXml.java:541) atcom.qnx.bbt.packager.BbtBarValueProvider.getAssets(BbtBarValueProvider.java:202) at com.qnx.bbt.bar.BARPackager.getAssets(BARPackager.java:71)[INFO] at com.qnx.bbt.bar.BARPackager.findAsset(BARPackager.java:233)[INFO] at com.qnx.bbt.bar.BARPackager.associateSourceAssets(BARPackager.java:227)[INFO] at com.qnx.bbt.packager.AbstractPackager.parseDescriptorAndCreateBarManifest(AbstractPackager.java:577)[INFO] at com.qnx.bbt.packager.AbstractPackager.doRun(AbstractPackager.java:238)[INFO] at com.qnx.bbt.packager.AbstractPackager.runPackager(AbstractPackager.java:164)[INFO] at com.qnx.bbt.nativepackager.BarNativePackager.main(BarNativePackager.java:61)out: [ERROR] Error: nullout: [ERROR] Native Packager exception occurredDone builderror response - {"code":1,"msg":"[ERROR] Error: nulln[ERROR] Native Packager exception occurredn[INFO] java.lang.NullPointerExceptionn[INFO] tatcom.qnx.bbt.packager.Asset.setSourcePath(Asset.java:88)tat com.qnx.bbt.packager.Asset.<init>(Asset.java:75)tat com.qnx.bbt.xml.BbtExtensionXml.getAsset(BbtExtensionXml.j
  30. 30. Solution?Don’t use a folder named src in your WebWorks project!
  31. 31. Conclusion
  32. 32. Too early for HTML5 Camera (even on BB10)JavaScript is not without limitsEverybody looks cool with a moustache!

×