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 [Link] requires the
process of initialization.
o The purpose is to generate '[Link]' 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 [Link] 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 [Link] and [Link] library to HTML
page.
o Declaring peerServer and [Link] handler on
[Link] 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 [Link] 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 [Link]
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