• Home
    >
  • Blog
    >
  • Build Your Live-Streaming Service with Ruby on Rails and TokBox

Build Your Live-Streaming Service with Ruby on Rails and TokBox

Live streaming services development is one of the fast-growing trends in current mainstream development. There are numerous examples of the ways live videos can be used in. There is an online video chat for small groups, live Yoga classes, an online doctor appointment service, live gaming, etc. Have you ever been curious about the difficulty of building a live-streaming service? If you’ve had, we’ll surprise you: it can be done just in an hour! Let us suppose that you are not going to build everything from scratch, and you’ll just connect some already existing technologies with each other to create something new instead.First of all, you will have to sign-up on https://tokbox.com/ and get your API key, and a secret token for further usage in the Rails app. This process is pretty straightforward and you’ll find all necessary keys right on the dashboard as soon as the registration is completed. That’s it!

Step 1. Create new app and add some configuration

Let’s begin with the creation of a new Rails app. For this purpose we recommend you to use Rails 4:

<pre>$ rails new live-streaming</pre>

Once it’s done, let’s add some gems to our Gemfile:

<pre>gem 'figaro' # we'll use it to store our API keys</pre>

<pre>gem 'gon' # this one to expose our API keys to JS</pre>

<pre>gem 'opentok' # SDK to use TokBox library</pre>

<pre>gem 'devise' # I bet you know whats is it :)</pre>

And run

<pre>$ bundle</pre>

We’ll use gon gem to expose session ID of the stream to the browser as JS variable. To be able to access JS variables, make sure to add the folowing line into to the application layout file:

<pre><%= Gon::Base.render_data %></pre>

We’ll use figaro gem to expose our secret API keys to the Rails.

<pre>$ bundle exec figaro install</pre>

It will create config/application.yml where we’ll store our API keys to access the OpenTOK.

You should put your API keys there which you’ve got from the TokBox website:

<pre>opentok_api_key: paste_your_api_key</pre>

<pre>opentok_api_secret: paste_your_secret_key</pre>

Now, these variables will be accessible from our Rails app using Figaro.env object:

<pre>Figaro.env.opentok_api_key</pre>

<pre>Figaro.evn.opentok_api_secret</pre>

Pretty handy, isn’t it?

Step 2. Add OpenTok client

To connect to the OpenTOK platform and use their AP, we have to add a client.

To achieve that, let’s create an initializer file in /config/initializers/: we’ve added a simple constant for the OpenTok client, whicht allows us to access it anywhere in the Rails app.

Now we have to make sure that it works properly.

Open the rails console and try to create a new session for OpenTok:

<pre>$ rails c</pre>

<pre>>OpenTokClient.create_session</pre>

You’ll see the dump of a newly created OpenTOK session.

Step 3. Generate some models

First, let’s install the Devise and create a user model with the help of the device generator.

<pre>$ rails g devise:install</pre>

<pre>$ rails g devise user</pre>

After that, we’ll generate stream resources able to create a model, migration, a controller and some scaffolds for scripts and tests.

<pre>$ rails g resource stream user:references desc:text status:string tokbox_session_id:string</pre>

We’ll have to set the routes root to the point to our stream:

<pre>root 'user#stream'</pre>

We’ll also need to add simple references to our models and a callback to generate a new session ID for the each new stream.
This is how the models will look at this stage:

https://gist.github.com/BitOfUniverse/c72232677705b54e94ce850843eb4baa

User model

https://gist.github.com/BitOfUniverse/090b5c76b8072164f5870cc616abe7af

Stream model

Then run migrations and we are set for now.

<pre>$ rake db:migrate</pre>

Step 4. A little of coffee script and html

This part is pretty simple,too, so we’ll just need two different actions: to watch and to stream the video. It means that we have to create:

  1. two controller actions
  2. two views for these actions
  3. two JS files for these views
  4. new routes

Actions

https://gist.github.com/BitOfUniverse/10acf4aaaacdbc851c8fb59b51479bdc

At first, we have to generate a new token each time anew when we are going to stream or watch the video. OpenTok SDK provides a method called generate_token which requires session_ID as first arguments, and also accepts options hash to set additional data and capabilities for the token.
Read more here on the token creation process: https://www.tokbox.com/developer/guides/create-token/

Views

https://gist.github.com/BitOfUniverse/4aa89897337ee7fdbd345f31cb1d289c
https://gist.github.com/BitOfUniverse/b98a45a4521221cc4d6c22697c9abe62

Coffee

Place these watch.coffee and stream.coffee files under the app/assets/javascripts folder:
https://gist.github.com/BitOfUniverse/9dc448df58efcfc95c2fd7f80b488da0
https://gist.github.com/BitOfUniverse/2558c3fb184c81f8b3862bc3a491ea0d

Routes

https://gist.github.com/BitOfUniverse/0ffe2536272a4a510a4ffc716f389957

Step 5. Run the app!

Finally, it’s high time to run our own stream!

Run rails server

<pre>$ rails s -p 3000</pre>

You are welcome to visit your app on http://localhost:3000, so after a quick signup process you’ll be able to start your own stream and watch it.

Step 6. How to deploy the app on Heroku

If you want to make you app open to public and let other people get connected  and watch the  streams, you can deploy it to Heroku in few minutes.

  1. $ git clone git@github.com:BitOfUniverse/broadcaster.git
  2. $ cd broadcaster
  3. add your OpenTok api keys to config/application.yml
  4. $ heroku create
  5. $ figaro heroku:set -e production
  6. $ git push heroku master
  7. $ heroku open

That’s it! Now you have made sure that building a live-streaming service really is a quick and time-saving process.

References:

Source code: https://github.com/BitOfUniverse/broadcaster

Read more on OpenTok API usage:
https://www.tokbox.com/developer/guides/create-token/

https://www.tokbox.com/developer/guides/create-session/

Oops! Something went wrong while submitting the form. Please, check the entered values.

Latest Articles

Development
Why Choose Ruby on Rails for MVP Development
Startups
Lean Startup as a Core Strategy: Short Review & Tips
Insights
Why Business Analysis Is a Treasure Trove in Software Development Projects

Subscribe via email and know it all first!

Privacy Policy

Subscribe via email and know it all first!

Thank you for your contact
Oops! Something went wrong while submitting the form. Please, check the entered values.