Embed Nimbb in an Adobe Air application

The Nimbb Player can be easily embedded into a Adobe Air desktop application. An Air application is a stand-alone software that can run on Windows and Mac operating systems. For more information on using Adobe Air, see this page.

Adding Nimbb into your Air application allows you to record and playback videos directly from your application, instead of using a Web browser. To embed Nimbb, you simply use the <mx:HTML> component of Air and you need to link it to a webpage on your site that will include the Nimbb Player. You can also interact with the Nimbb Player using its methods and events. The following screenshot show an example of embedding Nimbb into an Adobe Air application to allow webcam video recording. Below, you can see the Flex ActionScript 3 code and the HTML code required to create this example.

This example requires you to specify your developer key (see tutorial).

Example

Nimbb Player embedded into an Adobe Air application:

Adobe Air (Flex ActionScript3 code)

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="360" height="410"
   title="Air application">

  <mx:Script>
  <![CDATA[

    private var _Nimbb:Object;
    private var _Guid:String;
			
    private function browser_Completed():void
    {
      // Get reference to Nimbb object.
      _Nimbb = browser.htmlLoader.window.document.getElementById("nimbb");
		    	
      // Prepare listeners to trap Nimbb events.
      _Nimbb.addEventListener("Nimbb_recordingStarted", Nimbb_recordingStarted);
      _Nimbb.addEventListener("Nimbb_recordingStopped", Nimbb_recordingStopped);
      _Nimbb.addEventListener("Nimbb_stateChanged", Nimbb_stateChanged);
      _Nimbb.addEventListener("Nimbb_videoSaved", Nimbb_videoSaved);
    }

    private function Nimbb_recordingStarted(object:Object):void
    {
      trace("Nimbb_recordingStarted");
    }
		    
    private function Nimbb_recordingStopped(object:Object):void
    {
      trace("Nimbb_recordingStopped");
    }
		    
    private function Nimbb_stateChanged(object:Object):void
    {
      // Check the current state of Nimbb.
      if( object.param.toString() == "ready" )
      {
        button.enabled = true;
      }
      else
      {
        button.enabled = false;
      }
    }
		    
    private function Nimbb_videoSaved(object:Object):void
    {
      // The video was saved, get the GUID.
      _Guid = _Nimbb.getGuid();

      // Update interface.
      guidText.text = _Guid;
    }
			
    private function button_Record():void
    {
      // Call the recording method of the Nimbb Player.
      _Nimbb.recordVideo();
    }
			
  ]]>
  </mx:Script>

  <mx:Panel x="10" y="10" width="340" height="280" layout="absolute" title="Nimbb Player">
    <mx:HTML id="browser" x="0" y="0" width="320" height="240" location="source.html"
      complete="browser_Completed()" />
  </mx:Panel>
	
  <mx:Panel x="10" y="298" width="340" height="80" layout="absolute" title="Actions">
    <mx:Button id="button" x="10" y="10" label="Record" width="115" height="20"
      click="button_Record()" />
    <mx:Label x="142" y="12" text="GUID:" fontWeight="bold"/>
    <mx:TextInput id="guidText" x="190" y="10" width="118"/>
  </mx:Panel>
	
</mx:WindowedApplication>

HTML code

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--

// Global variable to hold player's reference.
var _Nimbb;
	
// Event: Nimbb Player has been initialized and is ready.
function Nimbb_initCompleted(idPlayer)
{
  // Get a reference to the player since it was successfully created.
  _Nimbb = document[idPlayer];
}
	
// Event: the player has started recording.
function Nimbb_recordingStarted(idPlayer)
{
  GenerateEvent("Nimbb_recordingStarted");
}
	
// Event: the player has stopped recording.
function Nimbb_recordingStopped(idPlayer)
{
  GenerateEvent("Nimbb_recordingStopped");
}
	
// Event: the state of the player changed.
function Nimbb_stateChanged(idPlayer, state)
{
  GenerateEvent("Nimbb_stateChanged", state);
}
	
// Event: the video was saved.
function Nimbb_videoSaved(idPlayer)
{
  GenerateEvent("Nimbb_videoSaved");
}
		
// Function to generate an event to send back to the Air app.
function GenerateEvent(name, param)
{
  var event = document.createEvent('Event');
  event.initEvent(name,true,true);
  event.param = param;
  _Nimbb.dispatchEvent(event);
}

// -->
</script>


</head>
<body style="overflow:hidden;">
<object id="nimbb" name="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="http://player.nimbb.com/nimbb.swf?mode=record&key=XXXXXXXXXX&lang=en&simplepage=1" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="opaque" />
</object>
</body>
</html>

To try this code, create a new Desktop application (Adobe AIR) using the Adobe Flash Builder and paste it. Also create a file source.html and copy the HTML content into it. Make sure to copy the HTML file on your Web server and update the ActionScript code and replace the location property of the browser component with the URL to your HTML file. To fully enable Nimbb with your active subscription, make sure that your site URL is defined into your Developer Settings.

If you are using Adobe Flash Builder 4 and higher, make sure that you edit the Properties of your project, then go to "Flex Compiler" and enable "Use Flex 3 compatibility mode". If you are using Adobe Flex Builder 3, you do not need to change any settings.

Development tip: if you want to make it easier to write your HTML code, you can add the file source.html into your SRC folder of your Air application and simply change the browser.location to that file. Nimbb will then be in developer mode, but you will be able to test it faster. Once you are done, simply copy the HTML file to your website and update the browser.location with the URL.

To embed Nimbb into the Air application, we use the <mx:HTML> component. We provide to it the HTML code that embed Nimbb and also include event handling. By using a function GenerateEvent() in HTML, we are able to trap those events from the ActionScript code. If you need more events, you can simply add them in the HTML code and call the GenerateEvent() function. In the ActionScript code, we use addEventListener() to trap those event.

Also, notice the button that calls the button_Record() function once clicked. This demonstrate that you are also able to call methods of the Nimbb player from the ActionScript code.

So as you can see, you can interact with Nimbb using methods and events from your Air application. This opens a lot of possibilities for adding webcam recording and video playback to your Windows or Mac software.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.