Geek.blog

How to Stream and Playback Live Video using Flash Media Server

Andrew Christensen — Wed, 12 Aug 2009 04:27:54 +0000

Sorry for the lack of instruction or description. I would rather hand off some code that works, rather than no code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var cameraPlayback:Video = new Video();
addChild(cameraPlayback);

var camera:Camera = Camera.getCamera();
camera.setQuality(0,100);

var publishStream:NetStream;
var playbackStream:NetStream;

var nc:NetConnection = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);

var client:Object = {};
client.onBWCheck = function() { }
client.onBWDone = function() { }

nc.client = client;

nc.connect("rtmp://YOUR_FMS_SERVER_URL/live/");

function onNetStatus(e:NetStatusEvent) {

switch(e.info.code) {
case "NetConnection.Connect.Success":
publishStream = new NetStream(nc);
publishStream.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
publishStream.attachCamera(camera);
publishStream.publish("myCamera");

playbackStream = new NetStream(nc);
playbackStream.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
playbackStream.play("myCamera");

cameraPlayback.attachNetStream(playbackStream);

break;

}
}

Actionscript 3 Marker Helper Class

Andrew Christensen — Thu, 16 Apr 2009 02:04:49 +0000

It’s a pain to try and keep track of item registration points when placing them on the stage. So to help my debug efforts, I create the Marker class. It draws a crosshair where ever you need one. You can use them to keep track of any specific point.

Using the class is dead easy, you just need to add a new instance of the class to the display tree and configure it appropriately.

1
2
3
4
5
6
7
8
9
10

import Marker;

// adds a marker that will snap to the center of the stage (even when the stage is resized)
addChild(new Marker(true));

// adds a Marker instance at 50,50 point
addChild(new Marker(50,50));

// adds a Marker instance at 100,100 and sets the Marker's color to 0x00FF00
addChild(new Marker(100,100, 0x00FF00));

Download Marker.as

Droplet: Quick Drop.io Desktop AIR App

Andrew Christensen — Sat, 14 Mar 2009 19:12:08 +0000

I’m proud to announce the beta release of my first Drop.io desktop AIR application called Droplet. I built the application using my own Drop.io AS3 library. The application is very simple and offers the fastest way to upload a single file to Drop.io. Just open the application, choose your file, and Droplet uploads your file to a generate drop. Once uploaded, you have the option to upload another file (to a brand new drop) or view the drop you just created with your file!

If Droplet gains enough support, I would love to see further renditions of the application to allow more support for other Drop.io features. Until then, be sure to leave your thoughts in a comment below!

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

System Requirements:

Adobe AIR Runtime 1.5 or higher
- Will run on Windows, Mac, or Linux

How to Load External Images in Actionscript 3.0

Andrew Christensen — Thu, 12 Mar 2009 03:37:12 +0000

Using the flash.display.Loader class in AS3, you can load in external image files to display in flash. The loader class supports loading in JPG, SWF, PNG, or GIF file types. The Loader class sounds more like a loading manager that watches load progress, rather than a display object. Fact is, the Loader is treated as a DisplayObject, so when it’s ready you just add it to the stage. Pretty simple, so let’s get started!

First, you will need to create an instance of the loader class and add a couple event listeners to it. One to watch load progress, and one to watch for when the loading is complete.

1
2
3

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

You’ll notice that I’m not adding the event listener to the loader instance (myLoader), but instead adding them to a property of myLoader called contentLoaderInfo. The Loader class has a special property that controls all the loading events. This property is an instance of the LoaderInfo class, so we will listen to it for events, rather than our Loader instance.

Next, we will call the Loader.load() method to initiate the loading sequence. You will need to create a new variable that will be an instance of the URLRequest class. This new variable will be passed to the load() method.

1
2
3
4
5
6

Ok, so that’s pretty much it. All that is left is to create our callback methods for each of our eventListeners. Our final code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderReady);

var fileRequest:URLRequest = new URLRequest("myImage.jpg");
myLoader.load(fileRequest);

