
Realtime Web Messaging over Animated Gifs - old_sound
https://github.com/videlalvaro/gifsockets
======
jere
I am convinced HN is the Pinterest of software.

Someone made a coffee table out of old crates? Pin. Someone made a fence out
of old wood pallets? Pin.

Someone made a realtime messaging library out of animated gifs? Upvote.

~~~
__alexs
Someone made a logic gate out of crabs? Ignore :(

<http://news.ycombinator.com/item?id=3831987>

~~~
sp332
Someone made a Turing machine out of Magic: The Gathering cards.
<http://news.ycombinator.com/item?id=4506865> Even more ignored.

~~~
nopassrecover
Both got decent upvote counts

~~~
sp332
They do now :) The MtG post had about half as many upvotes when I posted the
link, and I think the crabs one got an even bigger boost.

------
emp_
> sadly we are in mid September here in the northern hemisphere.

I am in the south and can confirm we are also in September, will report back
with news.

/snark

~~~
gavingmiller
Our Canadian office managed to convince a couple of team members in our
American office that we ran on a 20 hour clock, with 72 minutes in an hour.
That was fun for a week.

~~~
kragen
As a remarkable coincidence, another hack that Ka-Ping Yee did once was
writing a nonstandard clock for his Palm. He spent a summer living 28-hour
days: six 28-hour days per normal week, going in and out of phase with the sun
once a week. So he needed a way to remember when to go to sleep, when to wake
up, when to eat dinner, and so on. When it's 25:00, what do you do? We have a
lifetime of intuition built up around clock times on a 24-hour clock.

So he wrote a digital clock that used standard-length seconds, but 70 of them
per minute, 60 of those minutes per hour, and 24 of those hours per day. So
when it was 10:30:59 by his nonstandard clock, he was at the phase of his
nonstandard day that corresponds to 10:30 or so of the standard day --- but
the clock would then roll over to 10:30:60, 10:30:61, ... 10:30:69, 10:31:00.

It was very amusing to see people's reactions upon watching the clock for a
little while, especially at the time of week that it was more or less in phase
with normal time.

------
simonw
I've seen this technique once before... Ka-Ping Yee built a demo that did this
back in 1999: <http://zesty.ca/chat/>

It's an awesome hack, cool to see it being rediscovered/reinvented after so
much time!

~~~
danellis
A friend of mine wrote a Citrix ICA client using this idea and a server-side
image map, IIRC. It was actually usable.

~~~
sp332
For a while (they've changed clients a few times but it still might work) the
last fallback of LogMeIn remote desktop software was a gif of your desktop in
an image map. It was surprisingly usable!

~~~
TazeTSchnitzel
I've always thought of that, but never an animated gif. It seems brilliant!

------
arscan
This is awesome -- you never know when a solution like this might come in
handy.

Wayyyyy back in the day (NS4, IE4 day) I used the width / height of an image
the browser polled every few seconds as a transport mechanism... the only
other option (refreshing a hidden frame) caused an irritating "page refresh"
clicking noise. This was before XMLHttpRequest obviously and was enough
bandwidth for our needs. It worked so well that I believe its still being used
in production systems.

I haven't looked at the javascript generated in this animated gif solution,
but I assume that it does some stuff that wouldn't work in the pre-IE6
browsers. It would be extremely amazing if it did though.

~~~
arscan
Ah, I just realized that this simply prints text out in a gif... it doesn't
encode text in the gif and then decode it in the browser into text that
javascript could manipulate. Too bad. I wonder if that's possible...

~~~
streptomycin
It is possible, as you can now get the raw pixel data of an image by copying
it to a canvas and using getImageData.

    
    
        <img src="test.gif" id="img">
    
        <script type=text/javascript>
        var img = document.getElementById("img");
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
    
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
    
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        </script>
    

Then you can do whatever you want with the pixel data.

~~~
arscan
This would be a great step in some kind of rube goldberg inspired website.

------
benwerd
First person to turn a 90s animated GIF divider into an actual live progress
bar with API wins the Internet.

------
richthegeek
I did something similar for cheap (insecure) desktop streaming a few years
ago.

Roughly, use scrot (or similar screen capturing command line tool) to take a
screenshot of the desktop and then encode it into a gif frame. Repeat once per
second. Boom, your desktop is now a gif.

The main problem with this approach is that transmitting stuff via gif (low-
color bitmaps, remember) is painfully slow even with modern internet.

That said, could probably be very useful in some instances!

~~~
dbaupp
It is possible to do some interframe compression with gifs[1], so one can
potentially reduce the data sent significantly, especially if one is typing or
not changing the whole screen. (And gifs aren't "just" bitmaps, they have some
compression[2].)

[1]: _"Some economy of data is possible where a frame need only rewrite a
portion of the pixels of the display, because the Image Descriptor can define
a smaller rectangle to be rescanned instead of the whole image."_
[https://en.wikipedia.org/wiki/Graphics_Interchange_Format#An...](https://en.wikipedia.org/wiki/Graphics_Interchange_Format#Animated_GIF)

[2]:
[https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Wel...](https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch)

------
thebigshane
No one has mentioned these specific use cases yet...

1) live charts and graphs of server loads

2) interactive maps (instead of loading new images, just append)

