Introducing FLVSlicer (slicing and merging capabilities) [ by Thibault Imbert ]

Recently I wanted to do some simple video slicing in AS3 with FLV's. I did not found any library for that so here is FLVSlicer !

FLVSlicer allows you to extract a "slice" of an FLV at runtime, but also merge multiple slices if you need to. The library may be really useful if you want to get a specific part from an FLV with no server involved. Ley's say for instance that you are looking for a specific text content in a video and you would like to save it on your hard disk or post it on youtube.

The API is really simple :

//create the FLVSlice object
var slicer:FLVSlicer = new FLVSlicer(new flvBytes());

// listen for the SlicedEvent.COMPLETE event
slicer.addEventListener( SlicedEvent.COMPLETE, onSliced );

// extract the slice with the specific timing (in ms) and save it
var firstSlice:FLVSlice = slicer.slice(1000, 3000);

// extract another slice with the specific timing (in ms) and save it
var secondSlice:FLVSlice = slicer.slice(7200, 8900);

// create a FLVSlice vector
var slices:Vector.<FLVSlice> = new Vector.<FLVSlice>();

// store the slices
slices.push ( firstSlice );
slices.push ( secondSlice );

// merge them as a single FLV stream
var merged:FLVSlice = slicer.merge( slices );

The tricky thing was to update each frame timestamp (NetStream.time) without creating any backward timestamp. Then, the onMetaData duration tag is modified so that the sliced FLV works smoothly in the Flash Player. When calling the slice() method from the FLVSlicer API, it will automatically find the nearest keyframe and cut from there. For the ending point, it will slice it with no nearest keyframe behavior.

To illustrate its usage, here is a little demo of the slice() method :

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.

Merging multiple slices will be available in the next release :)
Merging multiple slices is available since version 0.3.

The current limitation right now with the Flash Player is that you cannot inject the new generated FLV in the NetStream class you have to send it to a server and load it again, damn, do you remember a similar story ?

Other limitation, when loading a video through the NetStream class, you cannot access the video bytes, so you have to load the video twice : Embed tag to access the video stream and use the traditional NetStream.play() method to play the video.

So please, vote for adding byte access to the NetStream class.

This request has been opened by Benjamin Dobler who created RichFLV a very cool AIR app which does some FLV editing.

Sources from the demo above are available here.
Thanks for the cool components Keith ;)

Update : Version 0.3 adds a merge(slices:Vector.<FLVSlice) method to merge multiple FLVSlice objects into a single FLV stream.

Post a comment | Trackback URI

