Simple webcam with websockets and Processing

I heard someone was streaming Kinect data and it made me wonder if you could just stream image data over websockets if you encoded every frame to Base64. This is useful because you can use Base64 strings to define images in HTML:

It also seems pretty straight forward to do this in reverse from an iPhone/iPad native app. Same process, for each frame crunch the image into a Base64 string and send it. This is what I’ll be trying next.

You can also write this data to a canvas element and use then convert it to any form you want as well. Kind of a neat trick. Here is the Processing sketch, you can download the package with all the required libraries below. Dependencies issues, who needs ‘em? …I do :

The only complicated part is the encoding of the image:

Capture the image from the camera Capture object
create a BufferedImage object
load the pixels from the capture object to the BufferedImage
encode the RGB pixels as jpg image and write it to an output byte stream
convert that image to a byte array and then to a Base64 string
then broadcast it over the wire via Websockets

You’ll wanna change the ip address for the websocket server to whatever is your computer: System Preferences > Network on OS X for you IP. I am you can get around this, but for my example I created a folder called “html” and placed it inside the Processing Sketch Folder: ~/Documents/Processing/SimpleSocketServer/html/index.html

This might be required.

It worked well at 640×480 @ 30fps in Chrome and 320×240 @ 30fps on the iPad and iPhone. Here is a video of me demoing it in fashion.

15 Comments

I was trying to stream my webcam over the internet through my server and I stumbled upon your site. This is exactly what I need. However, I don’t quite know how to implement your work over mine. If you could please instruct me in more details, it would be a lot helpful to me.

What do we do with the “jcifs-1.3.17.jar” file inside the code folder?…
When trying to the run the sketch;

No library found for jcifs.util
Libraries must be installed in a folder named ‘libraries’ inside the ’sketchbook’ folder.

Dee
9.26.12 /
5pm

Ok that issue was fixed by doing “add file” and selecting that JAR file.. However when the sketch is finally ran its a black rectangle and when the HTML is opened in Chrome its blank. Not a lot is happening — no connection with the webcam is made.

admin
10.15.12 /
12pm

hrmmm, not 100% sure. i’ll remake the example tonight

Kevin
1.17.13 /
7am

Maybe you could write something using createObjectURL and transport the images as blob should be much fast on clientside, at least on the playing side

About

Late Plate died. You wouldn’t believe the potential greatness of that project. We attempted to embody the creative energy and unique culture of our social circle. How ironic that our number one past time is bailing. Thus, the blog died. RJ swears that if you read the activeCollab log you’ll see that it’s all there:

Date Plate – the dating service we designed
Rate Plate – custom made weighted rating system
Hate Plate – subjective/educated barrage of hate
Create Plate – gorgeous creations
Shot in the Face – revenge for minor annoyances
First Five – running late for a movie?
The Brick – you already know too much
Ubicap – it’s everything from everywhere
SYRUP – Java based file cataloger

Well, all good things come to an end…or never get started? C’est la vie bonnes gens. So I have decided to go my own way, just me and my Bad Ankles.