Scott's Workblog

scott.bradley.wilson@gmail.com


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


October 02, 2009

Widgets and Webcams: Using Bondi APIs in Wookie

In my last post I wrote about device APIs - an exciting and rapidly developing area of interoperability standards. It explains a bit more of what BONDI is and how it relates to other specifications. In this post you can see how this can work in practice.

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.

main archive