Comments (28)

  1. Mem's wrote::

    Hi, for reading FLV on the fly you can inject it in SWF generated on client side, like for fonts : http://memmie.lenglet.name/flash/actionscript/font-streaming
    ;)

    But this not work for other video containers like MOV or MP4

    Monday, August 10, 2009 at 8:52 pm #
  2. Thibault Imbert wrote::

    Hi Mem’s,

    Very cool workaround, tks for the link ;)

    Thibault

    Monday, August 10, 2009 at 8:55 pm #
  3. Jloa wrote::

    Wohoo, nice post as always.
    Btw, Thibault u’ve received my email? ^_^

    Tuesday, August 11, 2009 at 1:45 am #
  4. Antonin wrote::

    Excellent !
    Bravo Thibault

    Tuesday, August 11, 2009 at 10:12 am #
  5. Thibault Imbert wrote::

    Hi JLoa,

    Yes ! Concerning the “Contributors” section right ? I am happy we could help, feel honored to be in the credits ;)

    best,

    Thibault

    Tuesday, August 11, 2009 at 10:36 am #
  6. Benz wrote::

    Hey Thibault,

    nice work! I`m happy to see this as I was not able to release my code due to an arrangement with my current client and a lot of people requested the code.
    One thing on you example the name of the video suggests that it`s a H264 but I think it`s a VP6. I never managed to actually implement H264 support. Would be awesome if you do ;-)
    Keep up the great work
    Benz

    Tuesday, August 11, 2009 at 12:43 pm #
  7. Thibault Imbert wrote::

    Hi Benjamin,

    Thanks for your comment. I am very happy that you like it :)

    You are right, it’s a VP6 file, the name was not updated after encoding it. Btw, I will take a look at H.264 support, but yes seems definitely much harder :)

    best,

    Thibault

    Tuesday, August 11, 2009 at 1:26 pm #
  8. fab wrote::

    C’est vraiment énorme !
    Excellent !
    A mettre das la TODO de “A Deep Dive into Ten Innovative Projects for Flash” ;)

    Friday, August 14, 2009 at 10:32 am #
  9. wvxvw wrote::

    Hi Thibault.
    Exciting work!
    And, I was actually thinking about making on-the-fly video encoder for SWF. If that was any way possible that would be really awesome… For now I’ve tried generating sound assets from byte stream only… I realize video would take much more work, but it should be doable, as there are specs for embedded video.
    http://code.google.com/p/e4xu/source/browse/#svn/trunk/src/org/wvxvws/encoding
    This is what I have for now.
    So, if you would ever consider starting this kind of project, I would be more then willing to help, if I can :)
    Anyway, happy coding!

    Oleg

    Saturday, August 15, 2009 at 1:10 am #
  10. Muhammad1 wrote::

    I downloaded you Demo zip, ran it, and it says your slicer class doesn’t have a “Start” and “End” function:

    1061: Call to a possibly undefined method start through a reference with static type org.bytearray.video:FLVSlicer.

    and..

    1061: Call to a possibly undefined method end through a reference with static type org.bytearray.video:FLVSlicer.

    ..which is true because these functions really don’t exist inside the FLVSlicer.

    And its talking about line # 160 of your FLVSliceTest.as.

    Am I doing something wrong?

    Tuesday, August 18, 2009 at 12:20 am #
  11. Thibault Imbert wrote::

    Hi Muhammad1,

    Download the .zip file again. I have just updated the files. It should work smoothly :)

    let me know,

    best,

    Thibault

    Tuesday, August 18, 2009 at 1:59 am #
  12. Muhammad wrote::

    Dear Thibault,

    I’m without a doubt one of your biggest fans. I tried your updated archive, and now when I run it, it says this:

    Error: Error #2030: End of file was encountered.
    at flash.utils::ByteArray/readUTFBytes()
    at org.bytearray.video::FLVSlicer/init()
    at org.bytearray.video::FLVSlicer()
    at FLVSliceTest()

    Tuesday, August 18, 2009 at 9:37 am #
  13. Thibault Imbert wrote::

    Hi Muhammad,

    It seems like the video is not correctly embedded. Are you compiling the project through Flash CS4 or Flash Builder ?

    let me know :)

    Thibault

    Tuesday, August 18, 2009 at 9:50 am #
  14. Muhammad wrote::

    I’m using Flash CS4, not flash builder. It does compile nicely, without errors. It just gives an error when I have it compiled. Doesn’t show any button, just blank screen. Here is all I see when I compile it:

    http://www.muhammadbinyusrat.com/lab/FLVSplitter/FlashSnap.png

    If this was a problem with CS4, it would say something like a syntax error or similar, right?

    Tuesday, August 18, 2009 at 8:09 pm #
  15. Thibault Imbert wrote::

    Hey Muhammad,

    It’s really strange, I don’t see any problems. It seems like the embedded movie is empty at runtime, I am pretty sure the embed tag does not work properly.

    Can you try replacing the flvslice.fla you have with this one ?

    http://www.bytearray.org/wp-content/projects/flvslicer/flvslice.fla

    When compiling, it will ask for the Flex SDK path because of the Embed tag. Just click the update the path button and recompile the movie again.

    let me know if this works :)

    Thibault

    Wednesday, August 19, 2009 at 1:13 am #
  16. Thibault Imbert wrote::

    Hi again Muhammad,

    Try downloading the sources again. I have just repacked everything with no dependencies problem. I tried on another computer and it works.

    let me know,

    Thibault

    Wednesday, August 19, 2009 at 11:05 am #
  17. Lamoureux D. wrote::

    Salut Thibault.
    Beau boulot! J’ai cependant le même problème que muhammed . Je remplace le .fla , question sur le Flex path(“update”).
    Je recompile , et ça ne marche pas.

    Wednesday, August 19, 2009 at 7:37 pm #
  18. Lamoureux D. wrote::

    that works. Sorry =) Good Job

    Wednesday, August 19, 2009 at 8:26 pm #
  19. Thibault Imbert wrote::

    Salut Lamoureux,

    Cool, tu me rassures ! Je comprenais plus là ! :)

    Thibault

    Wednesday, August 19, 2009 at 10:06 pm #
  20. Tony wrote::

    Salut Thibault,

    Très pertinent ! Peux-tu m’indiquer les documents (specs du format flv..?) que tu as consultés ? Merci d’avance.

    J’ai voté pour l’accès aux octets du flux NetStream. J’attends çà depuis un bon moment !!

    @+

    Monday, August 24, 2009 at 12:09 am #
  21. Thibault Imbert wrote::

    Salut Tony,

    Tout est là :)

    http://www.adobe.com/devnet/flv/

    Merci pour le vote ! ;)

    Thibault

    Monday, August 24, 2009 at 9:28 am #
  22. Muhammad wrote::

    Hi Thibault,

    I’m sorry for the very late response. Basically I got myself busy with a project so almost forgot to write back on your blog.

    First of all, I am still unable to run it with all the new files as well. It gives exactly the same message, byte array is going past something which I don’t know what it means.

    However, what I have come to understand from this so far is that the only problem we’re having with implementing this is probably just that we have to embed the video and we can’t use external videos with this.

    I had a solution to that. My solution is that if we can make this code a Pure ActionScript code (which can be compiled from DOS or Linux’s Terminal using the Flex Builder) we can over come this issue.

    The idea that came to my mind right away was to make the actionscript a text file and do all the visual drawings as well via the AS to make a UI for normal users. Before the come to the flash page they will go to a normal HTML page which asks them to upload a FLV. That FLV is saved on the server, and PHP edits the ActionScript file (which is a text file at the moment) and tells PHP to tell the compiler to compile the file. Once compiled, the user is redirect to the page (we can ask them to wait a particular amount of time before they are redirected).

    Now, the newly generated SWF will have the video embedded with what they just uploaded. And we’ll have the issue pretty much solved.

    Do you think this could work? Because if you can find a mistake in this I will probably not worry about running this script on my computer as it won’t be of any use. I’d really appreciate if we could someday talk on Skype. I am a self-taught ActionScript programmer and have literally never talked with a programmer who does ActionScript. My Skype is “Khanqah.”

    Thank you very much.

    Friday, August 28, 2009 at 11:25 pm #
  23. wvxvw wrote::

    Hi Thibault.
    Just wanted to let you know that I actually made it, i.e. here’s how you can compile FLV into SWF and then play it in the Flash Player, please find the sources here:
    http://code.google.com/p/e4xu/source/browse/#svn/trunk/src/org/wvxvws/encoding
    And AIR app for testing:
    http://code.google.com/p/e4xu/source/browse/trunk/src/air-sources/FLVCompiler.mxml

    I will be very pleased to hear feedback! :)
    The code is quite raw atm, but a couple of tests I made worked. I still need to discover few things about PlaceObject2 tag, yet, apart from that thing nothing seem to be complicated.

    Wednesday, September 2, 2009 at 6:21 pm #
  24. Thibault Imbert wrote::

    Hi Oleg,

    This is great ! Thanks for the great work. I am currently in holidays so I cannot try it :) As soon as I come back I will plug it with FLVSlicer it is going to be really nice !

    Best,

    Thibault

    Wednesday, September 2, 2009 at 11:50 pm #
  25. William from Lagos wrote::

    Hey Thibault.

    While on holiday, will you be completing your book?

    Tuesday, September 15, 2009 at 9:12 pm #
  26. Thibault Imbert wrote::

    Hey William,

    Which book are you talking about ?

    Best,

    Thibault

    Wednesday, September 16, 2009 at 9:14 am #
  27. Thibault Imbert wrote::

    Hey William,

    I think you were talkin about the “What can you do with bytes” book right ? I actually finished the first chapter and still have a lot of work. I had to pause the writing cause I had a big project at Adobe, but I will be back on it very soon :)

    Thibault

    Wednesday, September 16, 2009 at 7:16 pm #
  28. Julien wrote::

    Salut Thibault, super ta librairie. Je me demandais si tu avais un exemple d’utilisation avec OSMF et plus particulierement VideoElement,
    Merci

    Monday, May 31, 2010 at 6:37 pm #

Trackbacks/Pingbacks (2)

  1. Weekly Shared Items – 11. August, 2009 | TOXIN LABS - weblog of a german design student from wuerzburg on Tuesday, August 11, 2009 at 6:41 am

    [...] Introducing FLVSlicer [ by Thibault Imbert ] [...]

     
  2. ByteArray Access to NetStream in Flash Player 10.1 | Flash Player roundup on Wednesday, May 12, 2010 at 9:58 am

    [...] in Flash Player 10.1. As many of you, I was also waitingfor this API when working on my FLV editing library and this day has [...]