This document is meant to provide you with information to setup Web Media Live Encoder on your own site and help you with with general configuration details of the application.

Basic Setup

Step 1: Unzip the archive downloaded.

Step 2: Edit the service file FXBroadcaster.php, which can be found at the amfphp/services/ folder, in your favorite text editor.

Step 3: Locate the following lines of code and change as necessary

var $key = ""; // This is your licence key
var $capture_directory = "../../path_to_captured/"; // path to your snapshots directory
var $destination = "rtmp://localhost/rtmpapplication"; // rtmp application path
var $server = RED5; // Server type : which can be selected from available types

Server Types:

define("RED5", "red5");
define("FMS", "fms");
define("WOWZA", "wowza");

save the edited information in editor and exit.

Step 4: Copy the amfphp folder to your site/domain. Its preferred that you upload the entire folder to your site root eg: http://www.yourdomain.com/amfphp/ , You may also choose to rename the folder to something else eg: http://www.yourdomain.com/flashservices/

Note: You may also download amfphp from its sourceforge page. In that case make sure you delete the the browser folder -> amfphp/browser and the amfphp folder in services -> services/amfphp for security.

Step 5: On the client side we simply embed the swf in the page that we wish to use the recorder in. To do so the recommended approach is using swfobject. You can read more about swfobject at its google code page. Below is a sample implementation of embedding with swfobject JavaScript.

The following is the basic javascript required to get the recorder running on your page. It contains embedding swf with swfobject, adding event listeners to recorder via javascript and configuring the amfphp path for your recorder. This way of embedding is particularly necessary to get the addListeners methods to register properly.

<script src="/js/swfobject.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
 
function onHTMLDOMReady()
{
var flashvars={};
var params={};
params.base="http://yourdomain/swf/";
params.wmode="opaque";
params.allowscriptaccess="always";
var attributes={};
attributes.id="broadcaster";
attributes.name="broadcaster";
swfobject.embedSWF("http://yourdomain/swf/FXBroadcaster.swf","fxbroadcaster","780","550","10.1.0","expressInstall.swf",flashvars,params,attributes);
}
swfobject.addLoadEvent(onHTMLDOMReady);
</script>

Understanding The Embed Code

flashvars is the object through which a swf receives input from the html page. These inputs are typically application specific variables. In our case we use one variable called gatewayURL. This variable contains the path of amfphp gateway which will be used by the application for all server side communications

params is a object used for providing config information to the flash player.This info is generic to flash player. In our case we provide 3 config infos:

wmode : Tell flash player to use a specified wmode

allowscriptaccess: Enable all communications with javascript

base: Path to your swf folder where FXBroadcaster.swf can be found. This is used to look up the core flex swf libraries when loading for the first time. Once loaded the flex framework is cached to client's flash player (not browser cache). Hence subsequent load times are short.

attributes is used to provide a name to the swf item in the HTML page. this object will contain the swf identification name in two parts: id and name. id corresponds to IE and name corresponds to Netscape type browsers.

After embed is successful using swfobject's embedSWF function the swfs begins loading. Once the swf has completely loaded it triggers the onBroadcasterReady function along with its id/name property. This is where we attach Event handlers to the application so that it can notify its events to the HTML DOM. We will see a list of event notifications that the recorder broadcasts a little later in this article. In the basic embed example we handle the SESSIONSAVESUCCESS and SESSIONSAVEFAILED events.

Supported Flashvars

** By default the name for amfphp folder is "amfphp". If this is not the folder name you want to use, or if you want amfgphp installed inside a sub folder , then you need to use the serviceLocation flashvars as shown below:

flashvars.serviceLocation = "liveservices"; // Where liveservices is your amfphp folder installed at root of site

or

flashvars.serviceLocation = "wmle/liveservices"; // Where liveservices is your amfphp folder installed inside a folder called wmle at your site root.

Application Events & Callback Parameters

Note: To capture a single parameter use: eval(params)[0] and for multiple parameters use eval(params)[0],eval(params)[1],eval(params)[2] etc: The first parameter,objid always refers to the id/name of the swf item invoking the function.

