jQuery.webcam

Posted: March 9th, 2010 | Tags: | 12 Comments »

I have created my first jQuery plugin. Called jQuery.webcam, it is a plugin which allows jQuery to read data from a user’s webcam or other video capture device.

Features:

  • Until browsers support native webcam capture, an (open source) flash blob is used for the actual capture.
  • The plugin can optionally prompt the user to allow flash access the webcam.
  • The plugin writes the video to a canvas element.
  • Support for adding callbacks and filters.

There is a demonstration available (testing on Firefox 3.6). The performance is terrible at the moment, but I will be working to fix that.

I’m planning to use this plugin for my next interactive art installation, which will allow the participant to interact with a virtual environment using facial emotions. Stay tuned!

Update: I’ve put the source on github.

Update 2: Check out WebRTC for a future native browser implementation.


12 Comments on “jQuery.webcam”

  1. 1 herman said at 02:58 on March 12th, 2010:

    demostration not working. I have firefox3.6, vista7 and just see a green box even after 30 min.

  2. 2 mackers said at 14:04 on March 12th, 2010:

    Aye. I’ve heard reports that it wasn’t working in Windows. I will take a look!

  3. 3 sniper said at 04:49 on April 30th, 2010:

    not working please work on it

  4. 4 7 jQuery Plugins to Display Your Videos - P2H / PSD2HTML said at 11:26 on July 9th, 2010:

    [...] JQUERY.WEBCAM allows web sites to read information from your site visitors’ web cams. For security purposes, it asks if you want to allow the site to access your web cam. When you agree, the site quickly displays the video coming from your web cam. It uses Flash for the web cam display. [...]

  5. 5 Terry Riegel said at 23:06 on July 23rd, 2010:

    Great idea! I looked over your source on github. Looks good. Can you publish the source to the swf file? Would like to see what is going on from the swf perspective.

  6. 6 mackers said at 21:10 on September 13th, 2010:

    Source code

  7. 7 3litE said at 05:55 on September 15th, 2011:

    Does this still work? It says:

    ACCESS DENIED

    You are not authorized to access this page.

  8. 8 8124o2 said at 01:10 on October 3rd, 2012:

    Cool plugin! Could you make a wiki/documentation for it?

  9. 9 mackers said at 11:37 on October 3rd, 2012:

    Hi 8124o2. Full documentation is provided in the jQuery plugin page, which they kindly took down while they’re developing it (!)

  10. 10 4 Best jQuery Plugins For Webcam said at 06:54 on November 8th, 2012:

    [...] 4. jQuery.webcam [...]

  11. 11 Shair said at 07:30 on May 22nd, 2013:

    Its working for me. I can see myself. In the green box I can see myself too, but low frame rate. I don’t know how to use.

  12. 12 Hiren said at 10:37 on January 21st, 2014:

    nice one..


Leave a Reply