Introduction

Want to develop your own video chat app? But, not sure where to start? Don’t worry at all! We are here with a tutorial that will help you build your own video chat application. Don’t limit yourself, and start exploring with us!

Here, we will learn with an example and build a one-to-one video chat application with Twilio, Rails, and Javascript. With this application, you can easily video chat with your family and friends.

Tutorial Goal

Before building the Twilio video chat application, look at the video below to have a rough idea of the demo. The video chat app development will consist of three major sections – User Interface using Javascript + HTML + CSS, Twilio Basic Set-Up, and Business Logic to Build a Video Chat App.

Prerequisites

  • Twilio account
  • Ruby version 2.6.2
  • Node version 14.8.0
  • Rails version 6
  • Bundler to install dependencies

Basic Project Set-Up and Dependencies Installation

Before getting started with the demo application, here’s my system set up-

  • 2.6.2 ruby version
  • 6.0.4.1 Rails version
  • 14.8.0 node version.

Create a new rails application using the below commands

Copy Text
rails new twilio-video-call
cd twilio-video-call

Then, run the following command to install dependencies – bootstrap, jQuery, and popper.js

Copy Text
yarn add [email protected] jquery popper.js

After this, add the following code in the config/webpack/environment.js file.

// config/webpack/environment.js file

Copy Text
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

Go to app/assets/stylesheets/application.css and add the following line above the require_tree and require_self lines.

Copy Text
*= require bootstrap

And add this code in application.js

Copy Text
require("jquery")
import $ from 'jquery';  
window.jQuery = $; window.$ = $;

Add a Room using Scaffold

Now, it’s time to create a Model, View, and Controller using Scaffold once we have a basic setup. Use the below command to do the same.

Copy Text
rails g scaffold room name:string

After that, go to the migration file and add the unique_name and room_sid field to the migration. We will use this in the future. Now your migration will look like this.

Copy Text
class CreateRooms <ActiveRecord::Migration[6.0]
  def change
    create_table :rooms do |t|
      t.string :name
      t.string :unique_name
      t.string :room_sid
      t.timestamps
    end
  end
end

After that, migrate the database using.

Copy Text
rails db:migrate

Go to the config/routes.rb file and add the root path for your app.

Copy Text
root to: "rooms#index"

After that, go to this URL http://localhost:3000/.

Video chat app

Congratulations! If you see this screen, your app is working.

Now let’s create the random string as a unique name for each room. Add this code to the room.rb model.

// room.rb

Copy Text
before_create :add_uniqe_name

def add_uniqe_name
  unless self.unique_name.present?
      self.unique_name = (0...15).map {   ('a'..'z').to_a[rand(26)] }.join
   end
end

This will create a unique random string for the unique_name field whenever a new room is generated.

Moving on further with the tutorial to build a video chat application with Twilio, Rails, and JS. Here, we are done with creating a room. Now, let’s set up a Twilio account and store its credentials.

Add Twilio Gem and Create Twilio Account

For that, we are going to use Twilio Programmable video. For this, we need a Twilio account. Click here to create an account if you don’t have any.

Add Gems into gemfile

Copy Text
gem 'twilio-ruby'
gem 'dotenv-rails'

Run bundle

Copy Text
bundle install

Add Twilio Credentials

After that, go to your Twilio dashboard and copy the ACCOUNT SID and AUTH TOKEN.

Add Twilio Credentials

For storing credentials, we are going to use dotenv. Create a .env file in the root directory of the project. And Add the following line in config/application.rb.

Copy Text
dotenv::Railtie.load

For this tutorial, I’m going to create that file in the twilio-video-call folder. If you use git for version control, don’t forget to add this file in gitignore.

Go to the API Key section and click the red plus sign to create a new API key. Give your key a recognizable name representing the project you’re working on in the Friendly Name text field and leave the Key Type Standard. Click the button that says Create API Key. Assign those keys to API_KEY_SID and API_KEY_SECRET.

Assign the keys

Add those credentials in the .env file.

Add the credentials

Now, it’s the logic time! Let’s get our rooms together and code some logic.

Business Logic to Build a Video Chat Application with Twilio, Rails

Create Twilio Room

Change the Show action’s code with the following code.

Copy Text
// controllers/rooms_controller.rb

def show
    @client = Twilio::REST::Client.new(ENV['ACCOUNT_SID'], ENV['AUTH_TOKEN'])
    unless @room.room_sid.present?
      # create room in twilio
      twilio_room = @client.video.rooms.create(type: 'peer-to-peer',unique_name: @room.unique_name)
      @room.update(room_sid: twilio_room.sid)
    end
    identity = (0...5).map { ('a'..'z').to_a[rand(26)] }.join
    @room_name = @room.unique_name

    #create token to access Twilio room
    @token = Twilio::JWT::AccessToken.new(ENV['ACCOUNT_SID'], ENV['API_KEY_SID'],ENV['API_KEY_SECRET'], identity: identity)
    
    #create video grant for token
    grant = Twilio::JWT::AccessToken::VideoGrant.new
    grant.room = @room_name
    
    @token.add_grant grant
    @token = @token.to_jwt
    
  end

This code will first check the presence of sid (unique id used for Twilio unique rooms) in the database. If it is not available, it will generate the room in Twilio and store the sid in the database.

We are creating a unique string as a unique identifier for the Twilio room. (You can use the logged-in user’s name for it.)

It will create the Twilio token and video grant.

User Interface for Video Chat App

For building a user interface, open views/rooms/show.html.erb and use the below code. You can change the styling part as you like.

// views/rooms/show.html.erb.

