5 Replies Latest reply on Nov 29, 2011 10:55 PM by Flex harUI

    CAPTURE A VIDEO THUMBNAIL

    William Spence Level 1

      Hi all.  I am writing an Air application.  Users will be able to import videos into the application, but to save on memory for certain parts of the application, it is required of me to convert these videos into thumbnail .jpgs first and to only display the thumbnails in a tilelist.  These thumbnails must therefore be generated dynamically during runtime.  So my question is, how can I convert a video into a thumbnail.  So far, I have tried two different methods.  I have used the ImageSnapshot Class which I got to work, but ONLY if I added the video to the display list first which is not an option.  So then I tried to draw the bitmapdata using the BitmapData class and ran into the same problem.  It would only work if I added the video to the display list first.  Does anyone know how I can get the bitmapdata out of a frame of video without adding the video to the screen first?  Here is the code I am using right now, it writes the final .jpg to your desktop as test.jpg and only works with .mp4 videos.  If you take out the line that says this.AddElement(vd), it no longer works:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication 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;
                                    import mx.graphics.codec.JPEGEncoder;
        
                                    import spark.components.VideoDisplay;
                                    import spark.primitives.BitmapImage;
                                    private const acceptableTypes:FileFilter = new FileFilter("Media", "*.mp4");
                                    private var vd:VideoDisplay;
        
                                    protected function importVideo(event:MouseEvent):void
                                    {
                                              var file:File = File.userDirectory;
                                              file.addEventListener(Event.SELECT, mediaSelectHandler);
                                              file.browseForOpen("Select File To Import", [acceptableTypes]);
                                    }
        
                                    private function mediaSelectHandler(event:Event):void {
                                              vd = new VideoDisplay();
                                              vd.autoPlay = false;
                                              vd.horizontalCenter = 0;
                                              vd.verticalCenter = 0;
                                              vd.source = event.currentTarget.nativePath;
                                              this.addElement(vd);
                                    }
        
                                    private function getSnapShot(event:MouseEvent):void{
                                              var bd:BitmapData = new BitmapData(vd.width, vd.height);
                                              var matrix:Matrix = new Matrix();
                                              bd.draw(vd, matrix);
        
                                              //save to hard drive
                                              var file:File = File.desktopDirectory;
                                              var imgfile:File = file.resolvePath("test.jpg");
                                              var jpegEncoder:JPEGEncoder = new JPEGEncoder(90);
                                              var jpegStream:ByteArray = jpegEncoder.encode(bd);
                                              var filestream:FileStream = new FileStream();
                                              filestream.open(imgfile, FileMode.WRITE);
                                              filestream.writeBytes(jpegStream, 0, jpegStream.length);
                                              filestream.close();
                                    }
                          ]]>
                </fx:Script>
        
                <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
                <s:HGroup width="500" height="40" horizontalCenter="0" bottom="50">
                          <s:Button width="100" height="28" label="IMPORT" click="importVideo(event)"/>
                          <s:Button width="100" height="28" label="SNAPSHOT" click="getSnapShot(event)"/>
                </s:HGroup>
      </s:WindowedApplication>
      
      
        • 1. Re: CAPTURE A VIDEO THUMBNAIL
          William Spence Level 1

          Any thoughts on this?

          • 2. Re: CAPTURE A VIDEO THUMBNAIL
            William Spence Level 1

            Guys, I am really stuck and you are some of the most brilliant Flex developers I have come accross on the web.  If a user imports a video from their computer to an Air app, does anyone know if it is possible to get a .jpg thumbnail from a video without adding the video to the display list first?  I can get it to work if I add it to the display list first, and even if I add it to the display list off the stage somewhere, but that seems like a "clunky" solution if there is another option available.

            • 3. Re: CAPTURE A VIDEO THUMBNAIL
              Flex harUI Adobe Employee

              I don’t know much about video, but I would use the low-level Flash video class to create the thumbnail.  The Flex component will not finish initializing until added to the display list.

              • 4. Re: CAPTURE A VIDEO THUMBNAIL
                William Spence Level 1

                I tried to capture a video thumbnail again, this time using the flash.media.Video class.  This is a much more complicated setup in that you cant just create a source, you have to make netConnections and netStreams and listen for a myriad of events before image capture, but I really liked the smoothing option that it has.  Anyway, to make a long story short, once again I was able to capture a thumbnail as desired, but once I didn't add it to the display list, it no longer worked.  I don't think that it is possible to capute a thumbnail of a video without adding it to the display list in Flex.  I think that this is definitely a feature that should be added, especially for Air.  What if you wanted to make a simple media player for the desktop where people could import a list of their own videos into the application?  It would be so much easier and efficient if your tilelist was populated with small generated thumbnails rather than enormous video files. Do you have some kind of a link to a place where you can make suggestions to the Flex Team or requests for certain features?

                • 5. Re: CAPTURE A VIDEO THUMBNAIL
                  Flex harUI Adobe Employee

                  Flash Player bugs and requests go here: https://bugbase.adobe.com/