Logo
Entries about technology. Website-related news. Projects that I'm working on. Code, web services and more. Programming insights and help. Space
Space

AS3: Intro to RTMP Streaming / Publishing.

Posted on August 08, 2009 by Jimmy K. in Tutorials
For the purpose of being awesome, I set out to educate myself in the process of streaming (downstream) and publishing (upstream) live, uninterrupted audio/video using RTMP (Real Time Messaging Protocol). Click here if you would like to learn a more about RTMP.

Are you interested in writing your own webcam delivery, surveillance or online audio/video chat application? Good news! RTMP may be just the protocol that you need! I’ve created two small Adobe Flash (.fla) files that should get you started.

The first, upstream.swf, is the file you would use to upload your webcam’s video feed to an RTMP server. (Usually a hosting company or in-house terminal running Flash Media Server or Wowza Media Server.. I believe that both applications are free for up to 10 simultaneous streams).

The contents of upstream.fla:
var sMediaServerURL:String = "rtmp://[YOUR_RTMP_SERVER]";
var sStreamName:String = "[YOUR_RTMP_STREAM]";

var oCamera:Camera;
var oConnection:NetConnection;
var oMetaData:Object = new Object();
var oMicrophone:Microphone;
var oNetStream:NetStream;
var oVideo:Video = new Video(640, 480);

NetConnection.prototype.onBWDone = function(oObject1:Object) {
// Some media servers are dumb, so we have to catch a strange event.
// Just go ahead and trust me on this one.
trace("onBWDone: " + oObject1.toString());
}

this.oConnection = new NetConnection();
this.oConnection.addEventListener(NetStatusEvent.NET_STATUS, eNetStatus, false, 0, true);
this.oConnection.connect(this.sMediaServerURL);

function eNetStatus(oEvent1:NetStatusEvent) {
trace("NetStatusEvent: " + oEvent1.info.code);

if (oEvent1.info.code == "NetConnection.Connect.Success") {
trace("Connected to the RTMP server.");

this.oCamera = Camera.getCamera();
this.oMicrophone = Microphone.getMicrophone();

// These settings worked fairly well for my purposes.
this.oCamera.setMode(640, 480, 30, true);

// Some servers limit your bandwidth so you
// may have to adjust these numbers to suit your needs.
this.oCamera.setQuality(0, 80);

// Attach the camera to the video.
this.oVideo.attachCamera(this.oCamera);
this.addChild(oVideo);

// Create a stream for the connection..
this.oNetStream = new NetStream(oConnection);

// Attach the camera and microphone to the stream..
this.oNetStream.attachCamera(this.oCamera);
this.oNetStream.attachAudio(this.oMicrophone);

// Start publishing the stream..
this.oNetStream.publish(this.sStreamName);

// Listen for meta data..
this.oMetaData.onMetaData = eMetaDataReceived;
this.oNetStream.client = this.oMetaData;
} else if (oEvent1.info.code == "NetConnection.Connect.Closed") {
trace("Disconnected from the RTMP server.");
}
}

function eMetaDataReceived(oObject1:Object) {
trace("MetaData: " + oObject1.toString());
}
The second file, downstream.swf is the file you would use to view your webcam’s live video feed from the RTMP server. This file could also be exported to a SWF and embedded on your website to allow other people to view your stream.

The contents of downstream.fla:
var sMediaServerURL:String = "rtmp://[YOUR_RTMP_SERVER]";
var sStreamName:String = "[YOUR_RTMP_STREAM]";

var oConnection:NetConnection;
var oMetaData:Object = new Object();
var oNetStream:NetStream;
var oVideo:Video = new Video(640, 480);

this.oConnection = new NetConnection();
this.oConnection.addEventListener(NetStatusEvent.NET_STATUS, eNetStatus, false, 0, true);
this.oConnection.connect(this.sMediaServerURL);

function eNetStatus(oEvent1:NetStatusEvent) {
// Trace the event code for debugging..
trace("NetStatusEvent: " + oEvent1.info.code);

switch (oEvent1.info.code) {
case "NetConnection.Connect.Success":
trace("Connected to the stream!");

// Create a stream for the connection..
this.oNetStream = new NetStream(oConnection);
this.oNetStream.addEventListener(NetStatusEvent.NET_STATUS, eNetStatus, false, 0, true);
this.oNetStream.bufferTime = 5; // Set this to whatever is comfortable..

// Listen for meta data..
this.oMetaData.onMetaData = eMetaDataReceived;
this.oNetStream.client = this.oMetaData;

// Attach the stream to the stage..
this.oVideo.attachNetStream(oNetStream);
this.oNetStream.play(sStreamName);
this.addChildAt(this.oVideo, 0);

break;
case "NetStream.Play.StreamNotFound":
trace("This stream is currently unavialable.");
break;
}
}

function eMetaDataReceived(oObject1:Object) {
trace("MetaData: " + oObject1.toString());
}
The code for each file is fairly straight-forward: Create a NetConnection object to connect to the server, create a NetStream object to handle the stream, do something with the content of the stream (publish it if we’re broadcasting, download it if we’re viewing) and VIOLA!

Remember to replace [YOUR_RTMP_SERVER] with the URL that is provided to you by your RTMP hosting company (or localhost if you’re testing locally) and [YOUR_RTMP_STREAM] with the name of your stream (for multiple streams on the same server, this is the only part that will change).

Click here to download the source files.

Tags: , , ,
Twitter Design Bump Web Blend Digg del.icio.us Stumble Upon Facebook Design Float Reddit Evernote

Here are some random, unrelated posts.

 
 

2 Responses to "AS3: Intro to RTMP Streaming / Publishing."

Avatar
Space Space Space
Quote Posted by Jimmy K. on June 14, 2010 01:35PM.

Sorry for the late response! I've been pretty busy lately. This script is on a per-stream basis, so if you had two webcams, you would want to convert these swf files to AS3 objects and create them at runtime on a per-webcam basis. That sounds like a good tutorial.
Space
Space Space Space
Avatar
Space Space Space
Quote Posted by tyepoe on June 06, 2010 08:13AM.

I was wondering if this is for one webcam or two? Id the upstream one video feed and the downstream another one, each representing a person at a different location...or is it all one video feed?
Space
Space Space Space
 
 

If you found this useful, please leave a reply.

 
 
Space
 
 
Archives
 
 
Popular Articles
 
 
 
 
Friends
 
 
Tag Cloud
Space
Space
© 2010 END[SEVEN] Web Development. All Rights Reserved.