10 ms·
Realtime Web Messaging over Animated Gifs
- gifplus 14y agoI'm crying. I always wanted one of these. I'm so happy.
- samet 14y agoVery clever hack.
- eslachance 14y agoThat's pretty amazing, and it's really too bad that this technique wasn't actually available years before... (or was it?)
- old_sound 14y agoIt always was actually. I even tried this on IE6 and it works
- DougWebb 14y agoI 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...
- Xosofox 14y agoGIF... that's soooo geocities... Very clever
- emp_ 14y ago> 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
- old_sound 14y agoI'm from the south as well ;)
- delinka 14y agoI really hope this statement by the project author was intended to be funny (as opposed to a serious belief that there's another calendar for the southern hemisphere.) I laughed. And then I realized I know people who would find this epiphanic and insightful.
- old_sound 14y agoI'm fron Uruguay ;)
- hds 14y agoOf course if we did add 6 months (mod 12) then we could have hot July (almost) everywhere. And an australian christmas in June, but it would be worth it!
- Evbn 14y agoIt's discontinuous. To make this work, stretch the months (add/subtract days) so the tropics only have July August and poles only have Jan/Feb. Adjust holidays appropriately.
- TomatoTomato 14y agoAnd you can add/subtract hours and minutes to days so that the sun rises and sets and the same time all year!
- 14y ago
- crisnoble 14y agoIf 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.
- ceejayoz 14y agoA lot of those used a periodically refreshing frame or something similar.
- delinka 14y agoI don't necessarily think they intend "realtime messaging" to be the focus here. We've had obvious IM for years and it didn't exactly lull as far as I know. Definitely cool that someone hacked around to learn the details about some bit of tech to make it do something it wasn't built for. I applaud this attitude. That said, it seems that since the "digital revolution" we go through these re-inventions of basic ideas and tools quite frequently. We've had "email" since the time multiple people could use a computer; recently, I commented on HN about how someone reinvented server log analysis tools to find click fraud (they were outsourcing analytics and apparently were unaware that web server logs ever existed.)
- wallunit 14y agoChat 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 14y agoWouldn't that lock up a thread, per request? Things would quickly grind to a halt I'm sure
- GeneralMaximus 14y agoDepends 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.
- macca321 14y agodoes it work in email clients?
- dkroy 14y agoThat 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.
- jcfrei 14y agohacking at its finest. while real life use cases are debatable the implementation is very, very cool.
- fmax30 14y agoIt 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 14y agoHN's jacquesm did just that, and made a lot of money doing so.
- whyleyc 14y agoCould you expand on what jacquesm did ? Interested to hear.
- WickyNilliams 14y agoFounder of camarades.com / ww.com, creator of the first 'streaming webcam software' see: http://news.ycombinator.com/user?id=jacquesm http://news.ycombinator.com/user?id=jacquesm
- david927 14y agoHe 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.
- Xosofox 14y agoCombine this with a client side JavaScript based OCR implementation, and you could even send TEXT in real-time. Imagine the possibilities !!11!1
- deleted 14y ago[deleted]
- simonw 14y agoI've seen this technique once before... Ka-Ping Yee built a demo that did this back in 1999: http://zesty.ca/chat/ http://zesty.ca/chat/ It's an awesome hack, cool to see it being rediscovered/reinvented after so much time!
- old_sound 14y agoThat's the chat I refer on the CREDITS. Thanks for the link I added you and the link there.
- danellis 14y agoA friend of mine wrote a Citrix ICA client using this idea and a server-side image map, IIRC. It was actually usable.
- sp332 14y agoFor 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 14y agoI've always thought of that, but never an animated gif. It seems brilliant!
- gojomo 14y agoAlso some early webcam/security-cam 'zero install' stream-via-web-pages used this technique, if I recall correctly.
- arantius 14y agoI believe they're all (most?) MJPEG: http://en.wikipedia.org/wiki/Motion_JPEG http://en.wikipedia.org/wiki/Motion_JPEG
- jere 14y agoI 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 14y agoSomeone made a logic gate out of crabs? Ignore :( http://news.ycombinator.com/item?id=3831987 http://news.ycombinator.com/item?id=3831987
- Evbn 14y agoWow, they found an even messier substrate than water! ... - transitors - vacuum-tubes - water - crabs - ...
- sp332 14y agoSomeone made a Turing machine out of Magic: The Gathering cards. http://news.ycombinator.com/item?id=4506865 http://news.ycombinator.com/item?id=4506865 Even more ignored.
- nopassrecover 14y agoBoth got decent upvote counts
- sp332 14y agoThey 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.
- deleted 14y ago[deleted]
- _suoiruc 14y agoThis made me laugh. Perfect follow-up. That's the way to get the good stories onto the front page.
- aggronn 14y agoDoes 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 14y agoSockJS works basically everywhere.
- arscan 14y agoThis 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.
- old_sound 14y agoThis doesn't use any javascript
- arscan 14y agoAh, 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 14y agoIt 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.
- mmastrac 14y agoUnfortunately not on IE6, and this would require both canvas support and CORS. I think most browsers that support that also support true web sockets.
- dag11 14y agoYou can also use image streams: http://minipenguin.com/?p=647 http://minipenguin.com/?p=647
- dotborg 14y agothere is no client side code or am I missing something? how do I decode my data from animated gif in javascript?
- icebraining 14y agoYou don't, it just displays the image.
- dotborg 14y agotitle is very misleading, on purpose I guess
- richthegeek 14y agoI 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 14y agoIt 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#Animated_GIF https://en.wikipedia.org/wiki/Graphics_Interchange_Format#An... [2]: https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Wel...
- eliaskg 14y agoWould it be possible to use <canvas> for extracting pixel information as binary data?
- old_sound 14y agoI was thinking about doing something like that as well. To not send real images but some binary data. Dunno if it will work
- masklinn 14y ago> http://ernestdelgado.com/public-tests/gifoncanvas/ 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.
- joezydeco 14y agoSo 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-proxy-twitter/ http://orvtech.com/en/general/gobierno-venezolano-elecciones...
- notlisted 14y agoThey can always use http://priv.ly http://priv.ly
- ThaddeusQuay2 14y agoThis is better, partly because it requires no plugin. http://fourmilab.ch/javascrypt http://fourmilab.ch/javascrypt
- king_jester 14y agoThis 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 14y agoAlso, I can't imagine it would play well with screen readers.
- benwerd 14y agoFirst person to turn a 90s animated GIF divider into an actual live progress bar with API wins the Internet.
- zoowar 14y agoFrom the example, ;; go and open http://localhost:8081/ http://localhost:8081/ in Safari or IE6 IE6, are you serious?
- Phargo 14y agoCouldn'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?
- dangrossman 14y agoWriting text onto an image is easy. Graphical hit counters are almost as old as the web. The first ones just lined up images with preprinted numbers on them, but as soon as CGI became popular, people had libraries to write the text on top of an image too.
- andreasvc 14y agoIt 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.
- thebigshane 14y agoNo 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 14y ago(3) is only secure if no one bothers to write a bot for your site. It would be trivial to do so, however.
- thebigshane 14y agoI 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 14y agoI 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.
- 14y ago
- peterwwillis 14y agoHow 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?
- kragen 14y agoThe original chat system from 1999 from which he took inspiration was written by Ka-Ping Yee, not an anonymous hacker.
- old_sound 14y agoWell it was anonymous for me when I published this post today. Then some guy here on HN pointed me to the original link.
- k2xl 14y agoQuestion: Could this be used for screen sharing?
- mikemoka 14y agoif 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
- khangtoh 14y agoThis is just wrong and needs to die and go away. It's probably fun to read for the 1st minute.
- barbs 14y ago"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.
- foxwoods 14y agomake a QR code stream, and decode it in browser.
- metatation 14y agoI 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 http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol, that would even work with your IE 2 users.