public function onProgressStatus(e:ProgressEvent) {
// this is where progress will be monitored
trace(e.bytesLoaded, e.bytesTotal);
}

public function onLoaderReady(e:Event) {
// the image is now loaded, so let's add it to the display tree!
addChild(myLoader);
}

Actionscript 3 Webcam Configure

Andrew Christensen — Wed, 25 Feb 2009 04:34:52 +0000

Setting up a webcam in Flash has always been pretty simple. I feel there are two cases in flash that you would use the webcam in a project: Streaming video for video chat or using it as a tool to take a photo. These two cases have completely different purposes and thus you want your camera setup properly for each.

Setup Your Camera
First, let’s setup your camera and a video instance for playback. This code will setup a default camera and default video instance. Both will be setup for 320×240 playback.

1
2
3
4

var camera:Camera = Camera.getCamera();
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

Setup Camera for Streaming Video Chat
Setting up your camera for streaming video chat involves a little more work and planning than just using it to take a photo within the player. Streaming video will require you to sacrifice video quality for speed, especially if you need to sync the video with audio. There are two methods of the Camera class that we will use to balance video quality and frame rate with bandwidth: Camera.setQuality() and Camera.setMode(). setQuality() is used to specify bandwidth and overall image quality of the Camera’s output video. Adobe’s Help Documentation has this to say:

To indicate that bandwidth use takes precedence, pass a value for bandwidth and 0 for quality . Flash Player transmits video at the highest quality possible within the specified bandwidth. If necessary, Flash Player reduces picture quality to avoid exceeding the specified bandwidth. In general, as motion increases, quality decreases.

To indicate that quality takes precedence, pass 0 for bandwidth and a numeric value for quality . Flash Player uses as much bandwidth as required to maintain the specified quality. If necessary, Flash Player reduces the frame rate to maintain picture quality. In general, as motion increases, bandwidth use also increases.

To specify that both bandwidth and quality are equally important, pass numeric values for both parameters. Flash Player transmits video that achieves the specified quality and that doesn’t exceed the specified bandwidth. If necessary, Flash Player reduces the frame rate to maintain picture quality without exceeding the specified bandwidth.

Lets setup our code to have medium compressed quality and a frame rate of 15.

1
2
3
4
5
6
7
8
9
10

var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int = 50; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
var camera:Camera = Camera.getCamera();
camera.setQuality(bandwidth, quality);
camera.setMode(320,240,15,true); // setMode(videoWidth, videoHeight, video fps, favor area)

// Now attach the webcam stream to a video object.
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

Depending on your project, you can change bandwidth, quality, and frame-rate settings to find the best combination. I would suggest setting the video capture size smaller, then stretching it up. This will allow for a higher frame rate since you are sending smaller video that is stretched. The video is a littler blurry, but if you plan on having lots of movement, having a higher frame-rate will be more important.

Setup Camera to take a photo
This type of configuration isn’t a whole lot different the the code example above. The main difference is that we aren’t passing constant amounts of data to a streaming server each second. Instead, we just need to get the camera’s data once. So, we can up the quality and frame rate to our hearts content (granted the user’s hardware allows for the settings).

Here is the above example, but with maxed out configuration for high photo quality.

1
2
3
4
5
6
7
8

var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int = 100; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
var camera:Camera = Camera.getCamera();
camera.setQuality(bandwidth, quality);
camera.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

Feel free to comment with any questions. Check out my other post for more AS3 Camera quirks and tips.

Joshua Davis and Bezier Curve Animations

Andrew Christensen — Tue, 10 Feb 2009 15:01:09 +0000

I’ve always held Joshua Davis pretty high on my list of inspirational programmers/designers. It seems just as I think he has fallen off the radar, he puts out something like this. Wow, this guy always has a trick up his sleeve…

See his presentation with great examples!

GTween improved squencing support

Andrew Christensen — Mon, 26 Jan 2009 17:03:14 +0000

As some of you may know, Grant Skinner has been working on his own tweening library called GTween. The project is still in beta stages with a promise to be delivered public in the next couple weeks.

