How to embed VideoIO in your Flex/Flash application?

VideoIO Flash-based audio and video communication

Home ›  Flash-VideoIO Tutorial

How to embed VideoIO in your Flex/Flash application?

You can embed VideoIO.swf as a child SWF using SWFLoader in your Flex application using Flex/Flash Builder or Flex SDK. This tutorial assumes that you are familar with Flex Builder integrated development environment (IDE) or know how to use the Flex SDK version 3 or later to build a Flex application. You can see the complete application source code example for Flex Builder 3/SDK 3 or Flash Builder 4/SDK 4.

Starting with version 1.5 of VideoIO, it can detect whether it is being embedded as top-level application from HTML/Javascript or another top-level Flex application. When VideoIO is embedded from HTML/Javascript, it uses the ExternalInterface to communicate with the HTML/Javascript page. When VideoIO is embedded from another Flex/ActionScript application, it uses the regular ActionScript properties, methods and events to communicate with your top-level application.

Whether you embed VideoIO in web page using HTML/JavaScript or within another Flash application using MXML/ActionScript, the VideoIO API is same, i.e., the properties, methods and events are similar. Please see How to embed VideoIO in your web page? to know about default width and height, and controls properties. Please see How to use the VideoIO API? to see a list of available properties, methods and events.

First, you will need to use SWFLoader to load VideoIO.swf as shown below. It shows how to embed child SWF of VideoIO with id video1 and dimension of 320x240. It invokes an ActionScript event handler method completeHandler when the application is initialized.

<mx:SWFLoader id="video1" source="VideoIO.swf" width="320" height="240"
       init="completeHandler(event)"/>

The event handler needs to be defined in the Script part of your MXML application as follows. It creates a newSystemManager for the child application, and another event handler on the SystemManager to handle completion or update of the application. When the application is complete, the application property of the system manager is valid and refers to the child SWF's Application object.

<mx:Script>
  <![CDATA[
    import mx.events.DynamicEvent;
    import mx.events.FlexEvent;
    import mx.core.IUIComponent;
    import mx.managers.SystemManager;

    private var _systemManager1:SystemManager;
    private var _innerApplication1:Object;

    private function completeHandler(event:Event):void 
    {
      _systemManager1 = SystemManager(video1.content);
      _systemManager1.addEventListener(FlexEvent.APPLICATION_COMPLETE, applicationCompleteHandler);
      _systemManager1.addEventListener(FlexEvent.UPDATE_COMPLETE, applicationCompleteHandler);
    }

    private function applicationCompleteHandler(event:Event):void 
    {
      _innerApplication1 = _systemManager.application;
      // now _innerApplication1 represents the Application of VideoIO.swf
    }
  ]]>
</mx:Script>

This application object has all the properties, methods and events that are available in the VideoIO API. Similar to the various callback methods in Javascript that receive events from VideoIO, you can define the event handlers in ActionScript to receive events as shown below. This must be done after the application is complete. As mentioned before, the names and arguments of these callbacks are similar to VideoIO's Javascript API.

<mx:Script>
  <![CDATA[
    ...
    private function applicationCompleteHandler(event:Event):void 
    {
      _innerApplication1 = _systemManager.application;
      _innerApplication1.addEventListener("onPropertyChange", propertyChangeHandler);
      _innerApplication1.addEventListener("onCreationComplete", creationCompleteHandler);
      _innerApplication1.addEventListener("onCallback", callbackHandler);
	  ...
    }
    private function propertyChangeHandler(event:DynamicEvent):void
    {
      // event has property, oldValue, newValue
      trace("onPropertyChange: " + event.property + " " + event.oldValue + "=>" + event.newValue);
    }
    private function creationCompleteHandler(event:Event):void
    {
      // event has nothing
      trace("onCreationComplete");
    }
    private function callbackHandler(event:DynamicEvent):void
    {
      // event has method, args
      trace("onCallback: " + event.method + " " + event.args);
    }
    ...	
  ]]>
</mx:Script>

Similarly you can set the various properties of the VideoIO object using the setProperty method. This must be done after the application is complete. The following example shows how to set the controls and live properties to true to enable local camera view in your application.

<mx:Script>
  <![CDATA[
    ...
    private function applicationCompleteHandler(event:Event):void 
    {
	  ...
      _innerApplication1.setProperty("controls", true);
      _innerApplication1.setProperty("live", true);
    }
    ...	
  ]]>
</mx:Script>

You can set the src and other properties to achieve various use cases such as video chat and message recording and playback as explained in other tutorial pages. Embedding VideoIO in your Flash Builder 4 or SDK 4 application is similar, except with some differences. For example, you will need to set the scaleContent and loadForCompatibilityattributes of SWFLoader, and change the data type of system manager to Object instead of SystemManager to avoid type error #1034.

The complete example MXML application source code is available for Flex Builder 3/SDK 3 and Flash Builder 4/SDK 4. Note that there are some compatibility issues with Flash Builder 4/SDK 4, because VideoIO.swf has been compiled using SDK 3. In particular, the sizes of the buttons and control bars are different when you embed from your application using SDK 4. Secondly, I couldn't yet get the event handlers from VideoIO to work from VideoIO's SDK 3 to your SDK 4 application.