Quick Tip: OSMF VideoPlayer Screenshot

Your video is usualy resized and played in a custom sized rectangle, but if you need to capture the fullscreen screenshot you may be tempted to gather the original size screenshot by resizing the whole component or its part. Its not the best practice, while you need to resize and move back and forth the component etc. Here is a quick tip to make a fullsize screenshot from spark osmf based VideoPlayer using Matrix.

<?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 spark.components.VideoDisplay;
            private function capture():void
            {
                var videoDisplay:VideoDisplay = video.videoDisplay;
                var videoObject:Video = videoDisplay.videoObject;
                var bitmapData:BitmapData = new BitmapData(videoObject.videoWidth, videoObject.videoHeight, true, 0x000000);
                var matrix:Matrix = videoObject.transform.matrix.clone();
                matrix.scale(videoObject.videoWidth / videoObject.width, videoObject.videoHeight / videoObject.height);
                matrix.tx = 0;
                matrix.ty = 0;
                bitmapData.draw(videoObject, matrix);
                image.source = new Bitmap(bitmapData);
            }
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    
    <s:VideoPlayer id="video" source="video.flv" autoPlay="false" width="300" height="200"/>
    <s:Button label="capture" click="capture()"/>
    <mx:Image id="image"/>
</s:Application>

Remember, you need a correct crossdomain policy to access video bitmapData.

Leave a comment

Please be polite and on topic. Your e-mail will never be published.