MacGiferMontevideo, Uruguay

  • 146 Commits
  • 98 Pushes
  • 31 Deploys
Launch Site

MacGifer

By sophilabs

Screencast
Quick Intro

Stream yourself over GIF (almost) in realtime

Description

Stream yourself over GIF (almost) in realtime

How does it work?

        Browser                      Node.js                  Browser/phone
     (broadcaster)                    server                mplayer/microwave
           .                            .                       (watcher)
           |                            |                           .
           |--.                         |                           |
           |  | Get webcam frame        |<--------------------------|
           |  | (WebRTC)                |--.     HTTP Request       |
           |<-`                         |  |                        |
           |--.                         |  | Encode GIF header      |
           |  | Draw on                 |  | (GIFEncoder)           |
           |  | HTML5 canvas            |  |                        |
           |<-`                         |<-`                        |
           |--.                         |-------------------------->|
           |  | Apply                   |       Write header        |
           |  | extensions              |        to response        |
           |<-`                         |                           |
           |--.                         |                           |
           |  | Encode frame            |                           |
           |  | (GIFEncoder/webworker)  |                           |
           |<-`                         |                           |
           |--------------------------->|--.                        |
           |         Send frame         |  | Publish to             |
           |        (websockets)        |  | Redis channel          |
           |                            |<-`                        |
           |                            |--.                        |
           |                            |  | Read from              |
           |                            |  | Redis channel          |
           |                            |<-`                        |
           |                            |-------------------------->|
           |                            |       Write frame         |
           |                            |       to response         |
           |                            |                           |
           `                            `                           `
Judging Instructions

Try it on the latest Chrome or Firefox. Press REC and allow the app to use your webcam as source. You'll get an URL pointing to a GIF file. Open that URL on a different tab and see yourself, or send it to your friends so they can watch you live. You can try the extensions by clicking the checkboxes next to them.

What they Used

WebRTC, WebKitSpeechRecognition, Redis, Express, Jade, GIFEncoder.js, WebSockets, WebWorkers.

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (31)
  • judge

    Intentionally funny web 1.0 design, but would be more effective at conveying its awesomeness if the design was thought through more. Big ups!

  • judge

    Very nice.

  • judge

    Keychain Logistics

  • judge

    Google

    Reaaaaally fun. Loved the 90's throwback and the implementation seems to work real well.

  • contestant

    Cognifide

  • Good fun. Obvious GIF URL would be a welcome addition. The DHTML look completes the experience! I appreciate the innovation and completeness of hooking up all of this stuff!

  • judge

    Tilde

    Ha! So much fun. I love it.

  • judge

    GitHub

    Pretty neat, but not sure where I would need to stream myself and it was a little hard to get the url for your stream.

  • contestant

    "funemployed"

    Lot's of good tech at work here (and it's appreciated). WebRTC, canvas, redis, and sockets. People forget how hard it is to even get something as "simple" as this working.

    Love the design too :-) Did you know that the official spacejam website is still up? http://www2.warnerbros.com/spacejam/movie/jam.htm

  • judge

    robotaudio.com

    Neat but I'm having a hard time thinking of a use for it.

    Love the throwback design.

    As far as innovation, It seems like there are a couple of gif streaming apps every year.

  • contestant
  • judge

    Balderdash

    I love the AngelFire/GeoCities/Homestead throwback design.

  • judge

    nearForm

    A triumph :) We finally have the technology to unlock the potential of streaming memes ('streamemes' - patent pending). Seriously, nice work, very impressive!

  • judge

    Bugsnag

    This is great fun, nice work! :).

    It'd have been nice if the preview on my page was more similar to what people would see when they visited the link, but otherwise it was pretty much perfect.

  • judge

    I love the retro design! Nice work!

  • contestant

    Cuttle

    Love it! Great job, I especially like the design.

  • judge

    Haha, love it! Great work.

  • contestant

    Hah! Excellent. I do love a good usage of gifs :D

  • judge

    GitHub

    Really cool. I was trying to get the gif to work in a chat room, would have been really awesome. A+++ will gif again

    • pricco
      contestant

      Thanks :) BTW, We tried it on hipchat and worked perfectly.

  • judge

    VEVO

    This idea is great. I can envision all kinds of fun and useful things to do with this.

    • pricco
      contestant

      Thanks! About design, it was really difficult to Geocitize it :)

  • contestant

    Printly.pk

    fun stuff!!

  • contestant

    BandPage

    Awesome! Love the 90's throwback style, and the extra stuff you added on top was pretty cool.

    Writing data over GIF I've seen before - hooking up a webcam to streaming GIF output is not. Nice idea!

    • pricco
      contestant

      Thanks for getting it!

  • contestant

    MeteorHacks

  • contestant

    BandPage

    It worked!

  • judge

    Applied Geographics

    i wanted to love it based on the mcgyver but alas it didn't work

    • pricco
      contestant

      Hi, Did you try it on latest Chrome, Firefox or Safari? Its use WebRTC, WebSockets and WebWorkers.

      Thank you.

  • contestant

    Microsoft

    Sorry, this was a vote for the wrong entry!

IMPORTANT DATES

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

Thank you to our Platinum Sponsors