Adding Code to index.html

The index.html file is the main HTML template for the PexRTC project. This file defines the basic page structure and includes the PexRTC library.

Please note that this guide will not teach HTML, CSS or JavaScript. Instead, please refer to external sources to learn how these languages work and interact with each other.

First, open index.html and add the following code.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Pexip PexRTC VanillaJS Example</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body></body>
</html>

The above code is standard HTML used as a basis for the page.

Linking the CSS stylesheet

The CSS stylesheet is used to make the page look a certain way. In this project we are using a file called styles.css as the stylesheet. Add the following code to the <head> section to include the styles.css file.

<link rel="stylesheet" href="assets/css/styles.css" />

Adding the Google Roboto font

In order to make the page render the same across browsers, we will use the Google font CDN to serve the free Roboto font. This will mean that we have a consistent experience, and we can rely on the font spacing and sizing to keep our page consistent across browsers. Add the following code to your <head> section.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>

Using the pre-connect code allows our page to pre-connect to the CDN to get the fonts for faster serving.

Adding Font Awesome

Icons make things easier to interpret for a user. In this example, we have utilized the free Font Awesome 6 library to give us the icons we need to make our experience easy to use. We are using the CloudFlare CDN for this example, but you may host it locally. Add the following code to your <head> section.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

Linking the PexRTC Library

For this step, you will need a Pexip conference node. If you do not have one, please get in touch with your friendly Pexip representative to gain information on how to create a Pexip conference node. Then, add the following code to your <body>. Please note the <conf_node_url> is the URL of your conference node that is serving the pexrtc file.

<script
  type="text/javascript"
  src="https://au.pexipdemo.com/static/webrtc/js/pexrtc.js"
></script>

Linking our other scripts

We have three other scripts that were outlined above, call.js, preflight.js and ui.js. These will need to be loaded by the index to allow access to the methods within these files. Add the following code to your <body>. Please note that these must be loaded in the correct order.

<script src="assets/scripts/ui.js" async defer></script>
<script src="assets/scripts/preflight.js" async defer></script>
<script src="assets/scripts/call.js" async defer></script>

Adding our containers

To show content within the webpage in this example, we will be using five different containers. These will allow us to show and hide different screens based on the call state. For example, the preflight should not be shown when in a call, but the settings should be able to be toggled at any time. Add the following code to the <body> section of your index.html.

<div class="pageContainer" id="pageContainer">
  <div class="preflightContainer" id="preflightContainer"></div>
  <div class="callContainer" id="callContainer" style="display: none"></div>
  <div
    class="callSelfviewContainer"
    id="callSelfviewContainer"
    style="display: none"
  ></div>
  <div
    class="settingsContainer"
    id="settingsContainer"
    style="display: none"
  ></div>
</div>

An explanation of these containers is below. Note that the names come from the "class" tag of each container.

Some of the divs have display: none inside of their style tag. This is because they need to be defaulted to hidden and then will change their state as the call state changes or as they are requested to be shown/hidden.

Page Container

This container is used to style the page. It is merely used to apply top-level CSS to make the page sit in certain layouts. In this example we are using flex.

Preflight Container

This is the container for the preflight; it will contain all of the selections to specify your name, the URI to dial, and your microphone and camera. To complete this container, add the following code to the pageContainer div.

<div class="preflightTitle">Get Started</div>
<div class="preflightContent">
  <div class="preflightContentHead">Your Name</div>
  <div class="preflightContentBody">
    <input type="text" id="participantName" />
  </div>

  <div class="preflightContentHead">URI to Dial</div>
  <div class="preflightContentBody">
    <input type="text" id="dialURI" />
  </div>

  <div class="preflightContentHead">Video Device</div>
  <div class="preflightContentBody">
    <select class="videoDevices" id="videoDevices">
      <option value="loading">Loading...</option>
    </select>
  </div>

  <div class="preflightContentHead">Audio Device</div>
  <div class="preflightContentBody">
    <select class="audioDevices" id="audioDevices">
      <option value="loading">Loading...</option>
    </select>
  </div>

  <div class="preflightContentButton">
    <button onClick="connectCall()">Connect</button>
  </div>
</div>

The code above has added multiple fields to the pageContent div and has assigned IDs to elements such as the videoDevices dropdown. These IDs will be used later to populate the devices after they are enumerated and also used to retrieve the selected item or entered text.

Call Container

This is where the magic happens. The call container contains the PexRTC video element that will be used to show the far-end video. When the call starts, the video will be attached to the video element, and it will automatically start playing the video to the person using our example. The container also contains a popup for the user to enter a pin if requested as well as buttons for call control and a button to enter the settings popup. To complete this container, add the following code to its content.

<div class="callVideoContainer">
  <video id="farEndVideo" autoplay="autoplay"></video>
</div>
<div class="callVideoControls">
  <div class="callVideoControl" onClick="hangup()">
    <i class="fa-solid fa-phone-slash"></i>
  </div>
  <div class="callVideoControl" onClick="toggleMicMute()">
    <i id="micMute" class="fa-solid fa-microphone"></i>
  </div>
  <div class="callVideoControl" onClick="toggleVidMute() ">
    <i id="vidMute" class="fa-solid fa-video"></i>
  </div>
</div>
<div class="settingsButton" onClick="showSettings()">
  <i class="fa-solid fa-gear"></i>
</div>
<div class="callPinRequestContainer" id="callPinRequestContainer">
  <div class="callPinRequestWindow">
    <div class="callPinTitle" id="callPinTitle">...</div>

    <div class="callPinContent">
      <div class="callPinContentHead">Your Pin</div>
      <div class="callPinContentBody">
        <input type="text" id="pin" />
      </div>
    </div>

    <div class="callPinContentButton">
      <button onClick="enterCall()">Connect</button>
    </div>
  </div>
</div>

Call Selfview Container

The call self-view container contains a single video element that shows a loop-back of the local user's camera. This element needs to be set to autoplay and must also be muted to ensure that there are not and audio loops created. To complete this container, add the following code to the content of the element.

<video id="selfViewVideo" autoplay="autoplay" muted></video>

Settings Container

The settings container is a popup that shows over the page to allow the user to change the video device or the microphone that they have selected. This element contains a video and audio selector the same as the preflight. Devices will be populated when the devices are enumerated and then auto-selected when the user selects them.

<div class="settingsPopup">
  <div class="settingsPopupTitle">Settings</div>

  <div class="settingsPopupContent">
    <div class="settingsPopupHead">Video Device</div>
    <div class="settingsPopupBody">
      <select class="videoDevices" onChange="selectMedia()">
        <option value="loading">Loading...</option>
      </select>
    </div>

    <div class="settingsPopupHead">Audio Device</div>
    <div class="settingsPopupBody">
      <select class="audioDevices" onChange="selectMedia()">
        <option value="loading">Loading...</option>
      </select>
    </div>

    <div class="settingsPopupButton">
      <button onClick="closeSettings()">close</button>
    </div>
  </div>
</div>

Linking the CSS stylesheet​

Adding the Google Roboto font​

Adding Font Awesome​

Linking the PexRTC Library​

Linking our other scripts​

Adding our containers​

Page Container​

Preflight Container​

Call Container​

Call Selfview Container​

Settings Container​