Copy Text
<div class="row">
  <div class="col-9">
    <div id="remote-video">
    </div>
  </div>
   <div class="col-3">
    <div id="local-video">
    </div>
  </div>
</div>
<div class="row buttons-panel mb-5">
  <div class="col-12 d-flex justify-content-center align-items-center">
    <button class="btn btn-danger p-3 rounded-circle d-none" id="call-end-btn>
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-telephone-x-fill" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm9.261 1.135a.5.5 0 0 1 .708 0L13 2.793l1.146-1.147a.5.5 0 0 1 .708.708L13.707 3.5l1.147 1.146a.5.5 0 0 1-.708.708L13 4.207l-1.146 1.147a.5.5 0 0 1-.708-.708L12.293 3.5l-1.147-1.146a.5.5 0 0 1 0-.708z"/>
      </svg>
    </button>
  </div>
</div>

Add the following css style code in app/assets/stylesheets/rooms.scss

Copy Text
buttons-panel{
  position: fixed;
  bottom: 0;
  width: 100%;
}

#remote-video{
  border-radius: 15px;
  video{
    width: 100%;
    height: 770px;
    border-radius: 15px;
  }
}

#local-video{
  border-radius: 15px;
  video{
    border-radius: 15px;
    width: 100%;
    height: 300px;
  }
}

Connecting Twilio Rooms

Let’s write the code for connecting Twilio rooms.

Include the Twilio js in the show.html.erb file

Copy Text
<%= javascript_include_tag 'https://media.twiliocdn.com/sdk/js/video/releases/2.3.0/twilio-video.min.js' %>

Create a video_call.js file in the javascript/packs folder and include that file from application.js. And add the following code in that file.

// video_call.js

Copy Text
window.joinRoom = async function(room, token){

  const Video = Twilio.Video;

  const localTracks = await Video.createLocalTracks({
  audio: true,
  video: { height: 1080, frameRate: 24, width: 1980 },
  });
  try {
  room = await Video.connect(token, {
    name: room,
    tracks: localTracks,
    bandwidthProfile: {
      video: {
      mode: 'collaboration',
      maxTracks: 10,
      dominantSpeakerPriority: 'high',
      renderDimensions: {
        high: {height:1080, width:1980},
        standard: {height:720, width:1280},
        low: {height:176, width:144} 
        }
      }
    },
    dominantSpeaker: true,
    maxAudioBitrate: 16000,
    preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
    networkQuality: {local:1, remote: 4}
  });
  } catch (error) {
  console.log(error);
  }

  const localMediaContainer = document.getElementById("local-video");
  localTracks.forEach((localTrack) => {
    localMediaContainer.appendChild(localTrack.attach());
  });

  // display video/audio of other participants who have already joined
  room.participants.forEach(onParticipantConnected);

  room.on("participantConnected", onParticipantConnected);
  room.on("participantDisconnected", onParticipantDisconnected);
 $("#call-end-btn").removeClass("d-none");
 $("#call-end-btn").on("click",function() {
   onLeaveButtonClick(room);
 })

};

window.onParticipantConnected = function(participant){
  var remote_div = document.getElementById('remote-video');
  const participantDiv = document.createElement('div');
  participantDiv.id = participant.sid;

  const trackSubscribed = (track) => {
    participantDiv.appendChild(track.attach());
  };
  participant.on("trackSubscribed", trackSubscribed);

  participant.tracks.forEach((publication) => {
    if (publication.isSubscribed) {
    trackSubscribed(publication.track);
    }
  });

  remote_div.appendChild(participantDiv);

  const trackUnsubscribed = (track) => {
    track.detach().forEach((element) => element.remove());
  };

  participant.on("trackUnsubscribed", trackUnsubscribed);
};

window.onParticipantDisconnected = function(participant){
  const participantDiv = document.getElementById(participant.sid);
  participantDiv.parentNode.removeChild(participantDiv);
};

window.onLeaveButtonClick = function(room){
 room.localParticipant.tracks.forEach((publication) => {
    const track = publication.track;
    track.stop();
    const elements = track.detach();
    elements.forEach((element) => element.remove());

  });
  room.disconnect();
  window.location = '/';
};

This function will generate the local video and audio track and publish it in the Twilio cloud for the specific room using a token. And display your local video in DOM. It will do the same for other remote users of the same room and display the remote user’s video in your DOM.

When you click on the disconnect button, It will remove your video locally and from the Twilio room and redirect you to the index page.

Now call this function from your show page of the room. Add the below code in views/rooms/show.html.erb

Copy Text
<script>
  $(document).ready(function() {
    setTimeout(
      function() {
        joinRoom("<%= @room_name %>","<%= @token %>");
      }, 2000);
  });
</script>

Now go to your root path and create a room. After that, go to the show page of that room and wait 3-4 sec while Twilio js is loaded from CDN. Copy that URL and paste it into the incognito tab, and Here we go. Your video call app is ready.

The entire source code is available here: twilio-video-chat-app

Conclusion

I hope the tutorial was helpful, and you have decided to build your video chat application with Twilio, Rails, and JS. If you’re a ROR enthusiast, then the ROR tutorials page is for you! Visit the Ruby on Rails tutorials page; feel free to clone the github repository and play around with the code. Write to us if you have any questions or suggestions.

Even after following the tutorial, you might face some real-time errors and problems. In such scenarios, it would be advisable to hire experienced developers. Looking for skilled and dedicated ROR developers to integrate a video chat feature into your application? Without wasting a second, contact us to hire ROR developer.

Ruby On Rails Tutorials

Connect Now

Get In Touch

[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.