How to create your own video chat app in under 10 mins

Find this finished code for this tutorial here jsfiddle.net/TawnyOwl/j228hopd/

The first video chat powered by Icecomm was created in JSFiddle — 8 lines of front-end javascript and the result was the most curious chat roulette ever.

Since then Icecomm has evolved to suite of SDKs for e-commerce, email, phone integration, but at its heart is still the ability to create a multiway video chat in under 10 mins. That’s what we’ll be doing here

There are three pieces to put together

• Some minimal boilerplate HTML to get the page set up
• CSS to style our video streams’ appearance
• The icecomm script tag and javascript

We’ll tick these off as we progress

Note at the end of this post there are a number of extension ideas to explore from making your video stream draggable to integrating with a React app.

But first the basic multiway video app. To get started, add the HTML code

This is the basic HTML framework into which we’re going to plant our video chat. Notice the HTML5 video element with id localVideo — our javascript will use this to locate where to add our local video stream (that is, the stream from our own camera)

Next let’s put together some basic styling

This will make our friend’s video full screen with ours overlaid in the bottom right corner (we’ll see how to make our video stream draggable as an extension to this post)

Now were onto the meat of the problem — adding the javascript that will get our video chat off the ground

First we must add the icecomm script — you can use the hosted CDN version at http://cdn.icecomm.io/icecomm.js.

Alternatively, install it with bower

bower install icecomm

Remember that to install with bower you’ll need to first install bower (using npm — the package manager that comes with Node [link])

Now let’s create the client Icecomm object that you’ll be interacting with

Here you’ll need to grab an api key from icecomm.io/signup and drop that in

Set the video element’s content to be your own video stream (you do this on the event ‘local’ that’s first emitted you click to approve your video camera)

Now ready your app to listen for another client’s connection

and when they connect, you’ll add their video stream to the mix with

document.body.appendChild(options.video);

We want to remove others’ video streams on their disconnection so we set a listener for the ‘disconnect’ event and remove the video belonging to the participant with the relevant callerID

Finally, let’s connect to a room. Icecomm automatically supports rooms and each video chat has to take place inside one

(you can pass in {audio: false} as an additional second argument if you don’t want to have audio feedback when testing your video chat on the same browser)

And that’s it — a full multiway video chat app with only frontend javascript in under 10 mins (and around 8 lines of javascript) — the final code’s at jsfiddle.net/TawnyOwl/j228hopd/

Extensions

JSFiddle

If you wrote your code in JSFiddle — share the link with others to create your very own chat roulette (eminently cleaner of course)

Adding a minimal server

First we’ll add a simple Node/Express server to serve up our static file

With Node/Express that’s simple

1. Install node from https://nodejs.org/

2. Run ‘npm install express’ in your project’s folder

3. Create a file server.js

4. Add the following lines of javascript to server.js

5. Run server.js with

node server.js

Now at localhost:8000 you’ll find your video chat — ready to be deployed on heroku (follow steps to do that here)

Will Sentance is CTO at Codesmith. He teaches core software engineering, computer science, backend engineering with Node, and prepares students for hiring.