AS3: Introduction to RTMP Streaming

Posted on April 30, 2011 by Jimmy K. in Tutorials.

Back in 2008, I wrote an article that explained how to connect to a media server and publish or stream live audio and video using Real Time Messaging Protocol. If you’re interested in writing your own webcam delivery, surveillance or online audio/video chat application, this article can definitely help get you started.

This article assumes that you have access to an RTMP server. You can use a hosting company that specializes in streaming services, or you can use an in-house machine running Adobe’s Flash Media Server or Wowza Media Server. I believe that both applications are free for up to 10 simultaneous streams, so that should be enough to get you started. I just tested this tutorial on the free version of Wowza Media Server and it worked like charm, so no worries there. If you download and install Wowza, you may want to read this quick start guide to set up an “application” in the Wowza environment.

I have created two .fla files: upstream.fla and downstream.fla; and three classes: RTMPStream.as, Upstream.as and Downstream.as for this tutorial. If you are concerned with both the upstream and downstream process, then you will be using both files.

RTMPStream.as is the base class for both Upstream.as and Downstream.as. This file contains the URL to your RTMP server and the name of your stream. For example, if the URL of your RTMP server is “www.myserver.com”, and your application name is “mystream”, then the complete URL to your server will be “rtmp://www.myserver.com/mystream”.

The contents of RTMPStream.as:

package com.endseven {

	import flash.display.MovieClip;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	public class RTMPStream extends MovieClip {

		protected var sMediaServerURL:String = "rtmp://[RTMP_STREAM_URL]/[RTMP_APP_NAME]";
		protected var sStreamName:String = "[RTMP_APP_NAME]";

		protected var oConnection:NetConnection;
		protected var oMetaData:Object = new Object();
		protected var oNetStream:NetStream;
		protected var oVideo:Video;

		/* the constructor */
		public function RTMPStream():void {

			NetConnection.prototype.onBWDone = function(oObject1:Object) {
				trace("onBWDone: " + oObject1.toString()); // some media servers are dumb, so we need to catch a strange event..
			}

		}

		/* triggered when meta data is received. */
		protected function eMetaDataReceived(oObject:Object) {
			trace("MetaData: " + oObject.toString()); // debug trace..
		}

	}

}

Upstream.as extends RTMPStream.as and is used for publishing audio and video to your RTMP server using a webcam connected to your computer. This file will be run from your computer as a .swf or can be compiled into an Adobe AIR application.

The contents of Upstream.as:

package com.endseven {

	import flash.events.NetStatusEvent;
	import flash.media.Camera;
	import flash.media.Microphone;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	import com.endseven.RTMPStream;

	public class Upstream extends RTMPStream {

		private var oCamera:Camera;
		private var oMicrophone:Microphone;

		/* the constructor. */
		public function Upstream():void {

			trace("Upstream object has been created.");

			this.oVideo = new Video(640, 480);

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

		}

		/* triggered when a net status event is received. */
		private function eNetStatus(oEvent1:NetStatusEvent) {

			trace("NetStatusEvent: " + oEvent1.info.code); // debug trace..

			switch (oEvent1.info.code) {
			case "NetConnection.Connect.Success":

				this.oCamera = Camera.getCamera();
				this.oCamera.setMode(640, 480, 30, true);
				this.oCamera.setQuality(0, 80);

				this.oMicrophone = Microphone.getMicrophone();

				// 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;

				trace("Connected to the RTMP server."); // debug trace..
				break;

			case "NetConnection.Connect.Closed":

				trace("Disconnected from the RTMP server."); // debug trace..
				break;

			}

		}

	}

}

Downstream.as also extends RTMPStream.as and is used for streaming audio and video from your RTMP server to your computer or website. This file can be run from your computer as a .swf or can be embedded on your website to allow other people to view your stream.

The contents of Downstream.as:

package com.endseven {

	import flash.events.NetStatusEvent;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	import com.endseven.RTMPStream;

	public class Downstream extends RTMPStream {

		/* the constructor. */
		public function Downstream():void {

			trace("Downstream object has been created."); // debug trace..

			this.oVideo = new Video(640, 480);

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

		}

		/* triggered when a net status event is received. */
		private function eNetStatus(oEvent1:NetStatusEvent) {

			trace("NetStatusEvent: " + oEvent1.info.code); // debug trace..

			switch (oEvent1.info.code) {
			case "NetConnection.Connect.Success":

				// 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);

				trace("Connected to the RTMP server."); // debug trace..
				break;

			case "NetConnection.Connect.Closed":

				trace("Disconnected from the RTMP server."); // debug trace..
				break;

			case "NetStream.Play.StreamNotFound":

				trace("This stream is currently unavailable."); // debug trace..
				break;

			}

		}

	}

}

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, and then do something with the content (publish it if we’re broadcasting or attach it to a video object if we’re streaming) and viola! You are now ready to stream audio and video.

Remember to replace [RTMP_STREAM_URL] with the URL that is provided to you by your hosting company (or localhost if you’re testing on your own computer) and [RTMP_APP_NAME] with the name of your “application” (for multiple streams on the same server, this is the only part that should change).

This was always a pretty active topic on my old blog. If you have any questions or improvements please feel free to share them in the comments section of this article. I’m always happy to help!

Click here to download the source files.

Tags: , , , ,

 

Jimmy K. is a Chicago-based web developer who actively posts tutorials, articles and insights on his web development blog to help other programmers and developers.

You can find Jimmy on Google+ and Twitter.

 
 
 
 
 

If you like this, please leave a comment.

Name (required)
Email Address (required)
Website
Comments: