Code!

Brightcove Videos in Second Life

Bob de Wit — Mon, 01 Mar 2010 05:57:49 +0000

The new Second Life Viewer 2 Beta finally allows integrating Flash-based apps onto Second Life prims (SL lingo for 3D primitives, such as cubes, etc) as textures through a feature called Media Sharing (nothing to do with Brightcove Enterprise Edition Media Sharing).

The nice thing about this is that every visitor will be able to stream individual videos, as opposed to the version 1 viewer that could only set a QuickTime Progressive Download url for all residents in a Second Life location.

Here’s a sample prim I’ve made in a sandbox that has been textured with the Sony MyPlay syndicated player and some navigation prims that would make sense in a 3D environment.

Using Adobe Speech Search Cue Points in a Brightcove Player

Bob de Wit — Tue, 02 Feb 2010 16:35:29 +0000

Adobe Speech Search is a function available in Adobe Premiere and SoundBooth CS4 that allows you to automatically transcribe spoken text in a video clip. In the screen shot above, you can see the metadata text transcription window on the right of the video loaded into Premiere.

The metadata can be incorporated into the video file as cue points, or can be exported to an XML file. The latter gives us some interesting possibilities for playback and navigation within a Brightcove Player.

You can extract the cue point information from an F4V or FLV created with Premiere by using SoundBooth or your own extraction tool based on the Flash media API. If you use SoundBooth, the extracted XML format looks something like this:

> 
 >44619> 
 >event> 
 >house>
 >
  >
   >source>
   >transcription>
  >
  >
   >duration>
   >409>
  >
  >
   >confidence>
   >36>
  >
 >
> 
>

Once we know this, it is easy to build a simple search and index plugin for BEML:

Sample code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="412" backgroundColor="0xFFFFFF" xmlns:local="*">
 
	<mx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
 
		import mx.controls.Alert;
		import flash.display.Stage;
		import com.brightcove.api.*;
		import com.brightcove.api.components.*;
		import com.brightcove.api.dtos.*;
		import com.brightcove.api.events.*;
		import com.brightcove.api.modules.*;
		import com.brightcove.api.search.*;
		import com.brightcove.api.utils.*;
 
		[Bindable]
		private var Results:ArrayCollection = new ArrayCollection();		
 
		private var Speech:XML;
 
		//Speech XML URL Root
		private var SpeechURL:String = "http://active6.com/blog/code/beml_speech/xml/"; 
 
		//Placeholder for BC Player Reference		
		private var Wrapper:BrightcoveModuleWrapper = null;
 
		//Placeholder for VideoPlayer Reference 
		private var VideoPlayer:VideoPlayerModule = null;
 
		//Placeholder for Experience Reference
		private var Experience:ExperienceModule = null;
 
		public function  setInterface(player:IEventDispatcher):void 
		{
			//Save the passed BC player Object reference
			Wrapper = new BrightcoveModuleWrapper(player); 
			Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
 
		  	if (Experience == null) 
		  	{ 
		    	Wrapper.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded); 
		    	Wrapper.loadModules(); 
		  	} 
		  	else 
		  	{ 
		     	checkReady();
		    } 
		 } 
 
		private function onModulesLoaded(event:ExperienceEvent):void 
		{ 
			  Wrapper.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded); 
			  Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule; 
			  if (Experience != null) 
			  { 
			    checkReady(); 
			  }			   
		}		 
 
		private function checkReady():void 
		{ 
  			if (Experience.getReady()) 
  			{ 
    			InitApp(); 
  			} 
  			else 
  			{ 
    			Experience.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady); 
  			} 
		}
 
		private function onTemplateReady(event:ExperienceEvent):void 
		{ 
  			Experience.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady); 
  			InitApp(); 
		}		
 
		private function InitApp():void
		{	
			VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
			VideoPlayer.addEventListener(MediaEvent.CHANGE, onMediaChange)	
			GetSpeechFile();										
		}
 
		private function onMediaChange(evt:Object):void
		{
			GetSpeechFile();							
		}
 
		private function GetSpeechFile():void
		{
	      	try
	      	{
				var video:Object = VideoPlayer.getCurrentVideo();
 
				var request:URLRequest = new URLRequest(SpeechURL + video.id + ".xml");
		      	request.method = URLRequestMethod.GET;
 
		       	var loader:URLLoader = new URLLoader();
		      	loader.dataFormat = URLLoaderDataFormat.TEXT;
		      	loader.addEventListener(Event.COMPLETE, handleResults);
		      	loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
	      		loader.load(request);
	      	}
	      	catch( e:Error)
	      	{
 
	      	}	      						
		}
 
		private function handleResults(evt:Event):void 
		{					 
			var response:String = evt.target.data as String;
			Speech = new XML(response);
		}
 
		private function ioErrorHandler(evt:Event ):void
		{
 
		}		
 
		private function SearchClick():void
		{
			Results.removeAll();
 
			for each( var cuepoint:XML in Speech.CuePoint )
			{
				if( cuepoint.Name == SpeechSearch.text )
				{
					var o:Object = new Object();
					o.Time = cuepoint.Time;
					o.Label = SpeechSearch.text + " : Time Index " + cuepoint.Time;
					Results.addItem(o);
				} 
 
			}
		}	
 
		private function SkipClick():void
		{
			var o:Object = ResultList.selectedItem;
			var index:Number = new Number(o.Time)/1000;
			Status.text = "Skipping to index " + index.toString();
			VideoPlayer.seek(index);
		}			
 
		]]>
	mx:Script>
	<mx:VBox x="0" y="0" width="100%" height="100%">
		<mx:HBox width="100%" height="26" verticalAlign="middle">
			<mx:Label text="Search"/>
			<mx:TextInput width="100%" id="SpeechSearch" text="house" backgroundColor="#D6D6D6"/>
			<mx:Button label="Go" width="49" id="ButtonSearch" click="SearchClick()"/>
		mx:HBox>
		<mx:List dataProvider="{Results}" id="ResultList" labelField="Label" borderStyle="none" click="SkipClick()" width="100%" height="100%">mx:List>
		<mx:Label id="Status" text="Search a term and click in the results" />
	mx:VBox>
 
 
