Camara support in HTML5 and JavaScript
At the moment, there are very good efforts to be able to access devices directly with HTML5, which would integrate native webcam support directly into the browser. However, there is still the fundamental problem on the Internet that most systems do not support HTML5. Even the current browsers do not provide the update functionality, which would cover the needs of today's speed of development. This topic, however was already discussed in a previous article.
Last weekend I finally turned to a topic I wanted to tackle for a long time, because I also need this functionality in a new project. I've built a small JavaScript API to be able to control Flash's webcam functionality externally. Finally, the whole thing was encapsulated in an easy-to-use jQuery plugin.
One may think of flash as he like, but due to the boom of YouTube, the Flash player is spread on nearly every web-enabled computer on the earth, which we can use temporarily, at least until we have a better technological standard. Because the whole was encapsulated by jQuery, the technology can be easily replaced transparently. Thus, the temporary solution flash can be simply replaced by a more modern, without any change on the code base.
I've also tried to keep the Flash version very low, to allow a higher compatibility on older systems. Webcam support was introduced with Flash8, which forces the usage of Actionscript 2. On the other side, the beneficial thing is though, that I was therefore not rely on Adobe's commercial IDE, but could use the opensource AS2 compiler mtasc.
The biggest problem on developing the plugin was cross browser compatibility. Even if Flash was used as a single tie member, the communication with JavaScript was a littly tricky. In general, I recommend the usage of the jQuery plugin, because it provides the cleanest abstraction possibility. Who does not want to rely on jQuery, can simply take the Flash file and build it's own API.
Now let's have fun with creating cool applications using the API! :-)
You might also be interested in the following
- Design a developer friendly web
- My jQuery Playground
- Generate client-side PNG files using JavaScript
- jQuery Pagination revised
Sorry, comments are closed for this article. Contact me if you want to leave a note.
6 Comments on „Camara support in HTML5 and JavaScript”
Newbie here trying to get the save method to work in my Windows development environment running XAMPP. I made these changes to the sample code:
mode: "save",
swffile: "/download/jscam.swf",
and
onCapture: function () {
webcam.save('/upload.php');
I also created a upload.php with the contents shown but am not getting a file or error. Any ideas?
hi, i'm trying this out and love it! have you tried running it with RED5, Wowza or FMS vs. local? I think it would be cool if it was posible to use this as a pending all HTML5 (device) camera placeholder for 2 way chat. Would it just take a change to the XML or .JS to point it at a RED5? thanks!
Ian,
what about http://www.swfupload.org/ ? I think, this is exactly what you're looking for - without jQuery, but I think this should not matter.
noiv,
what browser crashs the Flash movie? I tested Opera, Firefox, Safari, Chrome and IE and had no problems with none of them.
I'm experimenting on getting more frames per second, but this is a bit difficult. I'll add a note on twitter when I found a better/faster solution.
Robert
Absolutely love this plugin. This is exactly what I was looking for. I haven't tried it out yet, but I'm excited, and I highly suspect it will solve my problem completely.
As far as HTML5 goes, there is talk about a element, but from what I've heard it'll be a few years before anything materializes. But on that note, it looks like support will be added for stuff beyond just webcams (think printers and mp3 players controlled from your web browser).
I have a request too. Can you do the same thing, but with a Flash uploader? As in we have a function like:
showDialog({ "jpg","png","gif" });
and when called, the dialog customizes the view to only those filetypes, and a callback with an array of files to be uploaded. That'd be awesome.
Excellent code. Two suggestions: Flash crashes, if the user thinks to long about the security confirmation and I wonder if the handshake would support more frames per second.
Way cool. Can't wait to try it out. Just started using JQuery because it had a another very useful plugin available for the Google Translate API service. It allows for multiple 'small' distinct queries. I searched for hours and it was the only script available which could do so (that I could find). So using JQuery is just fine with me too. Use what works, I always say.