3) I'm also thinking of some kind of captcha, where the user waits for the
server to show a certain image and then can submit a comment and the server
would know which submits were valid based on timestamp... or something.

4) weather, temperature, stocks

5) collaborative drawing applet? (would still require ajax though)

~~~
tylermenezes
(3) is only secure if no one bothers to write a bot for your site. It would be
trivial to do so, however.

~~~
thebigshane
I admit that I have only thought about this for a minute or two but I am
thinking of something a little more complex than a hard coded image.

More like: Hit submit when a picture of a dog is shown in the slideshow, if
its a cat, your comment will be denied. And these images of dogs and cats
would be picked randomly by the server from a google image search (...or
something). The vulnerability so far is that a bot could just keep trying
until it got in but I'm sure a crafty programmer could come up with an attempt
limiter.

Still a half-baked idea, but the tech does offer some interesting
possibilities. I particularly like that this may work when AJAX/JS is disabled
or otherwise not an option.

~~~
tylermenezes
I worked on CAPTCHAs at Microsoft Research in a past life, and I can tell you,
most original forms won't work. In the case of the one you described, I as an
attacker can just put it through Tin Eye to find the original, and then do
some semantic analysis on the page containing the image, or event just the
URL, to figure it out. I have working code for this as a proof of concept for
Microsoft's Kitten Auth.

~~~
thebigshane
If that is the best attack on my idea, then I'd say that's pretty good! A
spammer would have to target the site specifically (for tailor-made script)
and parse an animated gif into individual images, then send every image into
Tin Eye (which is awesome but the API isn't free right?).

That said, I am a complete amateur at captcha design. Cool research though and
I bet a lot of HN'ers would be interested in your PoC if you haven't already
submitted it.

------
joezydeco
So when you read about countries like Venezuela installing proxies in front of
Twitter before an upcoming election [1], is there a potential to use this
technique to tunnel information into areas that normally would suppress it?

[1] [http://orvtech.com/en/general/gobierno-venezolano-
elecciones...](http://orvtech.com/en/general/gobierno-venezolano-elecciones-
proxy-twitter/)

~~~
notlisted
They can always use <http://priv.ly>

~~~
ThaddeusQuay2
This is better, partly because it requires no plugin.

<http://fourmilab.ch/javascrypt>

------
fmax30
It would be much cooler if you were to send the video stream to the gif
instead of the booring old messages. Very cool though. Just think if something
like this with video was invented back in the days of IE6 , it would have been
the skype of its day.

~~~
david927
HN's jacquesm did just that, and made a lot of money doing so.

~~~
whyleyc
Could you expand on what jacquesm did ? Interested to hear.

~~~
WickyNilliams

        Founder of camarades.com / ww.com, creator of the first 'streaming webcam software'
    

see: <http://news.ycombinator.com/user?id=jacquesm>

~~~
david927
He was bet a candybar that he couldn't make a gif that never ended. He did it,
of course, and that became the first streaming webcam software.

------
dkroy
That is extremely clever, this just goes to show that if you know how
something works inside and out you can come up with clever hacks.

------
crisnoble
If realtime messaging is a new and cool thing, what were chat rooms back in
the day? not realtime? Am I missing something? I don't remember needing
reloading those pages...

All that aside, this is amazing.

~~~
wallunit
Chat rooms 10 years ago weren't using web standards like HTML, GIF and
Javascript. They were writing either in Java or in Flash.

However MSIE6 also supports XmlHttpRequest (though an Active-X Control), which
you can also use for real-time communication. Just setup a XmlHttpRequest and
let the request idle on the server-side until new data become available.

~~~
WickyNilliams
Wouldn't that lock up a thread, per request? Things would quickly grind to a
halt I'm sure

~~~
GeneralMaximus
Depends on your web server. AFAIK, nginx uses a combination of events and
threads to handle a ginormous number of simultaneous connections.

See:

    
    
        http://en.wikipedia.org/wiki/Asynchronous_I/O
    
        http://www.slideshare.net/joshzhu/nginx-internals
        
        http://www.aosabook.org/en/nginx.html
        
        http://serverfault.com/questions/86674/why-is-nginx-so-fast
    

Also, Node.js.

Edit: formatting.

------
metatation
I get the humor of this library, but in reality wouldn't you just use HTTP 1.1
chunked transfer encoding instead? According to
<http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol>, that would even
work with your IE 2 users.

------
eliaskg
Would it be possible to use <canvas> for extracting pixel information as
binary data?

~~~
masklinn
> <http://ernestdelgado.com/public-tests/gifoncanvas/>

Kinda:

> if we add an animated GIF as the first source, every time a drawImage call
> happens it will render whatever the status of the GIF is at that very second

So if you call drawImage in a (timeout/setinterval) loop, you can get the
frame's data, compare to the previous frame's data and if they're different
you got a new frame-worth of data.

Considering that requires canvas support (with image-query capabilities)
you're probably better off using websockets and the like.

------
barbs
"The awesome image that illustrates this page was given by the internet." That
excellent gif is from "Tim and Eric Awesome Show, Great Job!" Just thought I'd
give proper credit where it's due.

------
aggronn
Does this work on the iphone? I expect this would be a great alternative to
socket.io for mobile that doesn't support websockets or flash.

~~~
majke
SockJS works basically everywhere.

------
Xosofox
Combine this with a client side JavaScript based OCR implementation, and you
could even send TEXT in real-time.

Imagine the possibilities !!11!1

------
eslachance
That's pretty amazing, and it's really too bad that this technique wasn't
actually available years before... (or was it?)

~~~
DougWebb
I wrote the first (only?) GIF decoder for the Commodore 64 back in the day,
including displaying animated frames. There was no 'live' delivery of images
back then though; you had to download them in-full over FTP or a proprietary
file transfer protocol before you started parsing. I suspect the encoding was
too slow on most computers at the time to stream the file as it was encoded
anyway. But yeah, the basic capability was present back then.

Once the WWW kicked off and GIFs started being served, and especially once cgi
scripts started being written, someone could have had this idea and the
software and hardware probably could have handled it. So we could have been
doing this in the late 90's. I wish I had thought of it...

------
king_jester
This is pretty cool. I don't know if I would use this in production, as people
with epilepsy usually disable GIFs to protect themselves, so this tech would
probably fail (usually people use an extension or set the browser to only load
frame 1 of the GIF and stop).

~~~
dllthomas
Also, I can't imagine it would play well with screen readers.

------
Phargo
Couldn't this be used to add another layer of security to a conversation? If
there is a way to generate gifs on the fly that contained what you wished to
say, it could be used to mask your message from basic text screening and
copy/paste.

Thoughts?

~~~
andreasvc
It wouldn't provide any meaningful security; think of how difficult it is to
make a CAPTCHA that is both readable for humans and hard to beat for
computers. Adding security to a conversation is a solved problem in the
technical sense (use encryption such as GPG), the only reason that it's not in
widespread use is that people can't be bothered.

------
peterwwillis
How exactly is this a better approach than multipart/x-mixed-replace, which is
designed to push new messages from the server to the client in a stream until
the server decides to stop?

------
macca321
does it work in email clients?

------
k2xl
Question: Could this be used for screen sharing?

------
dag11
You can also use image streams: <http://minipenguin.com/?p=647>

------
kragen
The original chat system from 1999 from which he took inspiration was written
by Ka-Ping Yee, not an anonymous hacker.

~~~
old_sound
Well it was anonymous for me when I published this post today. Then some guy
here on HN pointed me to the original link.

------
dotborg
there is no client side code or am I missing something?

how do I decode my data from animated gif in javascript?

~~~
icebraining
You don't, it just displays the image.

~~~
dotborg
title is very misleading, on purpose I guess

------
mikemoka
if flash wasn't dying already I would have asked if this could have been
useful to enable flash games or videos on the ipad... but the answer would
have probably been "no" anyway

------
samet
Very clever hack.

------
jcfrei
hacking at its finest. while real life use cases are debatable the
implementation is very, very cool.

------
foxwoods
make a QR code stream, and decode it in browser.

------
gifplus
I'm crying. I always wanted one of these. I'm so happy.

------
Xosofox
GIF... that's soooo geocities...

Very clever

------
khangtoh
This is just wrong and needs to die and go away. It's probably fun to read for
the 1st minute.

------
zoowar
From the example, ;; go and open <http://localhost:8081/> in Safari or IE6

IE6, are you serious?

