Playing Live Video

Now that you can receive video from the server, it's time to publish your camera and microphone to the server.

Connecting your computer's camera in Flash MX is very easy. One line of code will do it (provided you have a Video object on the stage called my_Video ):

 my_Video.attachVideo(Camera.get()); 

You can do the same with your microphone:

 this.attachAudio(Microphone.get()); 

While a very neat trick, it really won't get you very far in communication unless you are a video artist building a montage of live Video objects. If you are that person remember, this is Flash; the Video object is just another object on the stage. Try wrapping it in a graphic and doing some animation with the Live Video window or playing with some interesting masks. Better yet, try connecting multiple cameras and Video windows .

Exercise 7.4: Publishing a Live Stream Using the Camera and Microphone Objects

The real magic happens when you can let other computers see your camera, and you can see theirs. Exercise 7.4 walks you through the process of publishing your camera and microphone to the server, building on what you have just created. You will use the publish method to record your camera's activity on the server. Exercise 7.5 will take this one step further and allow you to playback the live and recorded stream.

1. Open the previous example, VideoStream.fla, in Flash MX.

2. Save the Flash file as PublishCam.fla in the same folder, myVideoApp.

3. Close or move the ActionScript window so you can see the Flash stage.

4. Open the Library (F11).

5. Drag a second instance of the embedded Video object to the Flash stage, and name the second embedded video instance play_video in the Properties window. This will be used to play the live and recorded video from the server.

6. Rename the first embedded video instance, cam_video. This window will be used to display our local camera feed.

7. Select the Flash UI components from the Components panel, and add two PushButton UI components to the Flash stageone under each Video window. These buttons will be used to control the publishing and subscription feeds.

8. Set the properties of the left PushButton to the following:

   Instance name: record_pb

   Label: Record Camera

   Click Handler: startPublish

   The Click Handler is now set to call a function that you will build shortly. This function will open a NetStream and start sending the camera feed to it.

9. Set the properties of the right PushButton to the following:

   Instance name: play_pb

   Label: Play Video

   Click Handler: startPlay

   The instance name, play_pb, will be used to dynamically control the label of the button and the Click Handler. When the user clicks Play, it will change to Stop, and the Click Handler will change to stopPlay. You will add ActionScript for this shortly.

10. Add two static text labels above each Video window. Enter Publish above the left window and Subscribe above the right.

11. Save the Flash file.Your Flash stage should look like Figure 7.17. Notice the Properties window displaying the values for the record camera PushButton. You are now ready to build the ActionScript.

    Figure 7.17. Set up your Flash stage like this example.

    

12. Open the ActionScript window (F9), and confirm your ActionScript against Listing 7.2. Like before, this ActionScript will build on what you have done previously but will become more complex.

13. Remove the following videoIN_ns lines of code:

     videoIN_ns = new NetStream(myConnection_nc);  videoIN_ns.onStatus = function(info){    trace("NETSTREAM LEVEL: "+ info.level + " CODE: "+ info.code); }       my_video.attachVideo(videoIN_ns);       videoIN_ns.play("Sparky"); 

    This exercise will not be receiving video, and this script is no longer required.

14. Attach the local camera feed, within the appLogin function, to the cam_video object on the Flash stage. In the place of the videoIN_ns code you just deleted, add this code after the .connect method:

     // attach the Camera feed to the video monitor; cam_video  cam_video.attachVideo(Camera.get()); 

    The Camera.get() function enables any camera attached to the computer. When this method is called, the user receives the Flash player's privacy popup letting him know that you are accessing his camera. Attaching the live camera to the Video object serves as the local video monitor for the user to see what will be captured. It also helps the user to position the camera.

