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
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.

 

 

API Demo

{jumi [*4]}

 

 

PhpFreeChat Demo

http://flashvisions.com/osvidchat/

 

 

Downloading the package

First and foremost you need to download the ChatAnywhere 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/
    • core/
    • services/
      • com/
      • ChatBroadcaster.php
      • encoderpresets.xml
    • gateway.php
    • globals.php
    • json.php
    • xmlrpc.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 ChatBroadcster.php located at:

flashservices/

  • services/
    • com/
    • ChatBroadcaster.php
    • encoderpresets.xml

 

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 (ChatBroadcaster.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)
mode duplex NULL audio/video/duplex
logo path/to/mycompanylogo.png NULL path to your logo in gif or png format preferred. (35 x 100) MAX
autoSnapInterval 15 0

auto snap 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
forceQuality Quality constant from BroadcastQuality Class BroadcastQuality.AVERAGE Preset quality setting selector
broadcastMode 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.

 

Usage in php service file - ChatBroadcaster.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"] = "me";
$settings["destination"] = "rtmp://myhost/appname;
$settings["playback"] = "friend";
$settings["autoSnapInterval"] = 0;
$settings["bwcheck"] = false;
$settings["logo"] = "http://mywebsite.com/logo.png";
$settings["forceQuality"] = BroadcastQuality::HD_GOOD;
$settings["disableInteraction"] = true;
$settings["autoStart"] = true;
$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/ChatBroadcaster.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/ChatBroadcaster.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/ChatBroadcaster.swf", "myAlternativeContent", "400", "300", "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 ChatBroadcaster.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 = "liveservices"; // Where liveservices is the name of your amfphp folder installed at root of site

{/codecitation}

or

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

flashvars.serviceLocation = "chatanywhere/liveservices"; // Where liveservices is the name of your amfphp folder installed inside a folder called ChatAnywhere 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
viewStream String (streamname) Attempts to playback the stream name requested
startBroadcast NA Start broadcsting if not already broadasting
stopBroadcast NA Stop broadcsting if already broadasting
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 from participating in broadcast
denyCamera NA Disallow camera from participating in broadcast
allowCamera NA Allow camera from participating in broadcast
toggleView NA Toggle view between broadcast (camera view)and playback (playback view)
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:

 

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/ChatBroadcaster.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/ChatBroadcaster.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();

}

 

funnction viewStream(streamname){

broadcaster.viewStream(streamname);

}

</script>

{/codecitation}


Changing Layouts

 

ChatAnywhere 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 , 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.

 

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
     

 

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
     

 

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 (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.

Note**: ChatAnywhere is limited to a max resolution of 320x240 irrespective of video codec used.


Integrating ChatAnywhere With CMS

 

  • Joomla Integration
1. For Integrating amfphp servicce with joomla your flash services folder must be renamed as "amfphp" and placed at the root of your site. (assuming that joomla is installed at the site root).
ie: /public_html/amfphp
2. Next you must edit the service file :

amfphp/

  • services/
    • com/
    • ChatBroadcaster.php
And place the following code at the starting of the file, after any include statements that you may have. This will help amfphp load and initialize joomla core.

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

define( '_JEXEC', 1 );

define('JPATH_BASE', "../..");

define( 'DS', DIRECTORY_SEPARATOR );

 

require_once (JPATH_BASE . DS . 'includes' . DS . 'defines.php');

require_once (JPATH_BASE . DS . 'includes' . DS . 'framework.php');

{/codecitation}

 

3. Once done you can then place the following code in ChatBroadcaster.php class constructor:

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

function  ChatBroadcaster(){

$mainframe =& JFactory::getApplication('site');

$mainframe->initialise();

}

{/codecitation}

 

This will initialize your website  access to amfphp. You can then start using the usual joomal apis in your service file ChatBroadcaster.php as you normally do.

 

  • Wordpress Integration

 

1. Below is the code for linking to your Wordpress install in a AMFPHP gateway file. This is placed into the AMFPHP Globals.php file. This patches amfphp to be able to load wordpress and initialize it. Although optional, but best is to copy the flashservices folder to site root and rename it to amfphp as with our joomla integration.

 

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

 

/***************************************

***

*** WORDPRESS CONFIGURATION

**

****************************************

 

/**

* Include the WordPress config files

*/

 

//this is required to bootstrap wordpress

$configFile ='../wp-blog-folder-name/wp-load.php';

 

 

//if you want write access you must define this variable here

//set this to false to disable write access to your wordpress install

define("WPWRITEABLE", "true");

 

//then you must link to admin file here

$wpAdminFile = '../wp-blog-folder-name/wp-admin/includes/admin.php';

 

if (!file_exists($configFile))

{

throw new Exception('WordPress wp-load.php file was not found!');

}

else

{

require_once ($configFile);

}

 

//check for existence of admin file and if the writeable constant is true

if (defined('WPWRITEABLE'))

{

if (constant('WPWRITEABLE') == 'true')

{

if(!file_exists($wpAdminFile))

{

throw new Exception('WordPress admin.php file was not found!');

}

else

{

require_once($wpAdminFile);

}

}

}

 

{/codecitation}

 

2. You can now open up your service file, ChatBroadcaster.php and start using wordpress api as you would normally do.