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

 


Welcome to WMLE-HD set up guide !!

 

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.

Information provided in this document also applies to Web Media Live Encoder Personal Edition with the exception of Available resolutions and presets for HD broadcasting.

 

Downloading the package

First and foremost you need to download the WMLE HD 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/
      • HDBroadcaster.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 HDBroadcster.php located at:

flashservices/

  • Services/
    • HDBroadcaster.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 (HDBroadcaster.php)

Variable Name Value Type Default Description
       
licencekey YOUR-LICENCE-KEY   Your product license
publishName demo NULL Stream Name
destination rtmp://server/appname/instance NULL

RTMP/RTMPT/RTMPS/RTMFP url for publishing

broadcastTime 500 0 Broadcast duration limit in seconds. (set 0 for unlimited)
bwcheck NA NA NA
server RED5 RED5 Server Type (RED5/FMS/WOWZA)
broadcastMode duplex duplex audio/video/duplex
debug true false Show debug panel or not (true/false)
logo path/to/mycompanylogo.png NULL path to your logo in gif or png format preferred. (35 x 100) MAX
autoSnapInterval 15 0

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

playback rtmp://server/appname/instance NULL RTMP/RTMPT/RTMPS/RTMFP url for playback
enableAutoSense      
enablePreview true/false false Specifies whether to show plackback preview for the broadcast stream
forceQuality Quality constant from BroadcastQuality Class BroadcastQuality.AVERAGE Preset quality setting selector
disableInteraction true/false false Locks out user from making any manual changes in quality settings
mode Encoding mode from the EncodingMode Class. Possible values are: EncodingMode::SD or EncodingMode::HD EncodingMode::HD Select codec to use for broadcasting. Use EncodingMode::HD to enable H.246 codec on camera

bwStrict

(H264 only)

true/false true Specifies whether stream is allowed to fluctuate bandwidth or strictly follow specified bandwidth
autoStart true/false false Specifies whether to auto start broadcasting. Broadcast will autoStart once device(s) have been acquired.
userPresets Preset configuration in xml format null User defined preset configurations.
publishQueryString query string often supplied with stream name for configuring live stream settings by flash media server null query string to be sent along with stream name to flash media server
metadata

Json formatted string

null

A json string containing metadata as name-pairs

ie: {"date":"11-11-11"}

 

Usage in php service file - HDBroadcaster.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["forceQuality"] = "HD SIF GOOD";
$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/HDBroadcaster.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/HDBroadcaster.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/HDBroadcaster.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 HDBroadcaster.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
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 "flashservices". 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 flashservices 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 flashservices 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 broadcasting if not already broadcasting
stopBroadcast NA Stop broadcasting if already broadcasting
setVolume Number (1 - 100) Sets the volume for speakers (Playback)
getVolume NA Gets the current volume of the speakers
denyMicrophone NA Disallow microphone from participating in broadcast
allowMicrophone NA Allow microphone to participate in broadcast
denyCamera NA Disallow camera from participating in broadcast
allowCamera NA Allow camera from participating in broadcast
setMicGain Number (0 -1 00) Sets the amplification for microphone Defaults to 50  
getMicGain NA Gets the amplification for microphone
     

 

Example of using javascript API usage:

 

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/HDBroadcaster.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/HDBroadcaster.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 HD 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

Chart for SD Encoding

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

 

Chart for HD Encoding

Resolution Label Resolution Width Resolution Height
     
HD_BASIC 160 120
HD_AVERAGE 320 240
HD_GOOD 320 240
HD_HIGH 320 240
HD_TV_SIF_LOW
320 240
HD_TV_CIF_SIF_LOW
352 288
HD_TV_SIF_HIGH
320 240
HD_TV_CIF_SIF_HIGH
352 288
HD_TV_SIF_PAL
320 240
HD_TV_CIF_SIF_PAL
352 288
HD_TV_SIF_NTSC
320 240
HD_TV_CIF_SIF_NTSC
352 288
HD_480P_LOW
640 480
HD_480P_HIGH
640 480
HD_576I_HIGH
720 576

 

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/includes/encoderpresets.xml.

 

Below is a sample of the xml structure used to contain user defined presets (SD and HD) :

{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}

 

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 HD With CMS

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

1. Using regular script of your choice of language and configuring WMLE HD 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