• webserver.js : a NodeJS Express HTTP Server that serves the client files and generates Twilio video tokens.
• docroot/index.html : Client HTML, basic video client application
• docroot/video.js : JavaScript code.
• docroot/video.css : Web page styles and formatting
• app.json and package.json, file descriptures for deploying to Heroku.
• docroot/index.php : Sample PHP generation of a token that would be used.

For testing, check and close rooms:

• lpListAllRoomsParticipants.js : program to list all rooms and their participants.
• lrListAllVideoRooms.js : program to list all active rooms.
• crCompleteAllRooms.js : program to close all rooms (room status set to "completed").

JavaScript based on:

• documentation samples.

Run locally, download the files and run:

$ node webserver.js

The following is implemented and tested:

• User can preview their local video track to test their camera.
• User can enter their identity that will be used when they get a token and enter a room.
• User can enter a room name and join the room. Before entering the room, a token is generated to gain access to the room.
• A second participant can join the room. When they do, each participant can view the other's video track. I believe audio is working, but have not tested it.
• Participants can leave a room. When they leave, the tracks are stopped and are no longer displayed locally and remotely.

To do:

• Handle more than 2 participants in a room.
• Mute and unmute audio during a session.
• Turn video track off and on during a session.

This section documents video.js, the client JavaScript code.

window.onload : initialize log message text box. Bind functionality to HTML buttons in index.html

previewLocalTracksAttach() : in the HTML DOM, append the local Twilio Video video track DIV, into a DIV container.

Before attaching video track:
    <div id="local-media"></div>
After attaching video track:
    <div id="local-media"><video autoplay=""></video></div>

previewLocalTracksDetach : in the HTML DOM, remove the local Twilio Video video track DIV, from the DIV container.

Before detach video track:
    <div id="local-media"><video autoplay=""></video></div>
After detach video track:
    <div id="local-media"></div>

joinRoom() : connect to a room using a Twilio Video token and connection options.

• Preview local video track: previewLocalTracks().
• Attach the tracks of the room's current participants: attachParticipantTracks(participant)
• Set room event handling: participantConnected, participantDisconnected, and disconnected(you disconnect).

attachParticipantTracks(participant) : in the HTML DOM, append the remote participant's Twilio Video video track into a DIV container. Use the participant's identity for the appended DIV's ID.

Before attaching participant video track:
    <div id="remote-media-div">remote-media</div>
After attaching video track:
    <div id="remote-media-div">remote-media<div id="stacy"><video autoplay=""></video></div></div>

Room event: disconnected.

• Detach the local media video track.
• Remove all remote participant DIVs.

Room event: participantConnected.

• Attach the tracks of the room's current participants: attachParticipantTracks(participant)

Room event: participantDisconnected.

• Remove the the listeners for this participant.
• Remove remote participant DIV.

Before detaching participant video track:
    <div id="remote-media-div">remote-media<div id="stacy"><video autoplay=""></video></div></div>
After detaching video track:
    <div id="remote-media-div">remote-media</div>

Programmable Video Getting Started: JavaScript steps to create a video client web application.

Generate tokens documentation with a sample Node.JS program

Programmable Video Tutorials

Part 1: Creating a server with Node/Express

Part 2: Creating the web client Frontend

Cheers...