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: ActionScript,
Awesome,
Snippets,
Tutorials