Sweshi's Tutorials

Series Links

• Installation
• Video Page
• Creating the Client Script
• Event Handlers, Methods and Propertis
• Creating the HTML buttons
• Creating the Event Listeners
• Creating a Signalling Server
• Creating a Texting App 1
• Creating a Texting App 2
• Creating a Data Transfer App Part 1 (Advanced)
• Creating a Data Transfer App Part 2 (Advanced)

---

Beginner Friendly WEB RTC Tutorial

Creating the HTML page

The first thing we need to do is to get the user’s permission to use their media. This will include using the webcam and the microphone among other things. We first create a video page in HTML first and then create a script that activates the media and uses it to record our side. To create the video page, open the document using a text editor. I am using notepad++ which can be download from this link. Write the following code inside the page. .

• Line 7: The body tag in line 7 has been created with an onload function set to run when the page loads. This function will be created later on in the script.
• Line 8: The video tag can then be created with an ID of “videoplay” so that it can be easily pulled in the JavaScript code. Fill free to change the size of the video width or height to suit your needs. The video attribute autoplay is also enabled in this case so that the video can start playing back the webcam’s footage.
• Line 9: I linked to a JavaScript file called “client.js” to host the client side JS code. This file needed to be created in the same folder.