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 window.open 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:
<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>
<html>
<head>
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.
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' );
air.trace('ran');
$( '#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' );
} }
); } );
$( document ).ready( function() {
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.