Example:

broadcaster.addNotificationListener("SESSIONSAVESUCCESS","onSaveSuccess");
function onSaveSuccess(objid,params){
var streamname=eval(params)[0];
var duration=eval(params)[1];
// do something when recording was saved successfully
}

Settings Data Passed in via AMFPHP

Usage in php service file - FXBroadcaster.php

$settings["variablename"] = value

Camera Resolution Chart

Skinning - Change the way your application feels !

The flex architecture opens up a whole new world of options for skinning your application. Flex skins work pretty much the same way as css in ordinary html. But unlike the open css document, flex skins are compiled into swfs which can be loaded/unloaded at runtime, thus making your deployment hassle free. You no longer have to store the images used in the flex skin on your server, The single compiled skin swf will contain every graphic asset required by the application.

To use the skinning option, simply use the skin variable in flashvars to pass in the url of your skin swf and wath the magic.

flashvars.skin= "shadow.swf"; // where shadow.swf resides in your swf folder

P2P Support ( HOT! )

WMLE is the only product online today which supports RTMP as well as RTMFP out of the box. RTMFP is a relatively new protocol by adobe's flash player 10 which forms a baseline for p2p communication. Meaning you can broadcast video/audio to clients without the need of any server.

For handshaking although Adobe cirrus rendezvous service may be used. You can get more info on RTMFP and your cirrus key from Adobe's webpage:

http://labs.adobe.com/technologies/cirrus/

Once you have the key, you can follow the steps below to setup p2p streaming using WMLE and our very own free p2p multicast player.

Setting up broadcaster:

1. Get your free Adobe cirrus key from: http://labs.adobe.com/technologies/cirrus/ Your key will look like this: rtmfp://p2p.rtmfp.net/xxxxxxxxxxxxxxxxxxxxxxxxxxx/
2. Next you decide your channel name, which can be a small length alpha numeric string.This can be thought of as a scope. Since we want to be able to broadcast in our own space we need to use a unique channel name.
3. Finally choose your stream name that you want to broadcast. this can again be a simple string.
4. So once you have all the information mentioned above, your broadcast information will look like this:

URL: rtmfp://p2p.rtmfp.net/xxxxxxxxxxxxxxxxxxxxxxxxxxx/channel

Setting up p2p player backend service:

• Download WMLE-P2P patch from our freebies download section
• Extract all the files into your WMLE install location, maintaining the directory structure as shown below:

sampleplayer.php

services/PeerToPeer

services/lib/cryptlib.php

swf/viewer.swf

Edit the file services/PeerToPeer.php and make necessary changes to the section shown below. You can add more streams by duplicating this line and making changes.

"idcode" => array("channel" => "channelname","password" => "somepassword","stream" => "demo","rtmfp" => "rtmfp://p2p.rtmfp.net/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/")

"idcode" => An aphanumeric id code to help retrieve playback details

"channelname" => The channel name. Same as used in WMLE when broadcasting

"password" => protection password (Not required)

"stream" => The stream name as used in WMLE when broadcasting

"rtmfp" => Your RTMFP url

Once the stream setup is complete you need to set the domains that are allowed to read data from this service. This provides greater level of security for your broadcast. To add/remove domains edit the following:

/* An array of html domains */
 var $htmlDomains = array(
 "yoursite.com",
 "wmle.flashvisions.com"
 ); 
 /* An array of swf domains */
 var $swfDomains = array(
 "yoursite.com",
 "wmle.flashvisions.com"
 );

Note: For allowing a domain, it must be added to both html domains and swf domains.

Setting up p2p player frontend:

Edit the file, sampleplayer.php as shown below and set the same idcode that you did in backend service. This helps the player to retrieve the playback details from service by matching the idcode.

flashvars.cid = "idcode";

"idcode" => An aphanumeric id code to help retrieve playback details

Note: The password for encryption is "PASSWORD" by default, and can be changed. To change this you need to make changes in PeerToPeer.php and sampleplayer.php where-ever it occurs.