mx:Application>

Test BC/WP Plugin

Bob de Wit — Thu, 28 Jan 2010 15:35:13 +0000

Creating a Visible Brightcove Plugin

Bob de Wit — Tue, 26 Jan 2010 15:57:33 +0000

The easiest way for a user to install a Brightcove plugin is through the player property window in Brightcove studio in stead of having to create a BEML templatethat loads the external swf. By default, this plugin interface is intended for invisible add-ons, such as an analytics connector. However, it is possible to surface plugins added in this way by getting a reference to the player’s Stage.

This article provides a sample player with a visible plugin added in this way as well as some sample code.

This player receives the plugin that is configured in the screen shot above:

There are some considerations for the developer: adding visible plugins in this way will not give you the automatic positioning offered through BEML, but getting the player’s dimensions from the Stage reference should give you enough leverage to work around that.

Here is the full code for the plugin:

 
package {	
	import com.brightcove.api.APIModules;
	import com.brightcove.api.CustomModule;
	import com.brightcove.api.modules.ContentModule;
	import com.brightcove.api.modules.ExperienceModule;
	import com.brightcove.api.modules.VideoPlayerModule;
 
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.net.*;
	import flash.text.TextField;	
 
	public class VisiblePlugin extends CustomModule
	{
 
		//------------------------------------------------------------------
		// Statics and variables
		//------------------------------------------------------------------		
 
		// Reference to the videoPlayerModule and experience module.  
		internal var _videoPlayerModule:VideoPlayerModule = null;
		internal var _experienceModule:ExperienceModule = null;
		internal var _contentModule:ContentModule = null;
 
 
		public function VisiblePlugin()
		{   
 
		}
 
      	override protected function initialize():void 
      	{
      		player.loadModules(); 
      		_experienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
	        _videoPlayerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
	        _contentModule = player.getModule(APIModules.CONTENT) as ContentModule;
 
	        var stage:Stage = _experienceModule.getStage();
	        var textLabel:TextField = new TextField()
 
	        stage.addChild( textLabel);
	        textLabel.text = "Added to Stage";
            textLabel.textColor = 0xFFFFFF;            			
            textLabel.x = 10;
            textLabel.y = 5;
            textLabel.selectable = false;	        
			textLabel.visible = true;			
      	}	
 	}			
}

BEML Slow-Motion Control

Bob de Wit — Tue, 01 Dec 2009 15:04:32 +0000

