SFS2X Docs / ExamplesFlash / redbox

» RedBox audio/video streaming examples collection

The RedBox is a free add-on for SmartFoxServer 2X that adds audio and video streaming capabilities to the server, making it possible to integrate such features in any existing ActionScript3 application.

The RedBox package contains the four examples described below: they demonstrate all the features made available by the RedBox to create video chats, video conferences and more. For complete informations on the RedBox, its setup and how to run the examples, please refer to the dedicated documentation.

>> DOWNLOAD the RedBox package <<

Go to the examples overview:

• Video Chat
• Video Messenger
• Video Clip Player
• Video Conference

NOTE
The RedBox examples make use of some of the SmartFoxBits user interface components. Please read the corresponding paragraph in the introduction to the ActionScript 3 examples for more informations.

» Video Chat overview

The Video Chat example takes a slightly modified version of the Simple Chat example and enhances it with private messaging and live audio/video streaming through a dedicated tabbed panel.

The core of the one-to-one video streaming is the AVChatManager class from the RedBox API. In conjuction with the RedBox Extension, this class handles a typical video chat workflow (send request, accept or refuse it, start or stop a/v connection, etc) and the live streaming from/to the Red5 server.

The AVChatManager class supports three live streming modes: receive-only, send-only and send-and-receive. In send-only and receive-only modes, the a/v chat requests are distinct: a user can watch a friend without sending his own stream, and vice versa (just like in Windows Live Messenger, when you click the webcam icons near the users' pictures). In send-and-receive mode, a single request causes both the user's own stream to be sent and the friend's stream to be received.

This example showcases the send-and-receive mode implementing the following workflow; for the other modes the flow is the same, but two separate requests are needed.

1. After the private chat is started, the user can click on the Start button to send the a/v chat request to the user he is chatting with.
2. An invitation is sent to the recipient by means of the AVChatManager.sendChatRequest method; of course the recipient must be connected to SmartFoxServer 2X (but not necessarily in the same Room of the requester), otherwise the RedBoxChatEvent.RECIPIENT_MISSING event is fired on the requester's client.
3. On the recipient's client the RedBoxChatEvent.CHAT_REQUEST event is fired: an invitation to send and receive the a/v stream is displayed, together with the buttons to accept or decline it.
   If the recipient refuses the invitation, the AVChatManager.refuseChatRequest method is called, which causes the RedBoxChatEvent.CHAT_REFUSED event to be fired on the requester's client and the interface to be adjusted accordingly.
4. The recipient accepts the invitation: the AVChatManager.acceptChatRequest method is called, which causes the RedBoxChatEvent.CHAT_STARTED event to be fired on both the requester's and the recipient's clients.
   
5. On both clients two Video objects are displayed in the chat tab to show the incoming stream and the user's own camera output.
6. When one of the two users involved in the chat clicks on the Stop button, the AVChatManager.stopChat method is called and the RedBoxChatEvent.CHAT_STOPPED event is fired on the connected clients, so that the Video objects can be removed.

» Video Messenger overview

The Video Messenger example takes a simplified version of the Buddy Messenger example and enhances it with live audio/video streaming and floating private chat panels.

As it regards the a/v features, this example uses the same AVChatManager class of the Video Chat one described above, but instead of the send-and-receive live streaming mode, it implements the receive-only and send-only modes. This means that each user can send his own camera stream independently from the other user.

The workflow implemented in the example is the same of the previous example (except two requests must be sent instead of one), so please read the previous overview.

» Video Clip Player overview

The Video Clip Player example demonstrates how to build a live shared library of videos, providing tools for easily retrieving the list of available clips and assigning extra custom properties to each video clip. Additionally, the application allows to record a clip from the webcam and save it on the server together with its custom properties.

The core of this example is the usage of the AVClipManager class from the RedBox API. In conjuction with the RedBox Extension, this class allows the playback of audio/video clips hosted on the server (for example movie trailers, video interviews, lessons, video messages, etc) and the recording of live broadcasts.
Each clip can be described by a number of custom parameters that are saved on the file system together with the clip's FLV file.

The first accordion's panel in the VideoClip manager section of the application is dedicated to the videos playback. The list of available clips is returned by the server's Extension and it is displayed in the grid. When the user clicks on an item, a video player handles the incoming stream. In particular, the following workflow is implemented.

1. The user logs in and joins a lobby Room; the list of available clips is requested using the AVClipManager.getClipList method, which in turn calls the RedBox Extension.
   Calling this method also enables the reception of the RedBoxClipEvent.CLIP_ADDED, RedBoxClipEvent.CLIP_DELETED and RedBoxClipEvent.CLIP_UPDATED events which respectively notify the user that a new clip has been added or removed from the clips list, or that the properties of a clip have been updated.
2. The clips list is received by means of the RedBoxClipEvent.CLIP_LIST event: the clips, together with their properties (in this case title and author, but more could be added) are listed in the dedicated datagrid.
3. When the user selects a clip, a NetStream object is requested by means of the AVClipManager.getStream method and the playback is started using the clip's id with the NetStream's play method (a UI component with advanced seek/volume controls is be used to display the streaming clip).

Additionally, the user who originally submitted the clip is also allowed to update its custom properties, causing the RedBoxClipEvent.CLIP_UPDATED event to be fired.

The second accordion's panel is dedicated to showcasing the video recording feature of the AVClipManager class. A video message is recorded, previewed and finally submitted together with some additional properties. The following workflow is implemented.

1. After logging-in and joining the lobby Room, the user opens the Recording panel which displays the required controls to start/stop recording, preview the recorded clip and submit it or cancel the process; a form to collect the clip properties (title and author) is also available.
2. The user clicks on the Record button: the AVClipManager.startClipRecording method is invoked and a unique clip id is requested to the RedBox Extension.
3. When the RedBoxClipEvent.CLIP_RECORDING_STARTED event is fired in response, the camera/microphone output is attached to an outgoing stream which is recorded on the file system by the Red5 server. The Video object on the stage shows the user's own camera output.
4. The user clicks on the Stop button: the AVClipManager.stopClipRecording method is called and the outgoing stream is closed. The flv file on the server is now just temporary: if the user disconnects from SmartFoxServer or the AVClipManager.cancelClipRecording method is called, the file is removed from the file system.
5. The user clicks on the Preview button: the AVClipManager.previewRecordedClip method is called and a playing NetStream object is returned. The stream is attached to the Video object on the stage to display it.
   
6. The user clicks on the Submit button: the collected custom properties are passed to the AVClipManager.submitRecordedClip method and saved on the server's file system together with the clip's flv file. On the server side the clip is added to the list of available clips, causing the datagrid on the Playback panel of the application to be refreshed.

» Video Conference overview

The Video Conference example shows how to create a video conference application, ideal for collaborative environments.

This example leverages the features of the AVCastManager class of the RedBox API, which is responsible for managing audio/video live casts inside the SmartFoxServer Room joined by the user, making it possible to create live web events or a/v conferences.
Unlike the other main RedBox classes, the AVCastManager works on a Room basis to take advantage of the access control and moderation features of SmartFoxServer.

In this example, each user publishes his own live stream and subscribes the streams coming from the other users in the same Room. The following workflow is implemented.

1. The user joins the room where the video conference takes place.
2. The list of currently available streams (or "live casts") is retrieved by means of the AVCastManager.getAvailableCasts method (in case the conference is already in progress).
   Calling this method also enables the reception of the RedBoxCastEvent.LIVE_CAST_PUBLISHED and RedBoxCastEvent.LIVE_CAST_UNPUBLISHED events which notify if another user started or stopped his own stream respectively.
3. Each live cast is subscribed by means of the AVCastManager.subscribeLiveCast method and a Video object is displayedin the main panel to attach the stream to.
4. When a live cast is published (a new user joins the conference) or stopped (a user leaves the conference – see below), a notification is received by means of the events mentioned above: the stream is subscribed / unsubscribed and displayed on / removed from the stage.
   
5. The a/v stream of the current user is published using the AVCastManager.publishLiveCast method and an additional Video object showing his own camera stream is added to the stage; when the user publishes his own stream, the other users receive the mentioned events.
6. To make the user leave the conference and stop the a/v stream, the AVCastManager.unpublishLiveCast method is called. Also changing Roomor disconnecting from the server cause the user to leave the conference and the other users to be notified.

Other than the video conference application type showcased by this example, the AVCastManager class can be useful to create live webcast applications, in which a single user publishes his own live stream and all the other users in the same room subscribe it.

» More resources

You can learn more about the RedBox by consulting the following resources:

• The RedBox 2X

(c) 2004-2024 gotoAndPlay() — All rights reserved — www.smartfoxserver.com