Video chat with shared text area

This demo shows how to use the rtc module to start a shared session, render the local and remote users' video streams, and use a data channel to create a shared text area for users.

Include the bundled rtc module in your HTML page (get the latest build from https://github.com/rtc-io/rtc/tree/master/dist). The rtc module can also be loaded using require.js.

<script src="path/to/rtc.js"></script>

First we will need to define the options to pass into RTC. A room and a signalling server are required - you can use our hosted signalling server //switchboard.rtc.io for testing purposes. The rtc-switchboard module is also available to deploy on your own servers.

var rtcOpts = {
    room: 'test-room',
    signaller: 'https://switchboard.rtc.io'
  };

Now we can call RTC to start a session. This will automatically create the local and remote video streams, which we will add to our page later.

var rtc = RTC(rtcOpts);

We'll need references to the DOM elements that we want to add our video streams to.

// A div element to show our local video stream
var localVideo = document.getElementById('l-video');
// A div element to show our remote video streams
var remoteVideo = document.getElementById('r-video');

Then we can append the rendered video streams that RTC has created.

// Display local and remote video streams
localVideo.appendChild(rtc.local);
remoteVideo.appendChild(rtc.remote);

We'll also need a reference to a contenteditable element for our users to share text with each other.

// A contenteditable element to show our messages
var messageWindow = document.getElementById('messages');

Before we can start sharing text via a data channel we need to wait for the signalling server to create our session. The rtc module fires a ready event when our session is ready to work with.

// Detect when RTC has established a session
rtc.on('ready', init);

Once a session is established we can create a data channel and listen for it's opened event.

// Start working with the established session
function init(session) {
  session.createDataChannel('chat');
  session.on('channel:opened:chat', bindDataChannelEvents);
}

Finally, bind the data channel events so that our users can update the shared text box.

// Bind to events happening on the data channel
function bindDataChannelEvents(id, channel, attributes, connection) {

  // Receive message
  channel.onmessage = function (evt) {
    messageWindow.innerHTML = evt.data;
  };

  // Send message
  messageWindow.onkeyup = function () {
    channel.send(this.innerHTML);
  };
}

Here's the full script:

// Set RTC options.
var rtcOpts = {
    room: 'test-room',
    signaller: 'https://switchboard.rtc.io'
  };
// call RTC module
var rtc = RTC(rtcOpts);
// A div element to show our local video stream
var localVideo = document.getElementById('l-video');
// A div element to show our remote video streams
var remoteVideo = document.getElementById('r-video');
// A contenteditable element to show our messages
var messageWindow = document.getElementById('messages');

// Bind to events happening on the data channel
function bindDataChannelEvents(id, channel, attributes, connection) {

  // Receive message
  channel.onmessage = function (evt) {
    messageWindow.innerHTML = evt.data;
  };

  // Send message
  messageWindow.onkeyup = function () {
    channel.send(this.innerHTML);
  };
}

// Start working with the established session
function init(session) {
  session.createDataChannel('chat');
  session.on('channel:opened:chat', bindDataChannelEvents);
}

// Display local and remote video streams
localVideo.appendChild(rtc.local);
remoteVideo.appendChild(rtc.remote);

// Detect when RTC has established a session
rtc.on('ready', init);

And here's the full HTML page to go with it:

<!DOCTYPE html>
<html>
<style>
    #messages {
        border: 1px solid black;
        min-height: 20px;
    }
</style>
<script src="../rtc.min.js"></script>
<body>
    <div id="messages" contenteditable></div>
    <div id="l-video"></div>
    <div id="r-video"></div>
    <script src="rtc-video-chat.js"></script>
</body>