The example above shows a slow-motion control incorporated into a Brightcove Player using BEML. The full code is listed below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" showEffect="{FadeIn}" layout="absolute" backgroundColor="#888888" backgroundAlpha="0" backgroundGradientAlphas="[0, 0]" backgroundGradientColors="[#000000, #000000]" width="110" height="24" xmlns:local="*">
 
	<mx:Script>
		[CDATA[
 
		import mx.controls.Alert;
	    import flash.utils.Timer;
    	import flash.events.TimerEvent;		
		import flash.display.Stage;
		import com.brightcove.api.*;
		import com.brightcove.api.components.*;
		import com.brightcove.api.dtos.*;
		import com.brightcove.api.events.*;
		import com.brightcove.api.modules.*;
		import com.brightcove.api.search.*;
		import com.brightcove.api.utils.*;
 
		private var timer:Timer = new Timer(10);
 
		//Placeholder for BC Player Reference		
		private var Wrapper:BrightcoveModuleWrapper = null;
 
		//Placeholder for VideoPlayer Reference 
		private var VideoPlayer:VideoPlayerModule = null;
 
		//Placeholder for Experience Reference
		private var Experience:ExperienceModule = null;
 
		private var isFullScreen:Boolean = false; 
 
		public function  setInterface(player:IEventDispatcher):void 
		{
			//Save the passed BC player Object reference
			Wrapper = new BrightcoveModuleWrapper(player); 
			Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
 
		  	if (Experience == null) 
		  	{ 
		    	Wrapper.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded); 
		    	Wrapper.loadModules(); 
		  	} 
		  	else 
		  	{ 
		     	checkReady();
		    } 
		 } 
 
		private function onModulesLoaded(event:ExperienceEvent):void  
		{ 
			  Wrapper.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded); 
			  Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule; 
			  if (Experience != null) 
			  { 
			    checkReady(); 
			  }			   
		}		 
 
		private function checkReady():void 
		{ 
  			if (Experience.getReady()) 
  			{ 
    			InitApp(); 
  			} 
  			else 
  			{ 
    			Experience.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady); 
  			} 
		}
 
		private function onTemplateReady(event:ExperienceEvent):void 
		{ 
  			Experience.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady); 
  			InitApp(); 
		}		
 
		private function InitApp():void
		{	
			timer.addEventListener(TimerEvent.TIMER, onTimer);
 
			VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
 
			//Add a listener for full screen switching
			Experience.addEventListener(ExperienceEvent.ENTER_FULLSCREEN, onEnterFullScreen);
			Experience.addEventListener(ExperienceEvent.EXIT_FULLSCREEN, onExitFullScreen);
 
			//Add a listener for a video being loaded
			VideoPlayer.addEventListener(MediaEvent.PROGRESS, onMediaProgress);	
			VideoPlayer.addEventListener(MediaEvent.CHANGE, onMediaChange)	
 
		}
 
		private function onEnterFullScreen(evt:Object):void
		{
			isFullScreen = true;
		}
 
		private function onExitFullScreen(evt:Object):void 
		{
			isFullScreen = false;
		}		
 
		private function onMediaChange(evt:Object):void
		{
 
		}
 
		private function onSlomoChange():void
		{
			if( slomo.value > 0 )
			{
				VideoPlayer.setVolume(0);
			}
			else
			{
				VideoPlayer.setVolume(1);
			}			
		}		
 
		//Handler for videoLoad events from the content module
		private function onMediaProgress(evt:MediaEvent):void 
		{
			var time : Number = evt.position;
			if( slomo.value > 0 )
			{
				timer.delay = slomo.value;
				VideoPlayer.pause(true);				
				timer.start();
			}		 
		}
 
		private function onTimer(e:Event):void
		{
			timer.stop();
			VideoPlayer.pause(false);
		}
 
		private function onMouseOver():void
		{
 
		}	
 
		private function onPlayClick():void
		{
			if( ! VideoPlayer.isPlaying() )
			{
				VideoPlayer.play();
 
			}
			else
			{
				VideoPlayer.pause(true);
			}
		}	
 
 
		]]>
	mx:Script>
 
	<mx:Fade id="FadeIn" alphaFrom="0" alphaTo="1" duration="500"/>	
 
	<mx:Canvas width="100%" height="100%" cornerRadius="8" borderStyle="solid" backgroundColor="#474747">
		<mx:HSlider x="25" y="1" minimum="0" maximum="100" width="80" id="slomo" change="onSlomoChange()"/>
		<mx:Label x="6" y="3" text=">" color="#FFFFFF" fontWeight="bold" id="PlayButton" fontSize="12" click="onPlayClick()"/>		
	mx:Canvas>
 
