Log in Register

Login to your account

Username *
Password *
Remember Me

Create an account

Fields marked with an asterisk (*) are required.
Name *
Username *
Password *
Verify password *
Email *
Verify email *
Captcha *

 

 

 

Index


Downloading the package
Content of the package
Setting variables passed via php
Understanding the embed code
Supported flashvars
Changing Layouts
P2P Broadcasting
Application events
Quality Presets
Javascript API
CMS integration

 


 

 

 

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.

 

Downloading the package

First and foremost you need to download the WMLE package from our downloads section:

http://rtmpworld.com/downloads/commercial-product-downloads

*You may download the Personal Edition or the Standard Edition as per your needs.

 

Content of the package

After you download and extract the archive file you will have a folder structure similar to the following:

 

Top Level

  • captured/
  • flashservices/
    • Services/
      • FXBroadcaster.php
    • includes
    • Plugins
    • Core
    • ClassLoader.php
    • index.php
  • images/
  • js/
  • swf/
  • config.php
  • functions.php
  • index.php
  • style.css

 

The folder "flashservices" is the amfphp installation which connects your swf to php via the service file FXBroadcaster.php located at:

flashservices/

  • Services/
    • FXBroadcaster.php

 

All the settings are defined in this file which can be edited in any plain text editor. The next section explains all the configuration variables available for you to modify.


 

Settings passed in via AMFPHP service file (FXBroadcaster.php)

Variable Name Type Sample Default value Description
         
licencekey String YOUR-LICENCE-KEY NULL Your product license key
publishName String livestream NULL Stream Name
destination String rtmp://server/appname/instance NULL

RTMP/RTMPT/RTMPS/RTMFP url for publishing

broadcastTime Integer 500 0 Broadcast duration limit in seconds. (set 0 for unlimited)
bwcheck Boolean NA NA NA
server String NA NA NA
broadcastMode String duplex duplex Encoder operation mode : (audio/video/duplex)
logo String path/to/mycompanylogo.png NULL URL of logo image in jpg, gif or png format . (35 x 100)
autoSnapInterval Integer 15 0

WMLE auto snaps webcam image in specified seconds. This can be used to show preview of broadcast in webpage

playback String rtmp://server/appname/instance/livestream NULL RTMP/RTMPT/RTMPS/RTMFP url for playback
enableAutoSense Boolean NA NA NA
enablePreview Boolean true or false false Specifies whether to show plackback preview for the broadcast stream
forceQuality String SD SIF LOW NA Preset name representing a preset from presets file
disableInteraction Boolean true or false false Locks out user from making any manual changes in quality settings
autoStart Boolean true or false false Specifies whether to auto start broadcasting. Broadcast will autoStart once device(s) have been acquired.
userPresets String Preset configuration in xml string format null User defined preset configurations. (encoderpresets.xml)

 

Usage in php service file - FXBroadcaster.php

{codecitation class="brush: javascript;wrap-lines: false;"}

$settings["variablename"] = value

{/codecitation}

 

Sample settings

{codecitation class="brush: php;wrap-lines: false;"}

$settings["licencekey"] = "YOUR-LICENSE-CODE";
$settings["publishName"] = "test";
$settings["destination"] = "rtmp://myhost/appname;
$settings["playback"] = $settings["destination"];
$settings["autoSnapInterval"] = 0;
$settings["bwcheck"] = false;
$settings["logo"] = "http://mywebsite.com/logo.png";
$settings["enablePreview"] = true;
$settings["disableInteraction"] = true;
$settings["autoStart"] = false;
$settings["bwStrict"] = false;
$settings["userPresets"] = file_get_contents("encoderpresets.xml");

return $settings;

{/codecitation}


 

Understanding the Embed Code

 

Static Embedding example:

{codecitation class="brush: html;wrap-lines: false;"}

<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="650" height="520" id="broadcaster" name="broadcaster">
<param name="movie" value="swf/FXBroadcaster.swf" />
<param name="wmode" value="direct" />
<param name="allowscriptaccess" value="always" />
<param name="base" value="http://yourdomain/swf/" />
<param name="flashvars" value="themeColor=cccccc&amp;chromeColor=990000&amp;contentBackgroundColor=000000&amp;textColor=ffffff" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/FXBroadcaster.swf" width="650" height="520">
<param name="wmode" value="direct" />
<param name="allowscriptaccess" value="always" />
<param name="base" value="http://yourdomain/swf/" />
<param name="flashvars" value="themeColor=cccccc&amp;chromeColor=990000&amp;contentBackgroundColor=000000&amp;textColor=ffffff" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

