Creating a stream avatar

The easiest way to make your stream appear on an UpStage stage is to create a stream avatar. This avatar is created in the same way as a normal avatar, from the Add Media section of the Workshop interface:

1. Click Add Media.
2. Select Avatar from the media type dropdown menu.
   
   
3. Give the avatar a name, tags, and select a voice if you want.
4. Check the "Enable streaming?" box.
5. In the "Stream server" field, enter the rtmp address of the streaming server you will be using.
6. In the "Stream name" field, give the stream a name.
   
   
7. Assign the avatar to the appropriate stage(s).
8. Click Add Media.

Embedding a stream in an .swf graphic

If you have the ability to create .swf graphics (for example using the Adobe Flash application) then you can create UpStage backdrops, props and avatars that have a stream embedded within the file. This enables more precise positioning of a stream within a "frame".

Please note that this is not a tutorial in using Flash; it is intended for someone who already knows the basics of Flash.

Follow these steps to create an .swf graphic with a stream embedded in it: 

1. In Flash (or another graphics application capable of creating .swf files) create a new document of the dimensions that you want (for UpStage backdrops, use 800 x 500).
2. Import your static image(s) into the first layer of the document (.png or .jpg originals).
3. Convert the image(s) to symbols and adjust the size as required.
4. Create a second layer called video, and place a movie clip symbol of the size and position that you want.
5. Create a third layer called code.
6. Open the Actions window, and insert the following code (replacing "rtmp://example.com/oflaDemo" with the address of the streaming server you are using, and "mystream" with the name of the stream you want to appear):

/// -------------

var CONNECTION_STRING:String = "rtmp://example.com/oflaDemo";
var STREAM_NAME:String = "mystream";
var BUFFER_TIME:Number = 0.1;

// network
var connection:NetConnection;
var stream:NetStream;
        
trace("start the streaming ...");
                
// create connection to red5
connection = new NetConnection();
connection.connect(null);
connection.connect(CONNECTION_STRING);
                
// connect stream
stream = new NetStream(connection);
stream.setBufferTime(BUFFER_TIME);
stream.play(STREAM_NAME, -1);
                
// attach video to display
this.video.attachVideo(stream);

/*
// automatically set proper size
stream.onStatus = function(infoObj:Object) {
        switch (infoObj.code) {
                        case 'NetStream.Play.Start':
                        case 'NetStream.Buffer.Full':
                                this.video._width = this.video.width;
                                this.video._height = this.video.height;
                                break;
                }
        }
}
*/

/*
trace("stopping stream ...");
                
stream.close();
if(connection.isConnected) connection.close();
this.video.clear();
*/

7. Go to File > Export > Export Movie and save your movie as a .swf.
8. Test the file to see if it works, by opening either in Flash or in a browser. If it's good, then upload it to UpStage in the normal way.

Flash Media Live Encoder (Mac & Windows)

Save a profile 

If you are going to be using the same streaming server on a regular basis, remember to save a profile once you have entered the settings by going to File > Save Profile.  This means that next time you open the FMLE, your settings will automatically be loaded.

If you try different settings to experiment with quality, you can save a new profile and then go back to the original settings by going to File > Open Profile.

Optimum settings

The optimum settings for your video and audio streams will depend on a number of factors, including the hardware you are using (computer operating system, camera, microphone), the capability of your network, and the scale of audience you expect to reach. 

Prerecorded streams

It is possible to play a prerecorded video or audio file in the same way as a live stream. This allows you to add additional media to the stage without increasing the initial load time for the audience, and enables a greater variety of formats.

In particular, it allows the playing of prerecorded video at high quality, which was not previously possible to do directly in UpStage (prerecorded video can be played by embedding in .swf files).

File formats that can be streamed are MP3, FLV, or for higher quality MP4 or AAC (note that higher quality also means more bandwidth and potential problems for people on slower networks). 

You will need FTP access to the streaming server; ask the person who is administering the streaming server you are using for this information.

Streaming prerecorded video and audio 

1. Via FTP, upload your video or audio file to the streaming server (note: use only letters and digits in the file name, no special characters or spaces).
2. In UpStage, go to Add Media and create a stream avatar with the RTMP URL of the streaming server and the stream name as the filename of the video or audio file.
3. Assign the stream avatar to the appropriate stage(s).
4. Test the stream in the Add Media interface to ensure it is working.
5. Go to the stage, hold the avatar, and place it on the stage; the recording will start playing from the beginning of the file.
6. To stop the stream, simply drop or clear the stream avatar from the stage.

