Live streaming using ROR, cloud front and S3

Streaming videos are one of the difficult jobs for many developers. Compare to images and remaining media formats videos are large in size. Hence, it is a frustrating experience for user waiting for long time to download the entire video. Then how to solve this problem? Here comes streaming. Streaming means constantly sending data into small chunks to end-user continuously to avoid problems mentioned above. But how to implement this solution. Here comes Amazon cloud front. As per Amazon here is the definition

“Amazon CloudFront is a global content delivery network (CDN) service that accelerates delivery of your websites, APIs, video content or other web assets through CDN caching. It integrates with other Amazon Web Services products to give developers and businesses an easy way to accelerate content to end users with no minimum usage commitments.”

Using cloud front we can stream the video content that has been stored on S3. Below are the steps to follow:

Creating Cloud front distribution:

First sign in into AWS account, then go to cloud front under Content & Network delivery section. Since we are doing live streaming we need to register a web distribution. Two options are most important while creating a distribution. 1) Origin Domain name and 2) SSL certificate. Origin Domain name is nothing but S3 bucket where your media content has been stored. For SSL certificate I would prefer to go with Default CloudFront Certificate since we want to stream through cloud front instead of custom domain. For remaining, you can go with default options.

Origin settings:

Since we want to stream the content through cloud front we need to restrict S3 bucket access to cloud front user only. To make this happen we need to add restriction policy to our S3 bucket through policy generator. Once you added a policy, it would available in your origin identities. By adding this we can restrict S3 bucket will be accessible through cloud front only.

For more details about configuration go through this video tutorial

Generating streaming URLs:

1) Create cloud front key pair to create cloud front URLs. You can create this by using cloud front key pairs under My security credentials.

2) Add aws-sdk to your Gemfile

3)

      # app/controllers/streams_controller.rb

      # To create signed cloud front URLs. Using this we can restrict video access.
      signer = Aws::CloudFront::UrlSigner.new(key_pair_id: <cloud front access ket>,
                                            private_key_path: <cloud front public key>)

      @url = signer.signed_url(<cloud front URL>/<Name of the video which you want to stream>, 
                               expires: Time.zone.now + 10.minutes)
       
   

Note: You can get cloud front URL from cloud front distribution.

Streaming:

To stream video, I am using html5box player.

# app/views/streams/show.html.erb

<div style="display: block; margin: 0px auto; position: relative; max-width: 100%; height:700px;"   class="html5gallery" data-responsive="true" data-responsivefullscreen="true" data-html5player="true" data-skin="darkness" data-width="800" data-height="450" data-showtitle=="false" data-autoplayvideo="true"  data-autoslide="true" data-effect="slide" data-showimagetoolbox="none" data-showplaybutton="false" data-showprevbutton='false' data-shownextbutton='false' data-showcarousel='false'>

  <a href="<%= @url %>"><img src="http://img.youtube.com/vi/YE7VzlLtp-4/2.jpg"></a> 
</div>

Note: html5box not only renders video but also it renders images & gifs as well.

Once you access show page then it starts streaming through cloud front. You can verify from your network tab of your browser.

Happy streaming!!!

Advertisements