mx:Application>

Multilingual Subtitling Using BEML & External Subtitle Files

Bob de Wit — Tue, 01 Dec 2009 14:08:02 +0000

In some cases, you may need to display subtitles in more than one language, or in different notations – but not necessarily for the entire video. The music video above illustrates this case: it sometimes has three subtitle text channels: Japanese Kanji, Romaji Transcription, and an English translation, but some of the song’s lines are only in English. In such situations, I believe it’s more efficient to use time codes and external subtitle text files than cue points, and to “compose” a joint subtitle text file server-side.

This BEML player uses a plugin that checks for external .srt file(s) for a video being loaded. As the .srt is a format that can be extracted from DVDs easily, it requires very little configuration other than a base URL and a file naming convention for the subtitles to be pulled in.

To show the per-video dynamic subtitle loading, I’ve also provided subtitles for the “Puffy – Dareka Ga” listed in related videos for this player.

Calling JavaScript from a BEML Plugin

Bob de Wit — Mon, 26 Oct 2009 16:49:35 +0000

This article will show you how to call an external JavaScript function from a BEML plugin loaded into a Brightcove player.

There are two parts to making this work: first, we need to create a BEML plugin, I’ve done this in Flex, and provided the framework for you to integrate any business logic you may want to trigger the JavaScript call by getting the references to the Brightcove Player.

The main things to include to call external JavaScript are:

import flash.external.*;

and the bridge to the external JavaScript:

private function onClick():void
{
	var javascriptFunction:String = "showAlert";
	var message:String = "Hello From BEML!";
	if(ExternalInterface.available)
	{
		ExternalInterface.call(javascriptFunction, message);
	}
}

Second, we need to add a JavaScript function for the plugin to call to the embedding HTML page, something like:

<script type="text/javascript">script>

The full code contains a skeleton for handling loading and setting up the plugin correctly in a Brightcove player:

 
		[CDATA[
 
		import mx.controls.Alert;
		import flash.display.Stage;
		import flash.external.*;
		import com.brightcove.api.*;
		import com.brightcove.api.components.*;
		import com.brightcove.api.dtos.*;
		import com.brightcove.api.events.*;
		import com.brightcove.api.modules.*;
		import com.brightcove.api.search.*;
		import com.brightcove.api.utils.*;
 
		//Placeholder for BC Player Reference
		private var Wrapper:BrightcoveModuleWrapper = null;
 
		//Placeholder for VideoPlayer Reference
		private var VideoPlayer:VideoPlayerModule = null;
 
		//Placeholder for Experience Reference
		private var Experience:ExperienceModule = null;
 
		public function  setInterface(player:IEventDispatcher):void
		{
			//Save the passed BC player Object reference
			Wrapper = new BrightcoveModuleWrapper(player);
			Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
 
		  	if (Experience == null)
		  	{
		    	Wrapper.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
		    	Wrapper.loadModules();
		  	}
		  	else
		  	{
		     	checkReady();
		    }
		 } 
 
		private function onModulesLoaded(event:ExperienceEvent):void
		{
			  Wrapper.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
			  Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
			  if (Experience != null)
			  {
			    checkReady();
			  }
		}		 
 
		private function checkReady():void
		{
  			if (Experience.getReady())
  			{
    			InitApp();
  			}
  			else
  			{
    			Experience.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
  			}
		}
 
		private function onTemplateReady(event:ExperienceEvent):void
		{
  			Experience.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
  			InitApp();
		}		
 
		private function InitApp():void
		{
			VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
		}
 
		private function onClick():void
		{
			var javascriptFunction:String = "showAlert";
			var message:String = "Hello From BEML!";
 
			if(ExternalInterface.available)
			{
				ExternalInterface.call(javascriptFunction, message);
			}
		}
 
		]]>

The Adobe Stratus Beta Sample App and PHP/MySQL

Bob de Wit — Fri, 03 Apr 2009 04:23:26 +0000

