Scribd
Upload
46 views10 pages

3-Basic Coding With WebRTC

This document provides an overview of the key topics covered in a WebRTC tutorial, including initializing a project, establishing peer-to-peer connections, call and answer procedures, displaying video streams, getting usernames, counting connected users, sending text and files, screen sharing, and closing connections. Each section provides high-level steps for implementing the different aspects of building a WebRTC application.

Uploaded by

jiplakilmu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views10 pages

3-Basic Coding With WebRTC

This document provides an overview of the key topics covered in a WebRTC tutorial, including initializing a project, establishing peer-to-peer connections, call and answer procedures, displaying video streams, getting usernames, counting connected users, sending text and files, screen sharing, and closing connections. Each section provides high-level steps for implementing the different aspects of building a WebRTC application.

Uploaded by

jiplakilmu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like