Rare Course

Step-by-step | 2023

WebRTC Tutorial
Section. #3 – Basic Coding with WebRTC

Initialize Project Establising Peer-to-Peer Connection

Call and Answer Procedures Displaying Video Stream of Users
Getting Usernames Counting Connected Users
Sending Text & Files Screen Sharing Closing The Connection

All Levels
Initialize Project Rare Course

o Any application built with Node.js requires the

process of initialization.
o The purpose is to generate 'package.json' file
which contain some information about the
project.
o Dependencies used, configuring the first file to
execute, etc. This ensure the ease of use.
o Steps required:
o Open terminal
o Initialize project
o Installing dependencies
o Creating Express.js server
o Run the server
o Stop the server

WebRTC Tutorial | 2023 All Levels

Establising Peer-to-Peer Connection Rare Course

o Video conference uses “call” and “answer”

functions oftenly during communication.
o Before the functions can be made, a peer-to-
peer (P2P) connection must be established
first.
o Steps required:
o Import socket.js and peer.js library to HTML
page.
o Declaring peerServer and socket.io handler on
Express.js server.
o Declaring peerClient on WebRTCHandler.
o Make a “call” function.
o Make an “answer” function.
o Close the connection

WebRTC Tutorial | 2023 All Levels

Call and Answer Procedures Rare Course

o In order for peers to communicate, one of them

must “call” the other much like making a
phone call.
o To do so, some procedures must be executed.
o Steps required:
o Add a call trigger, e.g. by pushing button.
o Make an answer procedure to pick up the call.
o Enable microphone to send audio.
o Communication occurring.

WebRTC Tutorial | 2023 All Levels

Displaying Video Stream of Users Rare Course

o As previously mentioned, WebRTC not only

for audio communication but also allow for
video and data transfer.

WebRTC Tutorial | 2023 All Levels

Getting Usernames Rare Course

o WebRTC and Peer.js provide no method to

retrieve the name of connected users.
o Thus, we must develop our own procedures to
do it.
o Here’s how:
o Make sure connection has been established.
o Begin with the caller to send user name using
data transfer method.
o Secondly, the answerer must reply by sending
back its user name to the caller.
o That way, user names can be retrieved by both
users.

WebRTC Tutorial | 2023 All Levels

Counting Connected Users Rare Course

o In practice, a p2p connection might’ve been

established during video call/conference, even
if the video stream failed to be displayed.
o It is highly recommended that users are
counted based on the number of videos that
appear to avoid miss understanding.

WebRTC Tutorial | 2023 All Levels

Sending Text & Files Rare Course

o WebRTC allows data transfer on a p2p

communication.
o Sending text means sending text datatype using
this method.
o As for file sharing, it is provided by Node.js
framework. Hence not using WebRTC directly
to do it.

WebRTC Tutorial | 2023 All Levels

Screen Sharing Rare Course

o A WebRTC video conference often include this

facility to make meeting more interactive.
o The principle to execute screen sharing is
pretty like making a call and send the video
stream to the receiver.
o That means, to share the screen to many people
is the same as to make many
additional/separate call to the users.

WebRTC Tutorial | 2023 All Levels

Closing The Connection Rare Course

o WebRTC automatically handle the closed

communication so that users need not to worry
about the steps.
o One can close tab browser to do it, or based of
more formal procedures, such as clicking leave
meeting button.
o If app developer needs to make extra result
when user leave meeting, for example a pop up
dialog appear when someone leaving, then this
process must be handled properly.
o Benefits of handling this process:
o Prevent user video error during meeting, like
video turn to black after the user leave.
o Trigger additional function to be executed,
such as notification to tell everyone that a user
has left.

WebRTC Tutorial | 2023 All Levels