How to add live video chat to your website using Ruby on Rails

1. Let’s create our rails app and cd in the folder

$ rails _5.2.4.1_ new videochat$ cd videochat

2. Generate scaffold for subjects (topics to teach)

$ rails generate scaffold Subject title:string teacher:string$ rails db:migrate$ rails server
fig 2.2. visit localhost:3000/subjects to add a few subjects and teachers

3. Create our controllers

$ rails generate controller Welcome index$ rails generate controller Sessions show

4. Define the routes

5. Let’s add some style

<body class="bg-blue">
<%= render 'layouts/navbar' %>
<%= yield %>
</body>
.bg-blue {
background-color: #6610f2
}
.bgbg {
background-image: url('https://github.com/mkezmkez/tech-me/blob/master/app/assets/images/banne.png?raw=true');
background-position: 100% 0;
background-repeat: no-repeat;
}

6. Embedding and styling the Daily.co video chat interface

def show
@subjects = Subject.all
@clicked = params[:subject]
end
<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
<script>
callFrame = window.DailyIframe.createFrame();
callFrame.join({ url: 'https://tutorial.daily.co/hello' })
</script>

7. Final touches & further customization

  • When we selected a subject and clicked on it, it sends the subject to the controller and returns true, which gives the instruction to run the script with the <% if @clicked %>
  • We added a javascript conditional if the width of the window is less than 400px, we would return the fullscreen video, on a cellphone screen, for example.
  • If it is bigger than 400px, we will run the video chat script in 50% of the width, 100% height which will suit better for bigger horizontal screens.

Conclusion

--

--

--

I am a web developer who believes in a world where UX/UI and back-end hold hands and run together in nature, and it’s beautiful.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Monthly Technical Development Report | MAR 2022

Gain Control by Breaking Dependencies — An Introduction

Must Consider Top Website Development Trends in 2020

Top 5 Project Tracking Tools for Managers and Startupers

How I exposed an entire PL/SQL based application as REST APIs in less than a week and saved tons…

DynamoDB Streams to ElasticSearch using Lambda (My Aws Stories)

From Looking For A Change to Software Engineer: My 2017 in Review

Bluehost Review: Prices, Ranking, Analysis, and Experience in 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Miguel Farias

Miguel Farias

I am a web developer who believes in a world where UX/UI and back-end hold hands and run together in nature, and it’s beautiful.

More from Medium

How to easily configure and integrate Bootstrap, jquery, tailwind, and many more to Rails.

Using Rail’s Active Storage to add an upload field to a React form.

Basics of Cross Site Request Forgery (CSRF), and ways to prevent it in NodeJs and Ruby on Rails

Process incoming emails in Rails 6 with Action Mailbox : from development to production