Comment faire des captures d'écran d'un FlexSpark VideoDisplay?

Question

Je veux construire un composant, où l'utilisateur peut lire une vidéo dans un FlexSpark VideoDisplay. Il y aura un bouton et chaque fois que le bouton est pressé, je veux enregistrer l'heure actuelle du VideoDisplay plus une capture d'écran. La capture d'écran doit être en quelque sorte enregistrée, car je veux afficher tous les temps et toutes les captures d'écran dans un DataGrid (les captures d'écran doivent apparaître lorsque l'utilisateur passe une heure dans le DataGrid). Alors, comment puis-je prendre des captures d'écran du Spark VideoDisplay et les sauvegarder/les afficher?

Answer 1

Vous pouvez prendre des instantanés de plusieurs manières, de cette façon, vous utilisez simplement la classe ImageSnapshot, mais vous pouvez le faire en dessinant manuellement le bitmap de l'affichage vidéo si vous le souhaitez. Voici un exemple:

Renderer

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="100" height="100" creationComplete="trace(data)"> 

    <mx:Image source="{this.data}" width="100%" height="100%"/> 

</s:ItemRenderer> 

App échantillon

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
     <![CDATA[ 

      import mx.graphics.ImageSnapshot; 

      public function takeSnapshot():void 
      { 
       var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay); 
       var bitmap:Bitmap = new Bitmap(snapshot); 
       list.dataProvider.addItem(bitmap); 
      } 
     ]]> 
    </fx:Script> 

    <s:layout> 
     <s:VerticalLayout horizontalAlign="center"/> 
    </s:layout> 

    <s:VideoDisplay id="videoDisplay" 
     source="video.mov" 
     width="400" height="300"/> 

    <s:Button id="button" click="takeSnapshot()"/> 

    <s:List id="list" horizontalCenter="0" width="100%" itemRenderer="SnapshotRenderer"> 
     <s:dataProvider> 
      <mx:ArrayList/> 
     </s:dataProvider> 
     <s:layout> 
      <s:TileLayout/> 
     </s:layout> 
    </s:List> 
</s:Application> 

Pour accomplir exactement ce que vous décriviez (prendre un instantané et enregistrer instantané), vous pouvez stocker ces données dans un tableau dans cette méthode takeSnapshot, ou vous pouvez faire une boucle à travers le list.dataProvider obtenir les bitmaps. Ensuite, il suffit de les passer à un langage backend (ruby, python, php ...) pour sauvegarder.

espoir qui aide, Lance

Answer 2

utiliser le JPEGEncoder flex pour le convertir en ByteArray, puis coder le tableau d'octets en utilisant le b64encoder comme suit:

var jpg:JPEGEncoder = new JPEGEncoder(); 
var ba:ByteArray = jpg.encode(bitmapData);   

var b64encoder:Base64Encoder = new Base64Encoder(); 
b64encoder.encodeBytes(ba); 
var b64String:String = b64encoder.flush(); 

Maintenant, vous pouvez passer votre b64String à votre serveur via la méthode de publication HTTP :)