{/codecitation}

 

Dynamic Embedding Example (uses swfobject):

{codecitation class="brush: html;wrap-lines: false;"}

<script type="text/javascript" src="/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.themeColor = "cccccc";
flashvars.chromeColor = "990000";
flashvars.contentBackgroundColor = "000000";
flashvars.textColor = "ffffff";
var params = {};
params.wmode = "direct";
params.allowscriptaccess = "always";
params.base = "http://yourdomain/swf/";
var attributes = {};
attributes.id = "broadcaster";
attributes.name = "broadcaster";
swfobject.embedSWF("swf/FXBroadcaster.swf", "myAlternativeContent", "650", "520", "11.2.0", "playerProductInstall", flashvars, params, attributes);
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>

{/codecitation}

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, adobe rfecommends "direct" mode

allowscriptaccess: Enable all communications with javascript from any domain

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

Variable Name Variable Value
   
serviceLocation Path to your amfphp installation (Not required if amfphp is installed at root by default foldername) **
scriptLocation Path to simple php script for loading settings into application***
themeColor RGB code for application theme color (ie. 000000)
chromeColor RGB code for components (buttons, dropdown etc) chrome color (ie. 000000)
contentBackgroundColor RGB code for components (textfield, combobox etc) background color (ie. 000000)
textColor RGB code for text color of your application (applies to labels and text)

 

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

*** scriptLocation and serviceLocation are mutually exclusive. for platforms other than php you can use scriptLocation to provide your aps/jsp script name to load settinsg variables from.

 

{codecitation class="brush: javascript; gutter: true;"}

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

{/codecitation}

or

{codecitation class="brush: javascript; gutter: true;"}

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

{/codecitation}

 


 

Application Events & Callback Parameters

Event Name Callback parmeters
   
SESSIONSAVESUCCESS Stream Name, Duration
SESSIONSAVEFAILED Stream Name, Duration
CAMERAINITIALIZE Camera name
CONNECTSUCCESS NULL
CONNECTFAILED NULL
MICROPHONEINITIALIZE Microphone name
BROADCASTBEGIN Stream Name
BROADCASTEND Stream Name

 

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:

{codecitation class="brush: javascript;wrap-lines: false;"}

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

}

{/codecitation}

 

 


Javascript API

 

As of version 1.4 we have provided users with a rich set of javascript API, which lets you embed the recorder swf as a dynamic and flexible swf, setting up to any dimension that you need. You can build your own controlbar by using ordinary HTML/CSS knowledge and control the swf with that.

 

The Javascript API functions

 

Function Parameters Description
startBroadcast NA Start broadcsting if not already broadasting
stopBroadcast NA Stop broadcsting if already broadasting

 

Example of using javascript API:

 

Step 1: Embed the encoder in your page

{codecitation class="brush: html;wrap-lines: false;"}

<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="650" height="520" id="broadcaster" name="broadcaster">
<param name="movie" value="swf/FXBroadcaster.swf" />
<param name="wmode" value="direct" />
<param name="allowscriptaccess" value="always" />
<param name="base" value="http://yourdomain/swf/" />
<param name="flashvars" value="themeColor=cccccc&amp;chromeColor=990000&amp;contentBackgroundColor=000000&amp;textColor=ffffff" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/FXBroadcaster.swf" width="650" height="520">
<param name="wmode" value="direct" />
<param name="allowscriptaccess" value="always" />
<param name="base" value="http://yourdomain/swf/" />
<param name="flashvars" value="themeColor=cccccc&amp;chromeColor=990000&amp;contentBackgroundColor=000000&amp;textColor=ffffff" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

{/codecitation}

 

Step 2: Set up global function onBroadcasterReady in the head tag to capture the flash object element

{codecitation class="brush: javascript;wrap-lines: false;"}

<script type="text/javascript">

function onBroadcasterReady(objid)
{
var broadcaster = swfobject.getObjectById("broadcaster"); // broadcaster is the id/name of the flash object
broadcaster.addNotificationListener("BROADCASTBEGIN","onBroadcastStarted");
broadcaster.addNotificationListener("BROADCASTEND","onBroadcastClosed");
}

 

function onBroadcastStarted(objid,params){

// Broadcast start callback handler

}

 

function onBroadcastClosed(objid,params){

// Broadcast stop callback handler

}

 

function startBroadcast(){

broadcaster.startBroadcast();

}

 

function stopBroadcast(){

broadcaster.stopBroadcast();

}

</script>

{/codecitation}


Changing Layouts

WMLE now provides two distinct layouts for greater flexibility. You can Choose to use the standard layout or a simple (single video window) layout.

 

To switch to simple layout :

1. Rename the file Core2.swf loctaed at swf/modules/Core2.swf to Core.swf. Make sure to take a backup of the original Core.swf before that.

2. You can also rename the file Controlbar.swf to Controlbar_none.swf. This will remove the controlbar completely. You can then set autoStart variable to true from back-end script to start broadcasting as soon as user allows microphone/camera access.

 

Standard Layout (Image):

Simple Layout (Image):

 


Quality Presets

 

User Defined Presets

 

You can define your own set of presets, in case you are not happy with the built-in presets. A sample of user defines presets file is provided in the package as encoderpresets.xml located at flashservices/encoderpresets.xml.

 

Below is a sample of the xml structure used to contain user defined presets (WMLE uses SD presets only) :

{codecitation class="brush: xml,;wrap-lines: false;"}

<?xml version="1.0" encoding="utf-8"?>
<presets>
<sd>
<preset>
<label>SD AVERAGE</label>
<width>120</width>
<height>90</height>
<fps>10</fps>
<keyframeInterval>30</keyframeInterval>
<quality>90</quality>
<bandwidth>18000</bandwidth>
<videocodec>Sorenson</videocodec>
<audiocodec>Speex</audiocodec>
<samplerate>16</samplerate>
<speexquality>4</speexquality>
</preset>

<preset>
<label>SD GOOD</label>
<width>160</width>
<height>120</height>
<fps>10</fps>
<keyframeInterval>25</keyframeInterval>
<quality>90</quality>
<bandwidth>25000</bandwidth>
<videocodec>Sorenson</videocodec>
<audiocodec>Speex</audiocodec>
<samplerate>16</samplerate>
<speexquality>5</speexquality>
</preset>

</sd>

<hd>

<preset>
<label>HD SIF GOOD</label>
<width>320</width>
<height>240</height>
<fps>15</fps>
<keyframeInterval>90</keyframeInterval>
<quality>90</quality>
<bandwidth>43750</bandwidth>
<videocodec>H264Avc</videocodec>
<h264profile>baseline</h264profile>
<h264level>3.1</h264level>
<audiocodec>Speex</audiocodec>
<samplerate>16</samplerate>
<speexquality>6</speexquality>
</preset>

<preset>
<label>HD SIF LOW</label>
<width>320</width>
<height>240</height>
<fps>12</fps>
<keyframeInterval>105</keyframeInterval>
<quality>90</quality>
<bandwidth>37500</bandwidth>
<videocodec>H264Avc</videocodec>
<h264profile>baseline</h264profile>
<h264level>3.1</h264level>
<audiocodec>Speex</audiocodec>
<samplerate>16</samplerate>
<speexquality>6</speexquality>
</preset>

</hd>
</presets>

{/codecitation}

 

Built in Presets

Resolution Label Resolution Width Resolution Height
     
LOW 120 90
AVERAGE 140 105
GOOD 160 120
HIGH 176 144
BEST 240 160
HQVGA 240 160
SDLOW_SIF 320 240
SDMEDIUM_SIF 320 240
SDMEDIUM_CIF_SIF 352 288
SDHIGH_SIF 320 240
SDHIGH_CIF_SIF 352 288

 

Possible values for videocodec : H264Avc or Sorenson

Possible values for audiocodec : Speex or Nellymoser

Note: When user defined presets are not provided, system defined presets take over automatically.


Integrating WMLE With CMS

 

There are 2 ways to integrate WMLE into your cms api.

1. Using regular script of your choice of language and configuring WMLE with flashvars scriptLocation to point to your script. ie: scriptLocation=mysettingsloader.php

2. Using amfphp gateway to tie up the application service to your CMS using flashvars -  serviceLocation to point to your amfphp gateway.

Continue to Amfphp - cms integration guide for example.


P2P Support ( HOT! )

 

Visit following link for P2P multicasting setup guide.

http://rtmpworld.com/support/documentations/41-p2p-setup-guide