The document discusses exploring the capabilities of HTML5, including accessing the camera, using the canvas and Haar.js for face detection, and tips for working with these technologies. It covers accessing the camera in pure HTML5 and invoking the native camera, combining the canvas and Haar.js for face detection and drawing detected faces on the canvas, improving performance by resizing images before detection, and common bugs encountered in WebWorks projects. The goal is to experiment with HTML5 features like the camera and face detection for fun effects like adding virtual moustaches to detected faces.

1. Exploring the limits of HTML5
The Moustamera edition

2. What’s the goal?
+ + =

3. The contents
Accessing the camera
Using the Canvas & Haar.JS
Let’s fix that
Some useful tips

4. Part I
Accessing the Camera

5. Accessing the camera in pure HTML5
Just add this to your HTML
<video autoplay controls></video>

6. Accessing the camera in pure HTML5
And 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. Accessing the camera in pure HTML5
The results?

8. Attempt II: Invoking the native camera
Simple
blackberry.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. Attempt II: Invoking the native camera
But 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. Part II
Using the Canvas & HAAR.js

11. What is the HTML5 canvas?
Allows for dynamic, scriptable
rendering of 2D shapes and
bitmap images.
Container for on the fly
generated graphics

12. How do I create a HTML5 canvas?
<canvas></canvas>

13. What is HAAR.js?
A feature detection library for
JavaScript
Detect various features using
existing OpenCV cascades

14. Lets combine them!
new
HAAR.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. Drawing an Image to the Canvas
function 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. 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. The result?

18. Part III
Let’s fix that

19. Why?
Looping several time over all 8MP
In JavaScript...

20. Solution?
Resize the image before detection!
In JavaScript...

21. Procedure
Load the picture in an Image object
Draw the picture on a canvas with the approximate size of the screen
Save that picture to the file system

22. Loading the original image
var image = new Image();
image.onload = function()
{
resizeImage(image, 'file://' + path);
}
image.src = 'file://' + path;

23. Resizing the image
function 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. Saving the canvas to a PNG file
<script type="text/javascript" src="js/canvas-toBlob.min.js"></script>

25. function saveCanvas(canvas)
{
var filePath = blackberry.io.home + '/temp.png'
window.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 system
canvas.toBlob(function (blob)
{
fileWriter.write(blob);
}, 'image/png');
}, onFileError);
}, onFileError);
}, onFileError);
}

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. The result?

28. Part IV
Tips and tricks

29. Some bugs in WebWorks
2013-02-23 13:41:37 GET /ripple/build_status/8265 200
out: [INFO] java.lang.NullPointerException at com.qnx.bbt.packager.Asset.setSourcePath(Asset.java:88) at com.qnx.bbt.packager.Asset.<init>(Asset.java:75) at
com.qnx.bbt.xml.BbtExtensionXml.getAsset(BbtExtensionXml.java:571) at com.qnx.bbt.xml.BbtExtensionXml.getAssets(BbtExtensionXml.java:541) at
com.qnx.bbt.packager.BbtBarValueProvider.getAssets(BbtBarValueProvider.java:202) at com.qnx.bbt.bar.BARPackager.getAssets(BARPackager.java:71) at
com.qnx.bbt.bar.BARPackager.findAsset(BARPackager.java:233)
out: [INFO] at com.qnx.bbt.bar.BARPackager.associateSourceAssets(BARPackager.java:227) at
com.qnx.bbt.packager.AbstractPackager.parseDescriptorAndCreateBarManifest(AbstractPackager.java:577) at
com.qnx.bbt.packager.AbstractPackager.doRun(AbstractPackager.java:238) at com.qnx.bbt.packager.AbstractPackager.runPackager(AbstractPackager.java:164) at
com.qnx.bbt.nativepackager.BarNativePackager.main(BarNativePackager.java:61)
out: [ERROR] Error: null
out: [ERROR] Native Packager exception occurred
2013-02-23 13:41:38 GET /ripple/build_status/8265 200
2013-02-23 13:41:38 GET /ripple/build_status/8265 200
out: [INFO] java.lang.NullPointerException
out: [INFO] at com.qnx.bbt.packager.Asset.setSourcePath(Asset.java:88) at com.qnx.bbt.packager.Asset.<init>(Asset.java:75) at
com.qnx.bbt.xml.BbtExtensionXml.getAsset(BbtExtensionXml.java:571) at com.qnx.bbt.xml.BbtExtensionXml.getAssets(BbtExtensionXml.java:541) at
com.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: null
out: [ERROR] Native Packager exception occurred
Done build
error response - {"code":1,"msg":"[ERROR] Error: nulln[ERROR] Native Packager exception occurredn[INFO] java.lang.NullPointerExceptionn[INFO] tat
com.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. Solution?
Don’t use a folder named src in your WebWorks project!

31. Conclusion

32. Too early for HTML5 Camera (even on BB10)
JavaScript is not without limits
Everybody looks cool with a moustache!