Video FunhouseKansas City, Columbia, MO

  • 217 Commits
  • 143 Pushes
  • 311 Deploys
Launch Site

Video Funhouse

By devcomo

Screencast
Quick Intro

Video Funhouse is a video converter that runs entirely in your browser. You can use videos from your hard drive or webcam, and convert them to a bunch of different formats, as well as apply filters to them.

Description

Have you ever wanted to convert a .mov file into a .gif, or save a video from your webcam as an .mp4? Our entry allows you to load videos into the page or create videos with your webcam, and convert them to a bunch of different formats as well as apply filters to them. After the videos have been converted or modified they can be downloaded.

If you encode your video into an animated gif, you will be prompted with a UI where you can upload and share your video, where it will be displayed in a viewing gallery.

Project Updates: Thanks for all the feedback we've gotten from judges and contestants. We have had some additional discussion around the project here: https://news.ycombinator.com/item?id=6739582.

If you'd like to read more about our project and our Node Knockout experience, here is an article about it: http://www.briangrinstead.com/blog/video-funhouse. We have also open sourced the ffmpeg video conversion code :) https://github.com/bgrins/videoconverter.js.

Judging Instructions

When visiting the site, your browser will start loading a few of the libraries required for the demo. This can take a while, since we have compiled the entire FFmpeg library into JavaScript, and are sending it your way. Once the libraries have been loaded, you'll be prompted with a screen where you can select a video to convert. You can choose one of:

1) Record a webcam video 2) Upload or drag and drop a file onto the page 3) Select a sample video.

Once a video has been selected, the form on the left will become activated, and you can select options to encode your video. You can play around with the different filters and scaling options that we are providing by clicking the buttons on the left. NOTE: Due to the nature of this demo, encoding samples more than 10-15 seconds in length could be fairly time consuming, so it's recommended short videos are used.

Once the processing completes (It should take about one minute for a 5 second video, unless if you have a really fast computer) you can download the converted video to your hard drive. If the video was encoded into an animated gif, you can save the video to our server for sharing, which will add it to the gallery. The gallery consists of popular user uploaded videos.

Browsers: Tested in Internet Explorer 10+, Chrome, Safari, and Firefox.

What they Used

