Tutorials > Tutorial 1: Recording a Stream

 

Tutorial 1: Recording a Stream

This tutorial demonstrates how to record a video stream, and then play back that recorded stream.

 
Viewing the application

Open the tutorial_record.html file. After you grant the Macromedia Flash movie access to your video device, the live video capture appears in the larger video area called Live_video. When you click the Record button, the live camera's stream is sent for recording on the Flash Communication Server. When you click the Stop button, the server stops recording. When you click the Play button, the server sends the recorded stream back to the application, and the recorded stream plays in the smaller video area.

 
Re-creating the application

The tutorial_record.fla file provides the ActionScript for getting a camera, attaching it to a Video object, creating a network connection to the server, recording the camera data on an outgoing stream to the server, and then playing that recorded stream in a second Video object.

When you record a stream in a Flash application, the server creates files with the extensions .flv and .idx. For more information, see "Recorded stream files" in Developing Communication Applications.

Before you start to re-create the application, see "Creating your working environment" in Developing Communication Applications.

 
To create the user interface:

1

In the Flash MX authoring environment, select File > New to open a new file.

2

To add a Video object to your library, open the Library panel (Window > Library) and add an embedded Video object by selecting New Video from the library's Options menu.

3

Drag two embedded Video objects from the library onto the Stage, and give them the instance names Live_video and Replay_video.

4

To add buttons to your movie, open the Components panel by selecting Window > Components.

5

To add the button for recording, drag a push button from the Components panel onto the Stage, placing it below the Live_video video object. In the Property inspector, give it the instance name Record_btn, the label Record, and the click handler doRecord.

6

To add the button for playing, repeat the previous step to create a push button with the instance name Play_btn, the label Play, and the click handler doPlay. Place this button beneath the Replay_video video object.

7

To add a privacy message, select the Text tool and draw a text box. In the Property inspector, select Static Text for the type of text box. Type (or copy and paste) text such as the following text into the text box: Your image will be recorded or broadcasted and could be published at a later date. If you don't approve, please exit this application.

Note: Please note that this text is provided merely as an example, and the precise wording of the text that you use will be dictated by the nature of your application and/or service and any privacy, legal, or other issues raised by your application and/or service.

8

Save the file as tutorial_record.fla.

9

To define your application on the server, create a directory named tutorial_record in your /applications directory in the Flash Communication Server directory.

 
To write the client-side ActionScript:

1

Select the keyframe in Layer 1 of the Timeline and open the Actions panel (Window > Actions).

2

Get and attach the default camera to the Live_Video object, and get the default microphone for later use.

 
// Get references to the default video and audio devices.
// Attach the output from the video device to the Live_video video clip.
client_cam = Camera.get();
client_mic = Microphone.get();
Live_video.attachVideo(client_cam);

3

In the initStreams function, make a connection to the server. Create the output stream for sending the video data to the server, and the input stream for the data coming back from the server. Then attach the input stream to the Replay_video video clip. 

function initStreams() {
	
	// Make a connection to the application on the server
	client_nc = new NetConnection();

	// Note that this call includes the protocol, rtmp, the
	// app name, tutorial_record, and the application instance name, room_01
	client_nc.connect("rtmp:/tutorial_record/room_01");
	
	// Handle status message for the 
	client_nc.onStatus = function(info) {
		trace("Level: " + info.level + " Code: " +  info.code);
	}

	// Create output stream used to publish the video
	out_ns = new NetStream(client_nc);
	
	// Create an input stream to playback the video, and attach
	// video on that stream to the Replay_video object
	in_ns = new NetStream(client_nc);
	Replay_video.attachVideo(in_ns);
}

// Connect to server and set up streams
initStreams();

4

Create the event handler for the Record button. If the user selected the button when the label was Record, then attach video data from the camera to the output stream and publish it. If the button label is Stop, close the stream.

 
function doRecord() {
	
	if (Record_btn.getLabel() == "Record") {
	
		// Attach data from the video and audio devices to the output stream
		out_ns.attachVideo(client_cam);
		out_ns.attachAudio(client_mic);

		// Then publish the camera output as a recorded stream
		out_ns.publish("my_recorded_stream", "record");
		
		// Don't allow the user to play when recording
		Play_btn.setEnabled(false);

		// Change the button label
		Record_btn.setLabel("Stop");

	} else if (Record_btn.getLabel() == "Stop") {

		// Close output stream
		out_ns.close();

		// Now that you're finished recording, allow the user to play
		Play_btn.setEnabled(true);

		// Change the button label
		Record_btn.setLabel("Record");
	}
}

5

Create the event handler for the Play button that plays the stream recorded on the server.

 
function doPlay() {

	in_ns.play("my_recorded_stream");

}

 
To test your application:

1

In the Flash MX authoring environment, after you have saved your work, publish it by selecting File > Publish.

2

In the Flash MX authoring environment, choose Control > Test Movie.