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 Client Script

• Line 1 – We create a function name that is based on the function name given in the body onload of the ../index.php so that the function runs automatically when the page loads.
• Line 2 – We create the if statement that checks whether the browser supports the media devices, i.e., camera and microphone and if we can capture from them.
• Line 3 – We create a variable called videoElement to collect the video tag from ../index.php page based on the ID it was given which was “videoPlay”.
• Line 4 – We then capture the audio and video from the media devices.
• Line 5 – We then pass the captured media as the function’s argument “stream”.
• Line 6 – The video element is then given a source from the captured media. This makes the video element to be receiving the video and audio on the page.
• Line 7 – We then play the stream in real time.
• Line 9 – We then write a function that receives any error message that the getUserMedia object might throw.
• Line 10 – We print the error in the console.
• Lines 13 -16 – we close the if statement with an else. In the case that the browser does not support webrtc, we can print the message and let the user know.

If everything has been followed well, you should save the code and refresh the web page and you should be able to see a simple prompt asking for permission to use the camera and microphone.

After you allow the permissions, you will be able to see the video stream on the web application as shown in the figure below.