Rare Course

Step-by-step | 2023

WebRTC Tutorial
Section. #4 – Creating WebRTC Video
Conference App

Project Directory Structures Build The UI First!

Create & Run Express Server Coding for Start Meeting
Coding for Join Meeting Microphone Control
Camera Control Screen Sharing Feature,…

All Levels
It’s better if you… Rare Course

o Know WebRTC framework: definition,

working principle, etc.
o Understand the idea of video conference vs
chat/call applications.
o Installed Visual Studio Code, Node.js
framework and Chrome browser.
o Downloaded project resources.
o Configured ExecutionPolicy on Windows OS.

WebRTC Tutorial | 2023 All Levels

Project Directory Structures Rare Course

WebRTC Tutorial | 2023 All Levels

Build The UI First: Frontpage Rare Course

o Begin your coding with the easiest task first.

o UI is the esiest to build.
o It helps the implementation faster.
o Start with frontpage (start & join meeting).
o Steps required:
o Opening ‘frontpage.html’ File
o Generating HTML Tags
o Adding Favicon, Title and CSS
o Remove Margins and Paddings
o Add Background
o Making Start Meeting Layout
o Adding CSS to Start Meeting Layout
o Start Meeting Contents
o Adding Style to Start Meeting Content
o Adding Join Meeting Layout and Content
o Join Meeting CSS
o Adding Flip Animation

WebRTC Tutorial | 2023 All Levels

Build The UI First: Meeting Room Rare Course

o Meeting room is the place where all

users gather and communicating
with each other.
o Steps required:
o Opening File then Change the
Background
o Create Meeting Room Layout
o Showing The Logo
o The Header
o Adding Main and Mini Video
o Adding Control Buttons
o Chatting Room Area

WebRTC Tutorial | 2023 All Levels

Create & Run Express Server Rare Course

o Server is the main unit that handle all WebRTC

video conference processes.
o System won’t work without server.
o Tasks handled:
o Displaying frontpage
o Start meeting
o Join meeting
o Screen sharing, and so on.
o Steps required:
o Initializing The Project
o Installing Dependencies
o Creating The Server
o Running The Server

WebRTC Tutorial | 2023 All Levels

Coding for Start Meeting Rare Course

o As the name imply, start meeting is a function

or feature that allow user to create a new
meeting, using username and passcode.
o Meeting that’s never been made cannot be
accessed.
o There are 2 ways to start a meeting, which are
instantly create it or make a scheduled one.
o In this course, we will discuss only how create
an instant meeting, because audience can add
the scheduled meeting feature by mastering
this course 
o Do this to create the procedures of start
meeting…

WebRTC Tutorial | 2023 All Levels

Coding for Join Meeting Rare Course

o Join meeting is another feature of video

conference, that allow user to enter a meeting
that’s already been made by previous user.
o In order to successfully join a meeting, user
validation will be executed, which examine the
meeting invitation and passcode.
o Do this to create the procedures of join
meeting…

WebRTC Tutorial | 2023 All Levels

Microphone Control Rare Course

o Controlling microphone is important during a

video conference meeting.
o Do not disturb anyone with unintended noise.
o This feature can enable or disable the
microphone device, to stop it capturing sound.
o Do this to implement microphone control.

WebRTC Tutorial | 2023 All Levels

Camera Control Rare Course

o Controlling camera is also important during a

video conference meeting.
o It can reduce the amount of bandwidth spent
during meeting and speed up laggish video
stream.
o Block unwanted video capture during meeting
to keep privacy.
o This feature can enable or disable the webcam
device, to stop it capturing video.
o Do this to implement video control.

WebRTC Tutorial | 2023 All Levels

Screen Sharing Rare Course

o This feature is very important for video

conference and the one that differentiate it
from a video call/chat.
o Participants can understand you more when
you show them the screen.
o This feature can capture your screen activity
and send it to others, with 3 options: entire
screen, app window, or this screen.
o Do this to implement screen sharing option.

WebRTC Tutorial | 2023 All Levels

Record Meeting Rare Course

o This feature is also important for so that all

information/activity of the meeting can be
documented and watched over again later.
o Participants can replay the meeting video by
watching the recorded result.
o This feature can capture your screen activity
and download it in “.mp4” format, with 3
options: entire screen, app window, or this
screen.
o Do this to implement record option.

WebRTC Tutorial | 2023 All Levels

Text Chat Rare Course

o Often we need to communicate without

making noise during meeting.
o This feature which allow users to send text to
each other.
o There are 2 methods to text chat, which are
send to all or to specific user.
o However in this course is only discuss to send
the message to all participant. Audience can
enhance the app after mastering this course.
o Do this to implement text chat option.

WebRTC Tutorial | 2023 All Levels

File Sharing Rare Course

o Beside screen sharing, participants also need

the ability to share files among themselves
during meeting.
o There are 2 methods to share file, which are
send to all or to specific user.
o However in this course is only discuss to send
the file to all participant. Audience can
enhance the app after mastering this course.
o Do this to implement file sharing option.

WebRTC Tutorial | 2023 All Levels

Leave Meeting Rare Course

o It is usual and recommended to close a meeting

with the right procedures, not just leaving.
o This feature will help user to leave meeting in
a manner that’s more polite.
o Do this to implement leave meeting option.

WebRTC Tutorial | 2023 All Levels

Securing Codes Rare Course

o Because WebRTC is developed based on

Javascript technology, then the code will be
displayed in browser when user use the option
to show it.
o To prevent your code being shown, may be
because the codes are fancy  then do this
step.

WebRTC Tutorial | 2023 All Levels