test

Using vidyo.io APIs and SDKs, you can give users multimodal communications

Using the vidyo.io SDK, you can easily include group video chat in your application or website, and give people an amazing way to connect. In addition to video, you can also add a group text chat feature. This is a great way to augment the video interaction with typed chat messages for multimodal communication. With vidyo.io, it is easy to add text chat with a simple API call.

Using just a simple API call, you can send a text message to every other participant in the call. To receive incoming chat messages, you can register by listening to the “RegisterMessgeEventListner”. Below is a JavaScript sample;you can find samples in other languages in the documentation.

/* JavaScript Example: */

  /* Register to receive chat messages */
  vidyoConnector.RegisterMessageEventListener({
    onChatMessageReceived: function(participant, chatMessage) { /* Message received from other participant */ }
  }).then(function() {
    console.log("RegisterMessageEventListener Success");
  }).catch(function() {
    console.err("RegisterMessageEventListener Failed");
  });

  /* Send chat message */
  vidyoConnector.SendChatMessage("Hello")

This text chat channel enables your application with text-based communication between users. While chat is the obvious use case, you can also utilize this channel to send messages between endpoints typical chat communication. For example, the chat channel can be used to share data or pass commands between apps. This can allow you to add additional roles and features to your business logic.

One-on-one chat

When you call “SendChatMessage” on the VidyoConnector object, it sends the message to everyone in the video room. To send messages to only certain individuals in the room, you can add logic to your application to send JSON text strings instead of just the message string. The JSON structure can look something like this

{
    "type": "IndividualChat",
    "targetId": "userID",
    "message": "Hello World"
}

The type field will indicate that this message is targeted for a particular userID. While public chat can be sent as –

{
    "type": "PublicChat",
    "message": "Hello World"
}

On the receive side, we will register to the message event listener like before, but now check to see if the received message string contains a valid JSON text. If it does we can then check for the message type – the “Public” chat type we display the text and for “Individual” chat type we first check to see if it is intended for us and if it is, only then we display the text.

vidyoConnector.RegisterMessageEventListener({
      onChatMessageReceived: (participant, chatMessage) => {
        try {
          var jsonObject = JSON.parse(chatMessage.body); // verify that json is valid
          console.log("Received a valid Json")
          if (jsonObject.type === "PublicChat") {
            console.log("Received message from - " + participant.name);
            console.log("Message - " + chatMessage.body);
          } else if (jsonObject.type === "IndividualChat" &&
                     jsonObject.targetId === currentUser.id) {
            console.log("Received private message from - " + participant.name);
            console.log("Message - " + chatMessage.body);
          }
        }
        catch (e) {
          console.log("Did not receive a valid Json: " + e);
        }
      }
    }).then(() => {
      console.log("RegisterParticipantEventListener Success");
    }).catch(() => {
      console.err("RegisterParticipantEventListener Failed");
    });

To send a targeted message to a particular user using the above defined JSON structure, we will need the user ID of that participant. To get the user ID of every participant in the call, you can register for participant events with the VidyoConnector – RegisterParticipantEventListener API and get the participant.userId value from the OnParticipantJoined callbacks. See the code below for a javascript example –

/* JavaScript Example: */

vidyoConnector.RegisterParticipantEventListener(
{
  onJoined: function(participant) { /* Participant Joined */ },
  onLeft: function(participant)   { /* Participant Left */ },
  onDynamicChanged: function(participants, cameras) { /* Ordered array of participants according to rank */ },
  onLoudestChanged: function(participant, audioOnly) { /* Current loudest speaker */ }
}).then(function() {
  console.log("RegisterParticipantEventListener Success");
}).catch(function() {
  console.err("RegisterParticipantEventListener Failed");
});

Note that the user ID is set at the time of token generation. For example, when you create a token using the following parameters –

User Name = “roger19”
Application Id = “2832c7.vidyo.io”

And connect a call, all the other participants in the call will get a “onParticipantJoined” event and the “Participant.Id” field will contain – “roger19@2832c7.vidyo.io” and the “Participant.Name” will contain the “display name” you used in the connect method.

Control Messages

Along with chat messages, your application can also send control messages. For example, if your application wants to implement an admin control where the admin can terminate the call, it can use the send chat message to notify all the other endpoints to disconnect (or send a message to mute audio or video). Using JSON we can define some control messages as follows –

{
    "type": "Control",
    "subType": "DisconnectAll"
}

{
    "type": "Control",
    "subType": "AudioMuteAll"
}

{
    "type": "Control",
    "subType": "AudioMuteUser"
    "targetID": "userID"
}

So if your admin wants to disconnect a call, they can call a send message as follows before disconnecting –

var message = '{ "type": "Control",' +
                '"subType": "DisconnectAll" }';
vidyoConnector.SendChatMessage(message);

And on the receive side, we add a check to respond to control messages as follows –

vidyoConnector.RegisterMessageEventListener({
      onChatMessageReceived: (participant, chatMessage) => {
        try {
          var jsonObject = JSON.parse(chatMessage.body); // verify that json is valid
          console.log("Received a valid Json")
          if (jsonObject.type === "Control") {
            if (jsonObject.subType === "DisconnectAll") {
                vidyoConnector.Disconnect();
            }
          }
        }
        catch (e) {
          console.log("Did not receive a valid Json: " + e);
        }
      }
    }).then(() => {
      console.log("RegisterParticipantEventListener Success");
    }).catch(() => {
      console.err("RegisterParticipantEventListener Failed");
    });

You can see the group chat in vidyo.io is easy to use and very flexible. It’s not just for person-to-person messaging. It can be used as a convenient way to pass  important information between endpoints in a call.

Have you built something call with vidyo.io? Let us know about it! We love to see what you’ve built and we might even put you in our blog.

Sachin Hegde is a Developer Evangelist for Vidyo. You can follow him on Twiter @twtsachin or LinkedIn.

Try vidyo.io for free