It's too easy

Make a video chat app in 5 minutes!

Introduction

Get ready — you're about to create a video chat application in just 21 lines of code. You'll need:

Git
Ruby
Bundler
Middleman
Internet connectivity
WebRTC compliant browser (Chrome, Firefox, or Opera)

We'll make our video chat application in four steps:

Step 1: Start a Vega Server
Step 2: Initiate a Middleman app
Step 3: Display your camera
Step 4: Display and remove your peers

Step 1: Start a Vega Server

We need a Vega Server to handle initial communication between peers.

Clone the vega server example repo from the terminal:

$ git clone git@github.com:vega-webrtc/vega_server_ruby_example.git && cd vega_server_ruby_example

Then, install the dependencies:
```
$ bundle install
        
```

Finally, run the server:

$ bundle exec puma config.ru -p 9292

Step 2: Initiate a Middleman app

We need a local server to serve our video application. Middleman will handle this for us. We'll create a Middleman app, clear out its predefined index.html.erb file, include Vega Prime and JQuery, and serve up the app.

$ middleman init video-chat && cd video-chat
$ echo "" > source/index.html.erb
$ wget https://raw.githubusercontent.com/vega-webrtc/vega-prime/master/vega-prime.bundle.js -O source/javascripts/vega-prime.bundle.js
$ wget http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js -O source/javascripts/jquery.min.js
$ middleman server -p 4500

Surf over to localhost:4500 in your browser and you should see a blank, gray screen.

Now, let's display your computer's video camera in the browser!

Step 3: Display your camera

Inside of our Middleman app, let's setup our index.html.erb file to have a video tag for our camera.

<!-- source/index.html.erb -->

<video id="me" muted autoplay style="width: 25%;"></video>

We'll use Vega Prime to get our video in that video tag.

<!-- source/index.html.erb -->

<video id="me" muted autoplay style="width: 25%;"></video>

<script>
  new VegaPrime({
    url: 'ws://localhost:9292', 
    badge: {},
    roomId: '/fun'
  }).onLocalStreamReceived(function(wrappedStream){
    $('video#me').attr('src', wrappedStream.url);
  });
</script>

Refresh localhost:4500, allow the browser to access your camera and microphone, and you should see yourself in the browser!

Step 4: Display and remove your peers

Let's display peers when they arrive, and remove them when they go away.

First, create a little space for our peers to go.

<!-- source/index.html.erb -->

<div id="peers"></div>

<video id="me" muted autoplay style="width: 25%;"></video>

<script>
  new VegaPrime({
    url: 'ws://localhost:9292', 
    badge: {},
    roomId: '/fun'
  }).onLocalStreamReceived(function(wrappedStream){
    $('video#me').attr('src', wrappedStream.url);
  });
</script>

Now, let's add our peers to the page when Vega Prime detects them.

<!-- source/index.html.erb -->

<div id="peers"></div>

<video id="me" muted autoplay style="width: 25%;"></video>

<script>
  new VegaPrime({
    url: 'ws://localhost:9292', 
    badge: {},
    roomId: '/fun'
  }).onLocalStreamReceived(function(wrappedStream){
    $('video#me').attr('src', wrappedStream.url);
  }).onStreamAdded(function(peer){
    $video = $('<video autoplay style="width: 50%;">');
    $video.attr('src', peer.streamUrl);
    $video.attr('data-peer-id', peer.peerId);

    $('#peers').append($video);
  });
</script>

Refresh your tab with localhost:4500. Then open up localhost:4500 in another tab. In both tabs, you should see a bigger version of yourself above yourself. That's you, but through a peer-to-peer connection! Pretty cool, huh? Go ahead, open up localhost:4500 in yet another tab. Now there should be two big version of you. Vega does multiple peer connections for free!

There's one more thing we have to do. We have to remove our peers when they go away.

<!-- source/index.html.erb -->

<div id="peers"></div>

<video id="me" muted autoplay style="width: 25%;"></video>

<script>
  new VegaPrime({
    url: 'ws://localhost:9292', 
    badge: {},
    roomId: '/fun'
  }).onLocalStreamReceived(function(wrappedStream){
    $('video#me').attr('src', wrappedStream.url);
  }).onStreamAdded(function(peer){
    $video = $('<video autoplay style="width: 50%;">');
    $video.attr('src', peer.streamUrl);
    $video.attr('data-peer-id', peer.peerId);

    $('#peers').append($video);
  }).onPeerRemoved(function(peer){
    $('video[data-peer-id="' + peer.peerId + '"]').remove();
  });
</script>

Now if you open up localhost:4500 in multiple tabs, and you close some, you should see only as many versions of you as there are tabs on localhost:4500.

Step 5: Profit?

Congratulations, you've made a very crude video chat application! Given the APIs above, you have a good idea of where you can take your own video application. Check out the guides for more on how to make your Vega Server secure, how to handle errors in Vega Prime, and how the whole thing works under the hood.