gskinner.com: gBlog: Preview: GTween beta 5, Now With More Sequencing.

What is a Flash Developer!?

Andrew Christensen — Mon, 19 Jan 2009 04:49:56 +0000

Lee Brimlow has yet another great writeup, but this time it isn’t another great video tutorial. Instead he finally spelled out his opinion on what makes a Flash Developer, or a Flash Designer and the difference between Flash and Flex.

Check it out!

PhizzPop Minneapolis | Team space150

Andrew Christensen — Fri, 16 Jan 2009 22:31:57 +0000

So a few guys from work and myself were asked to compete in the Microsoft PhizzPop challenge this week. I had heard of the competition a few months back, but I had thought it was more of a student challenge. After being able to rearrange my work schedule for 3 days of Silverlight training, I was off to the MN Microsoft campus!

The training was taught by Aquent, which was nice to have a neutral party teaching the software. I was actually pretty impressed with the Microsoft Expression Suite. We spent most of the class working in Blend 2 building Silverlight applications. After working in Flash and other web technologies for years, I was happy to notice the similarities Microsoft incorporated into the Expression Suite to help first time users jump right in. My favorite part was the tie between Visual Studio and Blend. Using Visual Studio to edit the C# (main programming language for Silverlight applications) worked great. I never knew Visual Studio was so robust as an editor, I wish I could edit Actionscript in it!

So after 3 days of training, we received our challenge from Microsoft: Pitch an idea to help a fictitious retailer engage more customers online and offline. My team regrouped and over the next 5 days (3 of them business) worked on our pitch. During that time I was the team’s developer. It was my job to build out the technical part of the pitch using Microsoft technologies (Expression Studio mainly). One neat thing to note, everyone in the contest was able to develop for the new Microsoft Surface and Microsoft Airwave technologies. We had access to one of the few Microsoft Surface prototypes to use in our presentations. The scheduling around developing for these technologies was a little too tight, we could only debug on a live machine for a couple hours the day before the contest, so my team decided to stick to desktop development instead. I will admit switching over to a new technology in such a short time then creating an entire business pitch in three days was a pain.

My team pushed late into each night to develop the concept, art, and media files for our final presentation. Finally on Thursday evening, we headed over to Solera in downtown Minneapolis for the PhizzPop event. Microsoft did a great job with the event, lots of lights and drinks (do not try the absinthe!). Each team had 8 minutes (10 tops) to present their pitch to a panel of 5 judges from local business and agencies. My team nailed our presentation, and in the end were one of two favorites. The other was Minneapolis design agency Zeus Jones. After 15 minutes the judges regrouped and announced the winner of the event. After all that hard work and effort over the past two weeks, team space150 (my team) lost to Zeus Jones. I was bummed, but if we had to loose to any of the teams, I was glad it was them.

Overall it was a great experience that brought us together and I can walk away with some great knowledge of this new technology. Going forward I don’t plan using Silverlight all too much, it definately has limited moments of being a better option than Flash for me.

Tweensy Goes Public!

Andrew Christensen — Tue, 06 Jan 2009 07:04:14 +0000

As you may have read in my last post, I was lucky enough to get my hands on a beta version of “Tweensy“. Tweensy is an actionscript 3 tweening library from Shane over at Lost In Actionscript. Within the short time that I have been able to use the library I have been amazed at the speed and simplicity of it’s use. As of today, Tweensy has officially gone public!

There are two main libraries available plus an FX expansion package: Tweensy Original and Tweensy Zero. In Shane’s latest post he describes why Tweensy is better than any other as3 tweening engine. To sum it up, he uses Object Pooling and utilizes DoubleLinked lists rather than a Dictionary or Array. I could try and go into more detail, but Shane does a better job at explaining.

Ease of use is the main seller for me. Yes performance is great to have when you are working on high profile, bleeding edge projects. However I am often working on more basic projects that need to be completed on a tight deadline. Currently I use Tweener. It is so simple to setup and use. There are a couple of extra steps that you will need to take with Tweensy to accomplish the same ol’ tween as Tweener. Tweensy Zero should make it more worth my while though on the smaller projects. The entire library is compressed down to 2.9kb! I’m not sure to what extend this version is limited, but it will be great to help spiffy up some boring banners!

