Scott's Workblog

scott.bradley.wilson@gmail.com


attention!
This blog has moved! Go to my new blog!


print this article (opens in new window) view printer-friendly version (opens in new window)

Widgets and Webcams: Using Bondi APIs in Wookie

This is a quick report on some experimental work I was trying out with Wookie, which is adding a Feature to support BONDI APIs. I added a feature based on the BONDI Camera API, which is used to gain access to the user's camera. Normally this is a camera in a mobile phone, however it can also work in the browser: for this I incorporated a Flash object that writes the content of the camera to a HTML 5 Canvas object, which can then be captured and used by a widget.


There is a reasonable amount of Feature code in the client side (Flash, JS, CSS...) but the widget author doesn't need to do very much at all. Here is my test Widget source code:




            <script>

                function takePicture(){

                        var camera = bondi.camera.getCameras()[0];

                        camera.takePicture(

                          function(img){document.getElementById("picture").src=img;},    // Got a picture!

                          function(){alert("nope");});           // User cancelled

                }

            </script>



The HTML is also simple:




          <body>

            <button onclick "takePicture()" >Take Picture</button>

            <img id="picture" src="" width="64" height="64"/>

          </body>



At runtime this gives the user a "take picture" button, which when clicked opens a lightbox showing the Flash "camera access" settings:
screenshot


If the user allows access, they get the usual camera live preview with a "snap it" button. When this is clicked the user can choose to keep the image or take another (they can also click the close button, or press ESC, to cancel).


screenshot


The captured image is converted into a data: uri and passed back to the Bondi script, which is what the widget javascript above inserts into the <src> element:


screenshot


I think there is a lot of scope for adding these kinds of features into Wookie that would make for some interesting cases for incorporating mobile widgets into websites (and vice versa).


At the moment this is still an experimental feature and isn't part of the Wookie codebase, but I'll try and upload the source and some instructions in the near future.

Related items: