Webcam round chat


By that time I had been working on rtcamera, a camera app that could generate animated GIFs using your webcam as input, and somehow our thought trails converged: wouldn't it be super cool to use the webcam's input instead of an static avatar?It was easy to implement this using the two libraries that I had extracted out from : gum Helper and Animated_GIF, and the rest is history! People started coming to the site in flocks and being both puzzled by the unexpected cheerness and the general raw and honest spirit: no sign up forms, no name to fill in, no identity to build and maintain; just a text input and your face to show the world what you were up to in that very moment.The other thing we're doing is creating a Video Shooter instance.This is a little class that attaches to an existing video element and will start generating a GIF whenever we press ENTER, using frames from that video element: does is creating an instance of Animated_GIF and then periodically tells it to capture a frame as many times as requested, using Animated_GIF's add Frame method.Fortunately, it is all abstracted enough that we only need to call the method and wait for it to be generated on the background using Web Workers.We use Web Workers because rendering is quite an intensive process and can easily block the main thread, making the whole app unresponsive--that's something we don't want to happen!To demonstrate how easy it is to capture data from the webcam and turn it into a GIF with the right libraries to abstract the tedium, here is the main code from GIFwall: var main = document.query Selector('main'); var mosaic Container = Element By Id('mosaic'); var video Width= 0, video Height = 0; var video Element; var shooter; var images Per Row = 5; var max Images = 20; Event Listener('resize', on Resize); Gum Helper.start Video Streaming(function(error, stream, video El, width, height) ); function start Capturing() function on Frame Captured(picture Data) function get Image Size() function on Resize(e) This is essentially Meatspace Chat, but without chatting and without sending the data to other connected people.Some homework for the reader could be to show a progress bar or other fancy similar effect while GIFs are being encoded, or even improve this so that the captured GIFs are actually sent to other users via real peer to peer connections over Web RTC.



It also uses gum Helper, Animated_GIF and a simplified version of the Video Shooter module.How often the frames are captured (and therefore how smooth the animation will be) depends on the parameter.The more frames and the more frequently they are captured, the better and less jerky the GIF will look, but it will also be bigger.But for those of you who don't know about history: we kept the chat in private for a while because Edna was going to present it at Realtime Conf. If you haven't been to Meatspaces Chat yet, I recommend you go there now to familiarise yourself with how it looks and works before I get into technical details. But before we start deep diving into the code, let me add a little warning: Meatspaces chat is constantly being improved by the amazing community, so I will be referring to lines using a specific commit hash too.