Video Messaging in Rails

We've been working with our friends at the Chins Up Foundation to develop an innovative application connecting youth with college athletes through a pen-pal mentorship program. Recently, we were requested to add video messaging to the application. Here I'll take you step-by-step through the process of adding video messaging to your Rails 4.2.6 messaging application and get it up and running on Heroku.

Paperclip

Paperclip is an easy file management system for Rails apps. We will use it to store our audio/video files as attachments. Paperclip uses the AWS SDK gem to store the files on an AWS server. Paperclip-av-transcoder is a great audio/video transcoder for Paperclip that will convert your media files into a format that will work for Paperclip. Add the following gems to your Gemfile and run bundle on the command line:

RecordRTC

RecordRTC is an entirely client-side JS library that can be used to record WebRTC audio/video media streams. To use, simply copy the recordrtc.js and whammy.js files into your vendor/assets/javascripts directory. Add them to your config/application.rb file:

The method for accessing the computer (or other device)'s camera and microphone is different depending on the type and version of the browser. The following code selects the appropriate method for accessing the user's camera and audio and passes in the constraints.

if(navigator.mediaDevices==undefined){navigator.mediaDevices={};}if(navigator.mediaDevices.getUserMedia===undefined){navigator.mediaDevices.getUserMedia=function(constraints){vargetUserMedia=navigator.webkitGetUserMedia||navigator.mozGetUserMedia;if(!getUserMedia){returnPromise.reject(newError('getUserMedia is not implemented in this browser'));}returnnewPromise(function(resolve,reject){getUserMedia.call(navigator,constraints,resolve,reject);});}}

Now that we have the appropriate method for accessing the camera and microphone, let's record the video and audio (and handle errors)!

Heroku

Now that we have our video messages working great locally, let's push it up to our Heroku instance so our users can use it! Assuming you've already created a Heroku instance with a Ruby buildpack, when you push your new code up to Heroku you will notice that you are unable to upload your video messages to the server. This is because you need to add the Ffmpeg buildpack! Heroku recently changed how to use multiple buildpacks, so make sure you use this method to ensure it works (until Heroku changes it again :-)):

First, check what buildpacks you are currently using. You should see heroku/ruby.

In order to fully implement the new buildpack, you will need to deploy your code to Heroku. Now your video messaging should work like a charm! I hope this tutorial was easy to follow and informative. I look forward to your feedback!