15. Create the startPublish() function after the appLogin function, at the bottom of all the ActionScript:

     startPublish = function() {  // Code will go here } 

    This function contains the ActionScript to open a new NetStream and publish the camera feed to that stream.

16. Create the stopPublish() function at the bottom of all ActionScript:

     startPublish = function() {  // Code will go here } 

    This function closes the NetStream, which will stop publishing the camera feed.

17. Add a couple empty lines within the startPublish = function() . Make sure you don't delete the closing bracket .

18. Open a stream to publish the video within the startPublish() function. Where you added the empty lines place:

     publish_ns = new NetStream(myConnection_nc); 

    This assigns a new NetStream to the variable, publish_ns , and attaches that stream to the NetConnection, myConnection_nc .

19. Setup the publish_ns stream as a publish stream. Immediately following the line above, add the following code:

     // this will create a new FLV file in the myVideoApp/streams/myInstance Folder  // and set it to start recording publish_ns.publish(login_txt.text, "record"); 

    The publish() method here is set to start recording any source to a dynamic filename. The filename on the server will be the name of the user currently logged in. If you type user in the Login field, then the filename would be user.flv. This file will automatically be inside the instance folder within the myVideoApp/streams folder. This method automatically creates the streams/[instance name] folder if it doesn't already exist.

20. Attach the camera feed to the publish stream:

     // attach the video Source to the stream  publish_ns.attachVideo(Camera.get()); 

    You are still working within the startPublish() function. Yes, you can "split" the camera feed to many places. In this case, you will be sending the camera feed through the NetStream, but also to the embedded video on the Flash stage.

21. Attach the microphone feed to the publish stream:

     // attach the audio Source to the same stream  publish_ns.attachAudio(Microphone.get()); 

    Attaching the microphone and the camera to the same stream combines both in sync to the same FLV file on the server.

22. Change the label and the Click Handler for the Record button:

     // change the pushButton to a stop button,  change the label property, and the Click  Handler property  record_pb.setLabel("Stop Recording"); record_pb.setClickHandler("stopPublish"); 

    This is the last step inside the startPublish() function. It changes the name displayed on the record button to Stop Recording. It also changes the function that will be called when it is clicked. If you are wondering what the setLabel and setClickHandler methods are, they are unique methods for the PushButton UI component. What they do is change the name on the button (label) and change the function the button will call (ClickHandler) dynamically.

    That's it for the startPublish() function. Make sure you didn't delete the closing bracket. Click the Check Syntax check mark at the top of your ActionScript Editor to make sure your code does not contain errors. Review the full code in Listing 7.3 to compare your code. You will now work inside the stopPublish() function.

23. Call the Netstream Close() method, stopping the stream publication. Add the following line inside the stopPublish() function:

     // close the netStream, to stop the record  publish_ns.close(); 

24. Change the label and the Click Handler of the Record button back to its original state:

     // change the button label, and the click handler  record_pb.setLabel("Start Recording"); record_pb.setClickHandler("startPublish"); 

25. Save your Flash movie; you are done!

That's it for the stopPublish() function and this part of the coding exercise. You are now ready to test your movie. Review the code in Listing 7.3 to ensure you have everything in the right place. There are some extra comments in this code to help you out. Comments start with a double slash, //.

Listing 7.3 Final ActionScript listing for PublishCam.fla

 // Include the Debug Class file #include "NetDebug.as" // create a new instance of the NetConnection object myConnection_nc =  new NetConnection();  // handle any status changes and responses from the server myConnection_nc.onStatus = function(info) {       trace("LEVEL: "+info.level+"  CODE: "+info.code); }; // // connect the application when the login button is pressed //  appLogin  = function () {       // Make the connection to the server       myConnection_nc.connect("rtmp:/myVideoApp/myInstance", login_txt.text);       // attach the Camera feed to the video monitor; cam_video       cam_video.attachVideo(Camera.get());       // Connect the peopleList UI Component to the new connection       peopleList_mc.connect(myConnection_nc); }; // Connect the connection Light UI Component to the new connection connectionLight_mc.connect(myConnection_nc); //  // PUBLISH METHODS //  startPublish  = function () {       publish_ns =  new NetStream  (myConnection_nc);       // this will create a new FLV file in the myVideoApp/streams/myInstance Folder       // and set it to start recording       publish_ns.publish(login_txt.text, "record");       // attach the video Source to the stream       publish_ns.attachVideo(Camera.get());       // attach the audio Source to the same stream       publish_ns.attachAudio(Microphone.get());       // change the pushButton to a stop button,  change the label property, and the  Click Handler property       record_pb.setLabel("Stop Recording");       record_pb.setClickHandler("stopPublish"); };  stopPublish  = function () {       // change the button label, and the click handler       record_pb.setLabel("Start Recording");       record_pb.setClickHandler("startPublish");       // close the netStream, to stop the record       publish_ns.close(); }; 

When you have logged in and started to publish your camera feed, your application should look like the example in Figure 7.18.

Figure 7.18. The completed exercise showing the live camera window.

While you are recoding yourself, take a look at the Communication App Inspector inside Flash MX (click Window, Communication App Inspector to open it), as shown in Figure 7.19. When you have logged in, select the application instance, myVideoApp/myInstance. You will not see anything in the live logs yet. Switch over to your running application and log in and start publishing again. Your Live Log should display the following trace output from the server.

Figure 7.19. The App Inspector window displays the server trace information when streams are created and published.

Figure 7.19 is displaying activity when a new user logged into the application. Notice how the server deleted the NetStream that was previously being published, and then immediately re-created it. It is also tracing when the publish command was received and when recording started.

In Figure 7.19, you can see a NetStream was deleted and the server did "garbage collection" when a new connection from you was established (when you logged in again). When you click the Record button, you see a new NetStream is created and gives the ID 1. The server traces the name of the new stream and traces when recording starts.

Exercise 7.5: Playing a Live Stream

Now that you are able to publish a stream to the server, your next step is to play it on another computer. Because we set the publish method to record, you will not only be able to connect to the live stream, but when the stream stops publishing, you will see the recorded version immediately.

This exercise will continue where you left off in Exercise 7.4. There is one more element you will add to the Flash stage.

1. Open the file PublishCam.fla in Flash MX.

2. Close or move the Actions panel so you can access the Flash stage.

3. Move the PushButton labeled Play Video down about 50 pixels. Use Figure 7.21 for a guide to the layout.

4. Using the Text Drawing tool, add a static text label that prompts the user to add the name of someone publishing a stream.

5. Below the text label, add a text input field and name the instance of the text input field streamToPlay_txt. The user will enter the name of a participating user to connect with in this field.

6. Save your Flash file. You just added a way for the user to connect with streams published by other people or even FLV video that already exists on the server. Next you will add the ActionScript required to make this work.

7. Open the ActionScript window (F9).

8. Assign the default value to the streamToPlay_txt text box. The default stream will be the username entered in login_txt. Add the following line after the line connecting the peopleList_mc to MyConnection_nc. Make sure the code stays within the appLogin function (before the closing curly brace ):

    // copy the name the person entered to the streamToPlay_txt box  streamToPlay_txt.text=login_txt.text; 

9. Scroll to the bottom of the ActionScript, and add a new function to start the subscription stream:

    startPlay = function () {  // insert play code here } 

   This function, as you remember, is invoked by the play_pb PushButton on the Flash stage.

10. Open a new NetStream channel to the variable play_ns to receive the video. Assign it to the myConnection_nc connection. Place this code in the first line within the startPlay() function:

     // start a New NetStream channel in the myConnection_nc       play_ns = new NetStream(myConnection_nc); 

11. Attach the play_ns NetStream as the video source for the play_video Video object on the Flash stage. This code follows the new NetStream command within the startPlay() function:

     // attach the NetStream as the video Source  play_video.attachVideo(play_ns); 

12. Issue the play command to plan_ns NetStream . The video input named in the streamToPlay_txt box will start to play. Place this code within the startPlay() function:

     // play the movie named in the text input field, streamToPlay  // If the stream is currently being published, then it will play a live stream // If the stream is not being published, then it will play the recorded stream from time=0 play_ns.play(streamToPlay_txt.text); 

13. Change the Play button to a Stop button by dynamically changing its label and Click Handler. Add the following two lines of code as the last code within the startPlay() function:

     // change the button label, and the click handler  play_pb.setLabel("Stop Playing"); play_pb.setClickHandler("stopPlay"); 

    The Play() command will start a video to play immediately from the server. If the video is still being recorded, it will display the video as it is being recorded. You will see a live video feed of any video published to the system. This is how you connect to another person's web camera.

14. The last step is to build the stopPlay() function so you can stop the stream. The stopPlay() function is very similar to the stopPublish function you coded earlier. Add the following code at the bottom of the ActionScript, below the startPlay() function:

     stopPlay = function () {           play_pb.setLabel("Start Playing");          play_pb.setClickHandler("startPlay");          // close the NetStream to stop the play          play_ns.close(); }; 

    This function changes the label and Click Handler of the Stop button back to a Play button, and then closes the play_ns NetStream.

Review your new code with Listing 7.4:

Listing 7.4 Updated code listing for PublishCam.fla

 // - // PLAY (Subscribe) Methods // -  startPlay  = function () {       // change the button label, and the click handler       play_pb.setLabel("Stop Playing");       play_pb.setClickHandler("stopPlay");       // start a New NetStream channel in the myConnection_nc       play_ns = new NetStream(myConnection_nc);       // attach the NetStream as the video Source       play_video.attachVideo(play_ns);       // play the movie named in the text input field, streamToPlay       // If the stream is currently being published, then it will play a live stream       // If the stream is not being published, then it will play the recorded stream from  time=0       play_ns.play(streamToPlay_txt.text); };  stopPlay  = function () {       play_pb.setLabel("Start Playing");       play_pb.setClickHandler("startPlay");       // close the NetStream to stop the play       play_ns.close(); }; 

That's it! You are ready to test the movie once again. This time, invite some friends to come join you. Log into the application, and accept the camera warning. You will immediately see your camera's view. Click Record to start the publishing stream. Click the Play Video button (notice your name is automatically inserted into the input box). You will see a loop back of your signal from the server. This is a live video feed.

To access the recorded feed, stop the playback and stop the record. Start the playback again, and you will see the recorded video of yourself.

Stop all feeds in your application. Start up the recording stream. On your test Computer B, connect with the application and start recording the stream. This time, enter the name of Computer A into the streamToPlay_txt box. You will immediately be connected with the live stream (see Figure 7.20)!

Figure 7.20. The final project displaying a publish stream and a live stream from another computer.

That's the end of this exercise. Be sure to review what is happening in the App Inspector. You will notice two streams being used for each user playing and recording. This example clearly demonstrates how you can channel multiple NetStream instances within a single NetConnection.