HTML5 new features – accessing the native device camera

W3C has now released the draft for accessing the native camera or webcam of the device. The API for navigator.getUserMedia is still in draft stages but gives a good insight of things to come. As of now, no stable browser version has support for this API. We found an Opera Lab version for Android which seems to have support for this. Details are at http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview.

Using the above Opera version, we have managed to coin up our first HTML5 app which access the cellphone’s camera. The app can capture images via the camera and they can be stored in the local SQLite database which could be handy if there is no internet connectivity at that time. The app then allows you to transfer these images to a server which can manipulate them and store them. In our app, the images are added to an online image gallery. A video of the working app is shown below.

HTML5 device access implementation demo on YouTube

In case you want to try it out, please open the url http://html5.sapnagroup.com/gallery/camera.php on your Android phone. Before you view it, please download the Opera Lab version from http://people.opera.com/richt/release/build/Opera_Mobile_11_LABS_device_orientation_preview_20110323.apk and do the following as detailed below.

  1. Install Opera Lab version
  2. Type in about:config into the address bar
  3. Go to Security Prefs  and tick  ”Allow Camera To Canvas Copy”
  4. Open  http://html5.sapnagroup.com/gallery/camera.php
  5. Click on the screen to capture an image
  6. This will store the captured screen locally into mobile storage
  7. Keep clicking more images
  8. Once you are onto wifi/3G coverage, click on the stored images (small thumbnails that appear below the capture screen) to upload to the server
  9. View your uploaded images at http://html5.sapnagroup.com/gallery/index.php

An app like this opens up opportunities to transfer photos from outdoor easily to any web based application. The next step to this would be to transfer videos and audio. We are still researching that.

Leave a comment

27 Comments.

  1. Hello sapnagroup,

    Thank you for sharing your research result. About using the native device camera on Android phone’s Opera browser, I was only able to hear the sound of activating the camera, but could not see the preview screen, using your instructions. I am just wondering if you know what I was doing wrong.

    Thank you and I’d really appreciate your reply. :razz:
    Mark

  2. Hi,sapnagroup,
    I followed all steps you’ve told MARK, But I still only hear the sound of activating the camera, no picture shows up. when I upload the screenshots,
    it can show on the URL :http://html5.sapnagroup.com/gallery/index.php , but just to be a black picture.
    by the way, my cell phone is Motorola XT800. is this my cell phone’s problem?

    • Hi,

      We tried on our phone again (HTC and Samsung) and it works fine. Can you please confirm that you don’t see the camera preview before you click or is it that you see the camera but when you click and upload, it goes as a blank picture. We will neverthless see if we can simulate this problem at our end again.

      Regards

      Sapnagroup

    • Hi,

      We tried doing a fresh install on a new HTC and Samsung phone with Android OS and it works fine after following the exact steps mentioned above. Unfortunately we do not have a Motorola phone its possible that rather then the physical phone differing its the OS version difference that could cause an issue. Its been tested on 2.2 and 2.3.

      Regards,
      Sapnagroup

  3. Hi anurag, as per your request sending a reply. I was able to test on xperia ARC running gingerbread. please share the html5 code for this. greatly appreciated.

  4. Hello,

    great demo! Taking pictures and storing them locally works fine. However, no thumbnails are displayed, so it is not possible to upload the pictures.
    By the way, is it possible to obtain a copy of the .php-files? Is there a demonstration for capturing video instead of pictures?

    Thanks,
    Florian

    • Hi Florian,

      It works fine at our end. I assume some problem with your local storage. You can try the Opera version on the phone we mentioned. The same Opera version fails on some phones for some version. The php script is a huge set of our existing files so will be difficult to pass it to you. But uploading thumbnail to the server should be a straightforward process.

      We tried capturing video and audio but till date, I don’ t that is permitted on any browser. Ericsson has done some lab versions using a modified web-kit library which allows this. This is the only thing we are aware of.

      Regards

      sapnagroup

  5. Hi !
    Is there an equivalent for iPhone ?
    Regards,
    Jerome

    • Hi,

      Not that we know of. The closest we got to was using the Aurgima app as explained in one of our articles.

      Regards

      sapnagroup

  6. This is awesome. I can’t wait until this gets some support and can actually be used.

  7. Neat blog! Is your theme custom made or did you download it
    from somewhere? A design like yours with a few
    simple tweeks would really make my blog shine. Please let
    me know where you got your theme. Thanks a lot

  8. Hi,
    Can you share the full source code

    or

    send email : okboouza@hotmail.com

    Please.
    Thank you
    okboouza

  9. Howdy! This blog post couldn’t be written much better! Reading through this article reminds me of my previous roommate! He continually kept talking about this. I am going to forward this post to him. Fairly certain he’ll have
    a great read. Thanks for sharing!

  10. Tell us more, please?

  11. please tell the step by step..

  12. hi sapnagroup,

    Can you share this code for me? :)

    thx you very much :)

    • Hi,

      Difficult to share the entire code as it involves a lot of our proprietary files, particularly with respect to uploading it on to the server. If you have any specific issues, please let us know and we can try to help.

      Regards

      sapnagroup

  13. Can you share the full source code

    or

    send email : naresh.s@medianitsolutions.com

    Please.
    Thank you

    • Hi Naresh,

      Difficult to share the entire code as it involves a lot of our proprietary files, particularly with respect to uploading it on to the server. If you have any specific issues, please let us know and we can try to help.

      Regards

      sapnagroup

  14. Hi,

    Current browsers don’t support it. If you read our blog, there is one article where we have demonstrated this on an Opera Beta version for Android. But in current Android browsers, you can take a photo, and then access the gallery through a web page.

    Regards

    sapnagroup

Leave a Reply

Your email address will not be published. Required fields are marked *

*


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>