FFmpeg, emscripton, expressjs, facetogif.

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (15)
  • judge

    Very cool and great use of workers/emscripten/ffmpeg. Could have some interesting real-world use cases as our browsers get faster!

  • judge
  • judge

    neat idea, nice use of emscripten.

  • judge

    Keychain Logistics

  • judge

    Groupon

    Very cool tech.

  • contestant

    Nature

    Wow that's crazy, FFMPEG in the browser, I likey. It would be interesting to do something like that bitcoin mining in the browser but for video rendering large files over people's browsers (although probably not worth it... interesting)... Cool!

  • judge

    Google

    Was blown away with how well this worked in practice. Some of the things I would try to improve on are the intuitiveness of the user interface and general verbosity of the logging. It should be possible to use this tool without having to observe the output messaging so frequently. I would also like to see if more work could be done with asm.js to bring down the overall filesize. Otherwise, well done. Loved this.

    • bgrins
      contestant

      Thanks so much for checking it out Addy! We've gotten the file size down from 50MB in this demo to 25MB by turning on some Emscripten optimizations. Further, applying asm.js we have gotten it down to 18.5MB, and I'm setting up some performance comparisons as we speak. Once these are set up I will be able to play around with some more ./configure options to see what else we can do to shrink the size.

      One of my dream goals of this project is to have a Firefox/Chrome extension that can be installed that acts like a desktop app and will let me drag and drop screencasts onto it and turn them into gifs, while giving me options over the quality and size of the output :). In this case, and probably any other app, the extra logging will definitely be unnecessary (and probably slow things down) so I will remove it.

    • Really glad to see the filesize has been brought down! nice work :)

  • contestant

    Really useful, but as a normal user I will be pained for the time of loading the ffmpeg files

  • judge

    tableflip.io

    <3 FFMPEG in the browser. Worked really well, so now everyone can get there gif on.

  • judge

    Sencha

    Getting FFmpeg to the browser opens a whole new world of possibilities!

  • contestant

    USP

    That is awesome! We will really use that on Meemoo! Thanks!

  • judge

    Project Propeller

    A problem to be solved, good project.

  • contestant
  • contestant

    SDSLabs

  • judge

    robotaudio.com

    Whoa, this is awesome! I never considered trying to run FFMPEG on the front-end. Any reason you couldn't use this for audio as well?

    What kind of performance issues do you see with larger videos? Could this really be a feasible alternative to desktop software performance wise? I love the idea of moving more and more OS application lever apps into the cloud. I hope you keep up with this. I'm doing something similar with audio production (http://robotaudio.com). I may now be looking into whether it makes sense for me to do something with ffmpeg.

    Open source, awesome!

    The design is pretty bad guys. It looks 15 years old.

    I'd love to see some features for audio, I assume it couldn't be that hard as long as you've got the right modules included in your ffmpeg build.

    • bgrins
      contestant

      It should definitely be possible to do audio processing.

      Depending on the codecs (like mp3) that you want to support, they will have to be compiled in as well. You can follow - or even help out on :) - this issue to see progress: https://github.com/bgrins/videoconverter.js/issues/1.

  • judge

    RivalIQ

    Hey, this is fun! i enjoyed making a selfie video and editing it up. who needs fancy video editing programs? ;-) the only thing was that after i processed my video, i uploaded it, but then i didn't see it in the gallery. maybe i need to wait or was looking in the wrong place, it wasn't clear to me. Anyhow, cool project.

    • nicolegrinstead
      contestant

      Thank you! Sorry about the gallery confusion. The gallery loads most popular by default, and I'm not sure that too many people have been actually up or down voting the videos. So your video should show up under recent http://devcomo.2013.nodeknockout.com/gallery/recent. Just a warning it's a little slow to load recent videos, it looks like someone added about 30 seconds of Rick Astley.

    • I've been Rick-Rolled again! ;-) Thanks for following up Nicole.

  • contestant

    LZ

  • judge

    FFMpeg in the browser. Sweet!

    That is a huge file! Any creative ideas on how to make this payload smaller?

    Nice job with having demo items to test and the layout of the controls is easy and intuitive. Would have like seeing a tad more polish on the overall aesthetics like "Video FunHouse" not being a big blue link on purple (not easy to see).

    Great job.

  • judge

    Balderdash

    Awesome!

  • contestant

    i.TV

    Is this real life? Amazing work.

    Is it possible to stream from a video source to the input of videoconverter.js?

    • bgrins
      contestant

      Thanks! I haven't actually tested streaming yet, as I haven't done much with FFmpeg beyond converting videos. We can enable and disable a bunch of flags in the configure script, so, maybe?

    • aaronm67
      contestant

      Unfortunately it isn't. For the Webcam demo, we build a .gif and than pass that as the input source.

      It would be really tricky to pass in a stream to the input source, because the way the binary we built works, we essentially pass in a byte array as the input file.

  • contestant

    What a great service! Can't believe you packed so much functionality in 48h. Awesome work you three!

    You'll continue this service after NKO is over?

  • contestant

    Sullivan Higdon & Sink

  • contestant

    Dang. Impressive! :D

  • judge

    CratePlayer

    • bgrins
      contestant

      Any feedback for the low rankings?

    • mostly 2 reasons:

      1. overall value of the project - while you have accomplished a nice technical feat, i didn't see the value of processing video files in the browser to the end user.
      2. i didn't feel it was very node relevant, more of a javascript accomplishment.
  • judge
  • judge

    Awesome idea! JS all the things. Though the UI is sorely lacking. I would have liked a preview of a video frame and how the different settings would have looked. Instead of showing the ffmpeg command it could have shown only the useful information.

    • bgrins
      contestant

      Thanks for checking it out! We actually had a preview of the video frames running at one point, but ran into some stability issues with tabs crashing so had to pull it. Now that we have optimized the JS over at https://github.com/bgrins/videoconverter.js it is about half the size and faster. I may take another shot at more of a live preview concept over there.

  • judge

    Brandcast

    FFMPEG in the browser? kudos just for the idea. and extra for building it. awesome work.

  • contestant

    Focus the Web

    Super cool! Really interesting project. I would have used it in Fork'n'Roll (my nodeKO entry where I use ffmpeg on the server with background jobs, so 90ies)!

  • judge

    Nice to see WebRTC involved!

  • contestant

    Foliotek Inc

    Looks great guys! Just sick piece of engineering I'm sure this will be a huge hit on GitHub.

    You need to post this up somewhere and host it so I have a place to go when I need to convert clips to gifs!

  • contestant

    Printly.pk

    awesome!!

  • contestant

    Congratulations! What an awesome project. Really loved this!

  • contestant

    Foliotek

    This project is awesome! It pushes the boundaries of the web, and I love it! Kudos to the devcomo team.

  • contestant

    Foliotek

    Impressive!

  • judge

    Nodejitsu

    This is awesome. Video Funhouse + http://giphy.com === amazing sauce.

  • judge

    This is very cool, and it seems like it could be very useful. The design wasn't great visually, but hey, it works :)

  • contestant

    Ancestry.com

    Really impressive technical feat! It worked well with the video I tested it with and was faster than expected. It would be cool to be able to also preview the filters before applying them.

    • bgrins
      contestant

      Thanks! And about previewing, I totally agree :). We actually had an extra worker that was processing certain frames in the background to preview screenshots of the video when filters were applied - but we ran into some stability issues with crashes so we took it out.

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors