Client Messaging in a Dolby.io Video Conference

The Dolby.io Interactivity API CommandService can be used to send both text and data between participants that are connected to a session. 

It is a messaging framework that allows triggering actions for other participants in the conference or broadcasting text messages to other participants. Other use cases could be: 

• trigger actions in the UI for other participants, such as pop up chat window
• send basic text messages (check out Stream for a chat service with a rich text editor)
• broadcast messages to remote participants
• mute a remote participant 
• remove other participants from a conference if necessary as the “host” of a conference or as a presenter

⚠️ Note

CommandService messages can only be sent to participants of the current conference session. If a participant is outside of a conference, they can neither send nor receive messages.

This project demonstrates how to to use this service with JavaScript. To follow along, here is the GitHub repository, and for more information or to see other Client SDKs visit the documentation:

• Javascript (Web)
• iOS
• Android

Sending a CommandService event to all participants in a session

To send a command to all participants in a session, call the `send()` method of the Command object:

VoxeetSDK.command
          .send({dataPayload: "hello"})
          .then(() => {})
          .catch((err) => {
            console.log(err);
          });

This will send a command message to each participant in the session. 

Receiving CommandService events in a session

To receive commands send in a session, add an event listener for the ‘received’ event dispatched by the Command object. 

VoxeetSDK.command.on('received', (participant, message) => {
  let dataParsed = JSON.parse(message);
  console.log("Command received, message: " + dataParsed.dataPayload)
}

Using CommandService to Implement Avatar Arrow Control Example

In this sample web application, four users can join a call and control their own stick figure avatar with arrow keys. CommandService is what allows the other users on the call to see the other avatars move on their own screen. 

When a user presses down on the left arrow key, for example, the following code is executed: 

const leftArrowPressed = (avatar) => {
  if (parseInt(avatar.style.left) - 5 < 0) {
    // don't allow avatar to move beyond boundary
    return;
  } else {
    // move participant's own avatar
    avatar.style.left = parseInt(avatar.style.left) - 5 + 'px';
    let dataPayload = {
      horizontalPosition: avatar.style.left,
    };
    // send command to let other participant's know avatar position is updated
    VoxeetSDK.command
      .send(dataPayload)
      .then(() => {})
      .catch((err) => {
        console.log(err);
      });
  }
};

In the above code, the JSON payload being sent by the CommandService is:

{
    horizontalPosition: avatar.style.left
}

When another participant connected to the session moves their avatar, the session’s command event handler is invoked:

VoxeetSDK.command.on('received', (participant, message) => {
  let dataParsed = JSON.parse(message);
  if (dataParsed) {
    if (dataParsed.horizontalPosition) {
      moveAvatarHorizontally(participant.id, dataParsed.horizontalPosition);
    }
    if (dataParsed.verticalPosition) {
      moveAvatarVertically(participant.id, dataParsed.verticalPosition);
    }
  }
});

Finally, in this sample application, the `moveAvatarHorizontally` method handles updating another participant’s avatar position in the DOM based on the data passed in from the CommandService. 

⚠️ Note

In this sample project, `videoContainersList` is used to associate participant’s id’s with their video container. 

const moveAvatarHorizontally = (participantId, leftCoordinate) => {
  // find that participant's avatar and update its position in the DOM
  let avatarId;
  for (let i = 0; i < videoContainerList.length; i++) {
    if (videoContainerList[i].participantId === participantId) {
      avatarId = 'avatar-' + i;
    }
  }
  let avatar = document.getElementById(avatarId);
  avatar.style.left = leftCoordinate;
};

Wrapping Up

This sample project uses the CommandService to send data about the position of an element on the DOM (the participant’s avatar), but the CommandService could also be used as a way to send chat messages or other messages to support many other use cases.