Of course what I’m most excited about is the effects package that Shane has created that pairs with Tweensy well. It currently is somewhat limited to creating emitters and glowing blurry objects (as you can tell in my first demo and many of Shane’s), but he has also used it to create a cool BumpMap and Bulge demos. Also, Shane claims it’s easy to create better tweens that animate on complicated motion guides with Tweensy.

Now I’m off to download the latest source from Google Code! Be sure to snag your copy and post your demos!

Tweensy adds much needed effects support

Andrew Christensen — Tue, 23 Dec 2008 16:38:12 +0000

I was lucky enough to recently acquire a beta version of the Tweensy library from Shane McCartney over at Lost In Actionscript. I’ve taken my first crack at using the engine and I have to say I’m very excited to see what is still in store for this promising library. Currently I use Tweener for all my projects. It is quick, painless and very simple to use. It doesn’t support filters and uses mainly static methods. Tweensy on the other hand has support for many different types of effects that all developers yearn for (BitmapLayer is my favorite). Tweensy is broken down in easier to manage pieces that help keep the file size down. Be sure to check back often for more demos as I expand my knowledge of this great new piece of work. Oh, and I almost forgot to mention…Tweensy has support to “yo yo” a tween!

View The Demo

Drop.io AS3 Library Update

Andrew Christensen — Tue, 16 Dec 2008 01:46:31 +0000

UPDATE: I have posted what there is for files on Google Code. The code currently is considered as-is with no support.

So as I mentioned in this post, I have been working on an AS3 library for interfacing with the new Drop.io API. Since my announcement, I’ve been getting some great support from both developers and the Drop.io team. It has been a while and I wanted to let you know I’m still working on the library. I’ve got some free time coming up soon, so I hope to use that time to get something ready for a beta stage.

Keep checking back for more updates! My goal is to have it complete by the end of the year.

Super Duper Desktop FLV Player added to Softpedia Database!

Andrew Christensen — Sat, 06 Dec 2008 16:09:35 +0000

I wrote in a previous post about an Adobe AIR Desktop FLV Player that I developed a while back for quick viewing of Adobe FLV files. I’m happy to announce the app has been officially added to the Softpedia database! You can now download the file from either Adobe’s Marketplace or from Softpedia.

Drop.io AS3 Library

Andrew Christensen — Mon, 01 Dec 2008 07:48:37 +0000

UPDATE: I have posted what there is for files on Google Code. The code currently is considered as-is.

So I mentioned in my last post about the new Drop.io API and how easy it is to use. Well, since then I’ve been playing around with the API in flash and accidentally started an AS3 Flash library for the API. Hopefully I’ll have enough time soon to complete it so other Flash developers can use it to create their own Drop.io apps. The image above is one of the first tests I was working on that started all this.

I will be posting updates on the library, so be sure to check back. If anyone has already started working on an AS3 library, feel free to post a comment. Any help or support I can get is appreciated!

The New Drop.io API: Drop.io Desktop Manager

Andrew Christensen — Sat, 29 Nov 2008 19:32:34 +0000

UPDATE: This application has been altered. The finished product is called Droplet and be viewed HERE

Over a year ago I had the pleasure of working on the team that created Drop.io. I had built the original Flash uploaders. Since then, the Drop.io team has been hard at work and just last week released a new version of the site with a TON of great new features. My absolute favorite is the new Drop.io API. Getting a FREE key is simple and very quick (possibly faster than getting a FREE drop)! With only an hour into it, I’ve already managed to move, delete, and add assets quickly and painlessly. I can’t wait to get some more time into this and build out a drop manager in Adobe AIR.

Keep checking back for more status updates, I hope to have the Drop.io Desktop Manager available soon!

Until then, check out some of my other AIR apps…
Super Duper Desktop FLV Player
The File Furnace