One of the homeworks for Live Web was a group project on one of the class materials we went through. We’ve got HTML5 Audio and Video with WebRTC.

The project is done together with Nick Bratton and Natalia Cabrera.

We discussed that it would be interesting to capture people’s reactions as they text. And if those reactions would be inline to what people are saying.

So the idea is quite simple: achat website that takes a picture at the moment you submit the text and puts that picture on a grid. There are as many pictures, as there are people on the chat.

It would look something like this:


After some more discussions the idea evolved to this:


Basically, the “user” would submit the text in the header of the page, the webcam would take a picture and then both the pic and the text would appear in the body of the page.

Screen Shot 2016-02-28 at 12.49.10

Screen Shot 2016-02-28 at 12.50.00

Each of the users would be assigned a unique ID, so we knew who’s online, and also have individual DIV, consisting of picture frame, text field and, as said, before, their unique ID.

As there would be more users joining, we would have a grid consisting of different snapshots and messages.

Every time the user sent a new message, there would be new snapshot and new text exchanging the previous one.

Here’s code running:

Leave a Reply

Your email address will not be published. Required fields are marked *