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.
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.
}
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);
}
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