Insérer Nimbb dans une application Adobe Air

Le Nimbb Player peut être facilement intégré dans une application de bureau Adobe Air. Une application AIR est un logiciel autonome qui peut fonctionner sur les systèmes d’exploitation Windows et Mac. Pour plus d'informations sur l'utilisation d'Adobe Air, voir cette page.

Ajouter Nimbb dans votre application Air vous permet d'enregistrer et de lire des vidéos directement à partir de votre application, au lieu d'utiliser un navigateur Web. Pour intégrer Nimbb, vous utilisez simplement le composant<mx:HTML> de Air et vous devez le lier à une page Web sur votre site, qui comprendra le lecteur Nimbb. Vous pouvez également interagir avec Nimbb en utilisant ses méthodes et événements. La capture d'écran suivante montre un exemple d'intégration de Nimbb dans une application Adobe Air pour permettre l'enregistrement vidéo par webcam. Ci-dessous, vous pouvez voir le code Flex ActionScript 3 et le code HTML nécessaire pour créer cet exemple.

Cet exemple nécessite que vous indiquiez votre clé de développeur (voir le tutoriel).

Exemple

Nimbb Player intégré dans une application Adobe Air :

Adobe Air (code Flex ActionScript3)

<?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
    {
      // Obtenir une référence à l'objet Nimbb.
      _Nimbb = browser.htmlLoader.window.document.getElementById("nimbb");
		    	
      // Préparer pour interecepter les événements Nimbb.
      _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
    {
      // Vérifier l'état actuel de Nimbb.
      if( object.param.toString() == "ready" )
      {
        button.enabled = true;
      }
      else
      {
        button.enabled = false;
      }
    }
		    
    private function Nimbb_videoSaved(object:Object):void
    {
      // La vidéo est sauvée, obtenir le GUID.
      _Guid = _Nimbb.getGuid();

      // Mettre à jour l'interface.
      guidText.text = _Guid;
    }
			
    private function button_Record():void
    {
      // Appeler la méthode d'enregistrement du 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>

Code HTML

<html>
<head>

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

// Variable globale contenant une référence au lecteur.
var _Nimbb;
	
// Événement : le Nimbb Player a été initialisé et est prêt.
function Nimbb_initCompleted(idPlayer)
{
  // Obtenir une référence au lecteur puisqu'il a été créé.
  _Nimbb = document[idPlayer];
}
	
// Événement : le lecteur a démarré l'enregistrement.
function Nimbb_recordingStarted(idPlayer)
{
  GenerateEvent("Nimbb_recordingStarted");
}
	
// Événement : le lecteur a arrêté l'enregistrement.
function Nimbb_recordingStopped(idPlayer)
{
  GenerateEvent("Nimbb_recordingStopped");
}
	
// Événement : le statut du lecteur a changé.
function Nimbb_stateChanged(idPlayer, state)
{
  GenerateEvent("Nimbb_stateChanged", state);
}
	
// Événement : la vidéo a été enregistrée.
function Nimbb_videoSaved(idPlayer)
{
  GenerateEvent("Nimbb_videoSaved");
}
		
// Fonction pour générer un événement à envoyer à l'application Air.
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=fr&simplepage=1" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="opaque" />
</object>
</body>
</html>

Pour tester ce code, créez une application de bureau (Adobe AIR) en utilisant le Adobe Flash Builder et collez-le. Créez également un fichier source.html et copiez le contenu HTML. Assurez-vous de copier le fichier HTML sur votre serveur Web et mettre à jour le code ActionScript pour remplacer la propriété location du composant browser avec l'URL vers votre fichier HTML. Pour activer complètement Nimbb avec votre abonnement actif, assurez-vous que l'URL de votre site est défini dans vos Paramètres de développeur.

Si vous utilisez Adobe Flash Builder 4 et plus, assurez-vous que vous modifiez les propriétés de votre projet, puis choisissez "Flex Compiler" et cochez "Use Flex 3 compatibility mode". Si vous utilisez Adobe Flex Builder 3, vous n'avez pas besoin de modifier de paramètre.

Astuce de développement : si vous voulez écrire votre code HTML plus facilement, vous pouvez ajouter le fichier source.html dans le dossier SRC de votre application Air et simplement modifier le browser.location pour ce fichier. Nimbb sera alors en mode de développeur, mais vous serez en mesure de le tester rapidement. Une fois que vous avez terminé, il suffit de copier le fichier HTML sur votre site et mettre à jour le browser.location avec l'URL.

Pour intégrer Nimbb dans l'application Air, nous utilisons le composant <mx:HTML>. Nous lui fournissons le code HTML qui intègre Nimbb et comprend également la gestion des événements. En utilisant une fonction GenerateEvent() en HTML, nous sommes capables d'intercepter ces événements à partir du code ActionScript. Si vous avez besoin de plus d'événements, vous pouvez simplement les ajouter dans le code HTML et appeler la fonction GenerateEvent(). Dans le code ActionScript, nous utilisons la méthode addEventListener() pour intercepter ces événements.

Remarquez le bouton qui appelle la fonction button_Record() une fois cliqué. Ceci démontre que vous êtes aussi capable d'appeler des méthodes du Nimbb Player à partir du code ActionScript.

Donc, comme vous pouvez le voir, vous pouvez interagir avec Nimbb en utilisant des méthodes et des événements à partir de votre application Air. Cela permet beaucoup de possibilités pour l'ajout de l'enregistrement par webcam et la lecture vidéo à votre logiciel Windows ou Mac.

Voir d'autres tutoriels.

Consultez notre Guide du développeur pour commencer avec Nimbb.