Red5 Publisher interface

The Red5 Publisher is a browser interface that allows you to publish a stream without having to download and install a streaming application. However, it does not allow as much control or optimisation over the stream you are sending, so if you are going to be regularly streaming and/or wish to have the best quality stream, it is recommended that you use VLC, FMLE or another similar application (see the following chapters for download links and set-up).

To access the Red5 Publisher, you need the publisher URL for the Red5 server you are using. This URL will look something like:

http://example.com:5080/demos/publisher.html 

or

http://red5.example.com/demos/publisher.html 

(where "example.com" is the url of the host server).

Enter the settings

Open the Red5 Publisher URL in a browser (it will look like the screengrab above) then follow these steps:

1. In the Settings area, select the Server tab and enter the appropriate rtmp URL (in Location), then click Connect:
   
     
2. You should see now in the Log that you are connected, from the line that says "NetConnection.Connect.Success" - don't worry about the error messages.
     
   
   
   
3. Go to the Video settings and choose the video source you want to use, then click Start:
   
   
   
   
4. Click Allow on the pop-up window that asks you if Flash can access your web cam.
5. Go to the Audio settings and choose the audio source that you want to use, then click Start:
   
   
6. You should see in the Log that both your video and audio has started (naming could be different depending on your hardware):
   
   
7. You should also see your webcam image and hear your audio in the preview tab. Now enter the stream name (exactly the same as you have given to the stream avatar in the UpStage workshop, this example shows the name 'mystream') and click Publish:
   
   
   
   Note: the Publish tab only shows the capture from your hardware; to see the actual stream select the View tab, enter the stream name and click Play.
8. If your stream is successfully published you will see it in the Log (you will also see error messages, but these can be ignored):
   
   
   
9. To stop the stream, just click Stop in the Publish tab. 

Sending a stream

You need to have access to a streaming server in order to send an audio-visual stream from your computer to UpStage. 

Please note: this manual is not about how to install a streaming server; for information this and on installing the UpStage video hack version, please click here. Normally you will not need to install your own streaming server, just have access to one.

The information in this manual is based on the Red5 streaming server; this is not the only option, but it is the one that we have tested and found to work well.  

Stream server name 

The Red5 server will have an rtmp URL that will look something like this (with "example.com" being the URL of the host server):

 rtmp://red5.example.com/oflaDemo

or: 

 rtmp://example.com/oflaDemo 

You will need to enter this into the "Stream server" field when you create your stream avatar in UpStage (see the chapter Creating a stream avatar), and you will also need to enter it into the streaming application that you use to send the stream from your computer.

Streaming client or publisher interface 

There are two ways to send a stream from your computer to a Red5 server:

1. Using the Red5 Publisher - the browser interface provided by the Red5 server.
2. Using a streaming client, such as VLC (Linux) or Flash Media Live Encoder (Mac & Windows).

Using a streaming client rather than the Red5 publisher gives more control over the quality and other variables of your stream. It also allows you to save the settings in a profile, so that when you reopen the client to restart a stream, all your settings are automatically loaded and you do not have to enter them all again. 

Whichever option you use, you will need to:

1. enter the server URL (rtmp:// ... )
2. enter the stream name, exactly the same as it is for the UpStage avatar
3. select the appropriate video and audio devices
4. create a connection to the server
5. start your stream.

It is easy to make small errors in any of these steps that will stop your stream from working. For example, a space at the end of the server URL will prevent the connection from being made. If your stream does not work, please carefully check all of these settings to be sure you have everything right, no extraneous spaces or small typos.

This manual provides configuration instructions for the Red5 Publisher interface (no download required), VLC and the Flash Media Live Encoder (FMLE). For the latter two, you will need to first download and install the application; then follow the instructions in this manual. 

Video tutorial

Here is a 10-minute video tutorial which gives examples of how streaming has been used in UpStage and explains how to send a stream using the FMLE.

VLC (for Linux users)

rtmp://red5.example.com/oflaDemo/stream1

Start streaming

Note: In case you want to see a live preview of the streamed video you can uncomment the line in the section “watch stream?” of the script. You will need the software rtmpdump and mplayer to watch the stream.