Sweshi's Tutorials

Series Links

Beginner Friendly WEB RTC Tutorial

Creating the Event Listeners
Share to Facebook

We will go to our client.js script and from there we will create a global variable as the first line of the script. This should be just on top of the getMediaDevices() function. We want to be able to manage aspects about the stream such as the video and audio tracks so we will make it accessible as a global variable.


WebRTC adding the stream variable

We will then modify the getMediaDevices() function as shown in the figure below.


WebRTC adding the stream variable

Take note of the changes

  • Line 9: the variable is set to the value of the stream.
  • Line 11: we call a function called setuptEventListeners() and pass the variable to it. At this point the function is not created yet but it will be responsible for handling the function once buttons are clicked. Because of that, it needs access to the media stream so that the button clicks can manipulate it.
  • Line 20: we call a function called createDataChannel(). This has also not been created yet but will be used later. For now we will create an almost empty function with the same name just underneath this code.

The function should look as shown in the figure below. This should follow the getMediaDevices() function.


WebRTC adding the stream variable
  • Line 19 is the closing bracket for the getMediaDevices() function.
  • Line 22 is where the createDataChannel() function is created.
  • Line 23 is where were create a new connection. This is for a peer-to-peer connection that WEBRTC uses between the parties communicating. This connection will later allow us to send data to another peer. We can then go on and create out setupEventListeners() function. This function will have to setup all the buttons we created in the index.php. Write the code as shown in the figure below.

WebRTC adding the stream variable
  • Line 25 – The function is created and is setup to receive the stream from the getMediaDevices() function.
  • Line 27 – we call the HTML button using it’s ID and add a click event for it. A function for the click event is created and this is what we use to view the track information from.
  • Line 29 – Using the stream variable, we get all the audio tracks using the getAudioTracks() method which returns an array of all the tracks. To view each track we write a “forEach” loop that allows us to log to the console some things about each track. This function is closing in line 36.
  • Line 30 – We log to the console the track id.
  • Line 31 – We log to the console the status of the audio. Is it enabled or disabled?
  • Line 32 – We log to the console the kind of track this is.
  • Lines 33 – 35 I show how the audio track can be enabled or disabled in a case were the user wants to disable or re-enable their microphone.
  • Line 37 – The event listener is finished and closed.

We are also able to specifically pick out certain tracks using their IDs. This can be done as shown in the figure below. This will use the button whose Id in HTML was “btnGetTrackByID.” Since the tracks are collected as an array, to work with any single track, we need to use array syntax to specify the track we are interested in.


WebRTC adding the stream variable

  • Line 40 – We log to the console the specific track by collecting one track using the array index.

We can then get all the tracks regardless of whether they are audio or video using the HTML button whose id was “btnGetTracks.”


WebRTC adding the stream variable
  • Lines 44 -49 – Notice that we use the getTracks() method rather than the getAudioTracks() method. This is more generic and collects audio and video tracks. For each track we will still show the track id, type of track and whether it is enabled or not.

We can then go on and get only the video tracks using the HTML button whose ID is “btnGetVideoTracks”, and also show how to remove audio or video tracks.


WebRTC adding the stream variable
  • Line 50 – We create the event listener for getting the video tracks
  • Lines 52 – 55 – We have used the getVideoTracks() method and I log the track ID and the track kind.
  • Line 57 – We create the event listener for removing audio tracks.
  • Line 59 – we create a constant that stores all the audio tracks.
  • Line 60 – We check if there are any audio tracks using the if statement.
  • Line 61 – We store the first audio track in the array.
  • Line 62 – We then remove the audio track that we stored in the previous line.
  • Lines 65 – 72 we do exactly the same thing but for the video tracks.

This is how the final code should look when everything has been written correctly in the client.js file.


WebRTC adding the stream variable

WebRTC adding the stream variable

WebRTC adding the stream variable

Open the Console on your web browser and test to see if there is everything is working correctly. For most browsers you can right click the page and click on inspect. From there you can select the console tab. You can try clicking all the buttons and see what the console displays. The audio and video should be removed if the “remove audio track” and “remove video track” buttons are clicked. Here is how my console looks.


WebRTC adding the stream variable