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

Find this finished code for this tutorial here

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

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 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


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



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

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.