HTML-based AIR Applications can do video

This post is more than 2 years old.

Thanks, and good night. I'm done.

Sorry - just kidding. So I've been playing a lot lately with HTML-based Adobe AIR apps (see my PS at the bottom) and one thing I noticed was a dramatic lack of docs concerning video. Everything else seems covered (file reading and writing, database, audio even), but video was conspicuously absent. I discussed this with other guys in our community (my go to guys for HTML/Adobe AIR stuff, Jason Dean and Andy Matthews, although Simeon Bateman recently told me also has done a lot in the HTML side too) and collectively we figured it just didn't work. My rough idea was that it was an HTML issue. By that I mean, there is no tag that says, embed a video and point it so some binary data in a JavaScript variable - and constantly update it as new data streams in.

I then spoke with Kevin Hoyt, one of the platform evangelists for Adobe. He reminded me (and please forgive me if I get the exact details wrong here) that even when using an HTML-based AIR application, the view is still within a Flash context. In other words, you still get SWF on the back running everything. Because of this, you can work with video, but to display it you need to use native window support. Remember that an HTML/AIR application has the ability to create any type of view (and I plan on having a demo for that up soon) and this goes far beyond your typical example. The upshot is - yes, you can display the video - but it won't be within the DOM of the HTML. You can float it above the right place, but your faking it, not injecting it into the HTML.

To make things even nicer, Kevin also wrote up a quick demo. I'll go through some of the code and you can download the complete application at the bottom. Note that he wrote this very quickly, so it's not perfect, but it definitely works.

Let's begin with the HTML:

<html> <head>

<title>Web Camera on HTML</title>

<link rel="stylesheet" type="text/css" href="webcamera.css">

<script src="lib/air/AIRAliases.js"></script> <script src="lib/jquery/jquery-1.4.2.js"></script> <script src="webcamera.js"></script>

</head> <body>

<div id="frame"></div> <div id="control" class="button">Start Web Camera</div>

</body> </html>

As you can see - we've got just a button and a div to frame our video. Remember this all being faked - the div is just a target. Now the code.

$( document ).ready( function() {

var video = null;
var webcam = null;

$( '#frame' ).css( 'left', ( Math.round( ( $( 'body' ).width() - 270 - 70 ) / 2 ) ) + 'px' );	
$( '#frame' ).css( 'top', ( Math.round( ( $( 'body' ).height() - 195 - 70 ) / 2 ) ) + 'px' );
$( '#control' )
	.css( 'left', ( Math.round( ( $( 'body' ).width() - 150 - 12 ) / 2 ) ) + 'px' )
	.click( function( evt ) {
		if( video == null )
			webcam = air.Camera.getCamera();
			webcam = air.Camera.getCamera();
			webcam.setMode( 320, 240, 15 );
			webcam.setQuality( 0, 100 );
			video = new air.Video( 320, 240 );
			video.attachCamera( webcam );
			video.x = Math.round( ( $( 'body' ).width() - 320 ) / 2 );
			video.y = Math.round( ( $( 'body' ).height() - 240 ) / 2 );	
			window.htmlLoader.stage.addChild( video );
			$( '#control' ).html( 'Stop Web Camera' );					
		} else {
			window.htmlLoader.stage.removeChild( video );
			video.attachCamera( null );		
			video = null;
			webcam = null;	
			$( '#control' ).html( 'Start Web Camera' );							

} );

So you can see here where he grabs the position of the video frame (the HTML frame), and with that he is then able to position the real video over it. Notice the use of the AIR alias. That right there kind of implies that ya - this really is something supported in the HTML/AIR world.

Anyway - hopefully this is interesting to folks and I hopefully didn't butcher up Kevin's nice explanations too much. You can download both the source and the runnable AIR application below.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Raymond Camden posted on 8/20/2010 at 9:47 PM

I forgot my PS I alluded to above. I've been doing a _lot_ of AIR stuff lately and not much ColdFusion. This isn't intentional obviously and I definitely want folks to continue sending me ColdFusion questions. I don't know if people were bugged/wondering/whatever but I thought I'd just remind folks. :)

Comment 2 by Syed posted on 8/21/2010 at 1:08 AM

Will it be possible to do two way video chat with Air?


Comment 3 by Kevin Hoyt posted on 8/21/2010 at 1:39 AM

Video chat is possible with AIR on the desktop and on devices. It is also possible with Flash Player in the browser (on the desktop and on devices). If you're using Flex, you reduce development time even further. Here's one done in 30 lines of code...

The above example uses LiveCycle Collaboration Services (LCCS) - collaboration in the cloud, so you don't even have to setup or manage a server to make this happen. If you're leaning more towards the HTML/AIR route, then LCCS can still work for you, but it'll take a few more lines of code as you'll be accessing the API directly, and not the components.

Hope this helps,
Kevin Hoyt
Adobe Systems, Inc.

Comment 4 by XingXing posted on 9/3/2012 at 6:55 PM

Hello, Raymond

I am very happy to know your blog.
I am beginner with HTML based AIR APP, so I hope you help me about my first Air App.

I am going to make AIR APP which plays local flv video file as lightbox in app.

So I have used videolightbox plugin for it, but it works well in web browser, but not work in Air App

Would you let me know why it is?

Much appriciated.

Regards, XingXing

Comment 5 by Raymond Camden posted on 9/5/2012 at 4:33 AM

Sorry, I haven't used that plugin so I don't know what it could be. It has also been many months since I've used AIR. That being said, if I had to bet I'd guess it is something involving the security context with HTML AIR apps. My memory is real rough here, but if you run the app from the command line using adl, do you see error messages printed?

Comment 6 by XingXing posted on 9/5/2012 at 5:00 AM

Hello, Raymond

Thanks for your reply.

I am using Dreamweaver AIR extension to build AIR app. not used local.

Maybe I can send you my source file? so you can check it what bug is?

Best Regards, XingXing

Comment 7 by Raymond Camden posted on 9/5/2012 at 6:56 AM

The Dreamweaver extension is simply wrapping calls to the AIR SDK. I strongly suggest you take some time to learn the command line tools so you can run ADL at the command line and see if anything is reported there.