There is a new ActionScript 3.0 API in Flash Player 10 to support RTMFP, allowing for some really exciting stuff with regard to C2C (Client-To-Client) communications between Flex apps. This requires you to set up an account and a callback URL with the Adobe Stratus beta. There’s a really cool Stratus sample application on Adobe Labs, unfortunately the callback script syntax and responses are not described in much detail. This article attempts to reconstruct this and provide some PHP/MySQL code to work with Stratus.

Introduction

Flash Player 10 and Adobe AIR 1.5 introduce a new communications protocol called the Real-Time Media Flow Protocol (RTMFP). The most important features of RTMFP include low latency, end-to-end peering capability, security and scalability. These properties make RTMFP especially well suited for developing real-time collaboration applications by not only providing superior user experience but also reducing cost for operators.

In order to use RTMFP, Flash Player endpoints must connect to an RTMFP-capable server, such as the Adobe Stratus service. Stratus is a beta, hosted rendezvous service that aids establishing communications between Flash Player endpoints. Unlike Flash Media Server, Stratus does not support media relay, shared objects, scripting, etc. So by using Stratus, you can only develop applications where Flash Player endpoints are directly communicating with each other.

Connecting to the Stratus service and creating end-to-end media streams are analogous to working with Flash Media Server. Please note that you must use ActionScript 3.0 with either Flash Professional CS4 or Flex Builder 3 targeting Flash Player 10 or AIR 1.5.

For details, check these resources:

Adobe Labs Stratus Home Page

Stratus service for developing end-to-end applications using RTMFP in Flash Player

Stratus Sample Application

Please read these carefully as I’m not going to repeat what’s described there.

The Callback Script

The python callback script (reg.cgi) included with the sample source is a bit cryptic:

So let’s see if we can make a better documented PHP/MySQL equivalent of this.

The Database

I’ve created a database in MySQL using the following script:

CREATE TABLE IF NOT EXISTS `registrations` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT,
  `appid` BIGINT(20) NOT NULL DEFAULT '0',
  `username` VARCHAR(60) NOT NULL DEFAULT '',
  `identity` VARCHAR(120) NOT NULL DEFAULT '',
  `updated` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`),
  KEY `updated` (`updated`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

The appid field is not really required, I plan to use it to distinghuish between connects from various apps.

Callback Scenarios

So far I’ve found three callback scenarios:

The user connects
The user disconnects
The user calls another user (by passing the username)

The user connects

The REST-based call Stratus will make to your callback URL looks like this:

http://your.domain/reg.php?username=foo&identity=1234

Stratus expects you to return a simple XML document:

  >
    >true>
  >

where updated is true or false depending on whether the database was updated.

The user disconnects

Exactly the same REST call as for a connect, except that the identity value will be ZERO.

The user calls another user

The REST-based call Stratus will make to your callback URL looks like this:

http://your.domain/reg.php?friends=foo

Stratus expects you to return a simple XML document:

  >
    >
      >foo>
      >1234>
    >
  >

PHP Code

I’m using a fairly straightforward Database abstraction class here. There’s also a simple LogFile() function in the code that dumps the entire callback request to a text file. Zipped code with my database class and XML templates is here.

//****************************************************************************
// Database Configuration
//****************************************************************************
require_once('Database.php');
define('DB_HOST', 'localhost');
define('DB_USER', 'stratus');
define('DB_PW', '******');
define('DB_DBNAME', 'db_stratus');
 
//****************************************************************************
// Validation of script call
//****************************************************************************
 
//Log the entire request into a log file for easy inspection
LogFile($_REQUEST);
 
//Check if the request contains a value for "friends" or for "username/identity"
$valid = false;
 
if( isset( $_REQUEST['friends'] ))
{
  $valid = true;
  ProcessFriendRequest();      
}
 
if( (isset($_REQUEST['username']) && (isset($_REQUEST['identity'])) ))
{
  $valid = true;
  ProcessRegistration();  
}
 
if(! $valid )
{  
  ProcessError();
}
 
//****************************************************************************
// Process a friend request
//****************************************************************************
function ProcessFriendRequest()
{
  $db = new Database();
  $query = sprintf("SELECT id, appid, username, identity, updated FROM registrations WHERE username='%s'",
    mysql_real_escape_string($_REQUEST['friends']));
  LogFile($query);
 
  $result = $db->GetObject($query);
 
  if(! $result)
  {
    $update = 'false'; 
    $reply = file_get_contents('update.xml');
    $reply = str_replace('$update', $update, $reply);  
    echo $reply;    
  }
  else
  {  
    //Get the XML Response Template file and format it 
    $reply = file_get_contents('friends.xml');
    $reply = str_replace('$user', $result->username, $reply);
    $reply = str_replace('$identity', $result->identity, $reply);
    LogFile($reply);
    echo $reply;
  }      
}
 
//****************************************************************************
// Process a registration (identity will be 0 when disconnecting)
//****************************************************************************
function ProcessRegistration()
{
  $db = new Database();  
  $query = sprintf("SELECT id, appid, username, identity, updated FROM registrations WHERE username='%s'",
    mysql_real_escape_string($_REQUEST['username']));
 
  LogFile($query); 
  $result = $db->GetObject($query);
 
  if(! $result)
  {
    //Record does not exist yet
    $update = "true";
    $sql = sprintf("INSERT INTO registrations (appid, username, identity, updated) VALUES ( 0, '%s', '%s', NOW())",
      mysql_real_escape_string($_REQUEST['username']),
      mysql_real_escape_string($_REQUEST['identity']));
    $db->execute($sql);  
    LogFile($sql);    
  }
  else
  {
    //Record already exists
    $update = "true";
    $sql = sprintf("UPDATE registrations SET updated = NOW(), identity = '%s' WHERE username = '%s'",
      mysql_real_escape_string($_REQUEST['identity']),
      mysql_real_escape_string($_REQUEST['username']));
    $db->execute($sql); 
    LogFile($sql);         
  }
 
  //Get the XML Response Template file and format it 
  $reply = file_get_contents('update.xml');
  $reply = str_replace('$update', $update, $reply);  
  LogFile($reply);
  echo $reply;    
}
 
//****************************************************************************
// Process an error
//****************************************************************************
function ProcessError()
{
  $update = 'false'; 
  $reply = file_get_contents('update.xml');
  $reply = str_replace('$update', $update, $reply); 
  LogFile($reply); 
  echo $reply;    
}
 
//****************************************************************************
// Log File function
//****************************************************************************
function LogFile($msg)
{
  $smsg = print_r($msg, true);
  $time = date("F jS Y, h:iA"); 
  $ip = $REMOTE_ADDR; 
  $referer = $HTTP_REFERER; 
  $browser = $HTTP_USER_AGENT;   
  $fp = fopen("log.txt", "a");   
  fputs($fp, "Time: $time IP: $ipReferer: $referer Browser: $browser | $smsg");   
  fclose($fp);   
}

Using Secured SWFs as BEML Widgets

Bob de Wit — Wed, 01 Apr 2009 13:17:34 +0000

This article describes how you can use SWF files as widgets in BEML that have been protected by utilities that prevent decompilation. Before we start, just a couple of things I’d like to point out:

This article is NOT a review of the effectiveness of SWF Protection tools, there are plenty of (endless) discussions on that topic on specialized forums.
This approach is NOT my recommended one for creating User Generated Content upload widgets. I still believe using a secured mid-tier upload server is a better model. Event with a protected SWF, a proxy tool like Charles or WireShark will give a hacker all the information he needs to get your token if you do not protect your sensitive Widget/Server communications.

Why would you do this?

The short answer is that the SWF format is a pseudo-compiled, documented file format. This implies that it is relatively easy to reverse engineer a SWF file. Just Google “swf decompilers” and look at the results. There are literally dozens of tools that allow anyone to retrieve the complete source code of a SWF. Regarding BEML Widgets, this may pose some security threats if for example you want to:

Create a video upload widget that uploads straight into your Brightcove account. Again, SWF protection by itself is NOT the approach I would recommend, as this requires including/sending a Write Token to use the Media API in your SWF.
Create a widget that interfaces with your backend and that contains configuration information you want to give some level of protection
Create a widget that represents a considerable investment or effort, and by consequence you want to protect from being duplicated

to name but a few.

How does it work?

There are mainly two kinds of SWF protection mechanisms: encryption and obfuscation. The better protection tools apply both mechanisms.

Encryption makes code completely unreadable, but requires to keep the decryption-key with the encrypted data. So, an automated tool could be created to decrypt the code, leaving the fully unencrypted, unobfuscated code in plain view.

Obfuscation is the concealment of the code’s meaning, making it confusing and harder to understand. It’s not encryption, but in the context of code, it might be better.

Note that not even the combo of encrypt+obfuscate is 100 percent waterproof. The goal is to make the process of reverse engineering extremely time consuming and painful so that it is not worth the effort.

The Widget Code

The widget we’ll use in this example is a simple Flex AS3 application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  backgroundColor="#000000" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]">
 
	<mx:Script>
		[CDATA[
 
		//Placeholder for BC Player Reference		
		private var BCPlayer: Object = null;
 
		//Placeholder for VideoPlayer Reference
		private var VideoPlayer: Object = null;
 
		public function  setInterface(player:Object):void 
		{
			//Save the passed BC player Object reference
			BCPlayer = player;
 
			//Retrieve the VideoPlayer Module references
			VideoPlayer = BCPlayer.getModule("videoPlayer");
 
			//Add a listener for a video being loaded
			VideoPlayer.addEventListener ("streamStart", streamStart);	
 
		}
 
		private function ShowWidget(showIt:Boolean):void
		{
			//If widget is to be shown, go to player view mode
			if(showIt)
			{
				VideoPlayer.goFullScreen(false);
			}
			this.visible = showIt;  
			VideoPlayer.setVisible(!showIt);			
		}
 
		//Handler for videoLoad events from the content module
		private function streamStart(evt:Object):void 
		{
			ShowWidget(true);
		}
 
		private function ContinueVideo():void
		{
			ShowWidget(false);
		}		
 
		]]>
	mx:Script>
 
 
	<mx:VBox width="400" height="180" horizontalCenter="0" verticalCenter="0" horizontalAlign="center">
		<mx:Label color="#FFFFFF" id="SecureMessage" text="This widget shows how to integrate a secured SWF widget in BEML" height="46"/>
		<mx:Button label="Continue" id="ContinueButton" click="ContinueVideo()"/>
	mx:VBox>
 
mx:Application>

The BEML Code

The BEML with the widget plugged in looks is as simple as it gets:

>
  >
     id="videoPlayer" width="100%" height="100%" x="0" y="0" depth="2" visible="true"/>
     id="Secure" width="100%" height="100%" x="0" y="0" source="http://active6.com/blog/code/secure/secure_BEMLSecureSWF.swf" depth="1" visible="true"/>
  >
>

Building a Secured SWF from your AS3 code

To make a secured version of your BEML widget, you will need a protection tool. For this article, I’ve used KindiSoft’s SecureSWF, as it has an evaluation version that is not limited in time or number of uses and allowed for easy highlighting of the minor tweakings you will need to do to get a protected SWF working as a BEML widget.

Download and install a demo version of this tool. Run it, and add your SWF file to the empty Project:

If you like, click “Protect SWF Files” and try running this BEML player with a protected version of your SWF, but it won’t work. You will see your browser making the load request, but the widget will not manifest. What’s going on here?

This tool uses the encrypt+obfuscate tandem mentioned earlier. This means that the original variable, component and function names no longer exists in the obfuscated ActionScript. The Brightcove Player you are pluggin this widget into tries to call the setInterface() function, but it has been obfuscated. So your secured widget is loaded, but it is not passed a reference to the player correctly.

Defining Identifier Renaming Exceptions

What we need to do is exclude the functions that the Brightcove Player needs from being obfuscated. To do this, select the Identifiers Renaming tab in the tool, and select your SWF in the treeview displayed on this page. Then uncheck the setInterface() and streamStart() functions. Now protect your SWF file again and try loading it into a player. It should work now.

I’ve deliberately taken an example where the widget is adding some listeners, in this case for the VideoPlayer.streamStart event. As you can see, this implies that the exceptions you need to define will vary from widget to widget. Basically, everything that adds a listener function must have the same name as the one you specify in the the event listener registration.

I’ve also found that in most cases you will need to disable the Additional renaming options (rename protected namespaces, remove function parameters) for a Widget to be manifested properly with a reference to the player.

Acid Pong!

Bob de Wit — Mon, 30 Mar 2009 15:08:06 +0000

Had a little fun with this over the weekend. In another life I used my Amiga to superimpose Pong on MTV. Well, no need for that anymore in the 21st Century. This is the way Pong should be played. Gratz to anyone who can beat the computer while the Stakker video is playing!

WARNING: This WILL fry your brain…do not play this if you have epilepsy.