Twilio 2.x: Send custom parameters via connect api

Question

I am here to ask you about Twilio functionality. Now I am developing Conference Service using Twilio Service, but faced a difficult problem. When I use connect API, the callback returns a JSON object that includes participant.identity. I want to send participant.name with participant.identity.

This is connect function.

createLocalTracks(options)
  .then(localTracks => {
    return connect(room.accessToken, {
      name: room.roomName,
      tracks: localTracks,
    })
  }).then(room => {
    console.log(room.data);    // Returns JSON Object that includes only participant_identity.
    this.participants.push("You");
  })

And console result is like the following.

{
  dominantSpeaker: null
  isRecording: true
  localParticipant: {
    ...,
    identity: 'xxx',
    ...
  }
  mediaRegion: "us1"
  name: "Soundblock.Project.2608117C-F92E-442A-A67D-4ED428522CE0"
  participants: []
  sid: "RM6336d72cb198fa58aa37f66af9eaf02d"
  state: "connected"
}

I want to get participant_name with identity. So the result must be like the following.

{
  dominantSpeaker: null
  isRecording: true
  localParticipant: {
    ...,
    identity: 'xxx',
    participant_name: 'ABC'
    ...
  }
  mediaRegion: "us1"
  name: "Soundblock.Project.2608117C-F92E-442A-A67D-4ED428522CE0"
  participants: [
    { identity: 'YYY', participant_name: 'BCD' },
    { identity: 'ZZZ', participant_name: 'CDE' },
    ...
  ]
  sid: "RM6336d72cb198fa58aa37f66af9eaf02d"
  state: "connected"
}

Is there anyone who can help me with this issue? Thank you.

Answer 1

Twilio developer evangelist here.

The Participant object does not have arbitrary properties, like participant_name, that you can use to pass data around.

I would suggest that you create an API in your back-end that can receive a participant identity and return data about the participant. That way, when a participant connects you can make a request to your back-end to get more data about them.

Alternatively, you could use the DataTrack API to send data like this to other participants.

Answer 2

You have 2 ways to get that:

1. If you are calling the Twilio API in the back and then creating the object which is served to the front, change it appropriately in the back so that it returns exactly what you need on the front end.

2. if you are calling directly the Twilio API from the front (or you don't want to change in the back), you can do a interface and mapping appropriately with a class. Something like this:

interface ParticipantI {
  // NOTE: Put the right types on it
  dominantSpeaker: string;
  isRecording: boolean;
  localParticipant: {
    ...,
    identity: string;
    ...
  }
  mediaRegion: string;
  name: string;
  participants: {identity: 'string'; participant_name: 'string';}[]
  sid: string;
  state: string;
}

export class Participant {

  dominantSpeaker: string;
  isRecording: boolean;
  localParticipant: {
    ...,
    identity: string;
    participant_name?: string;
    ...
  }
  mediaRegion: string;
  name: string;
  participants: {identity: 'string'; participant_name: 'string';}[]
  sid: string;
  state: string;

  constructor (participant:ParticipantI) {

  this.dominantSpeaker = participant.dominantSpeaker;
  this.isRecording= participant.isRecording;
  this.localParticipant = participant.localParticipant;
  this.participants = participant.participants;
  ... // Complete the assignment of the rest of the fields

  // Managing the transformations
  // Look up for 'participant_name'
  const _participant_name = this.participants.find( ({ identity }) => identity === this.localParticipant.identity );
  // Add it to localParticipant
  this.localParticipant.participant_name = _participant_name.participant_name;
  // Delete it from this.participants
  this.participants = this.participants.filter(participan => participan.identity != _participant_name.identity);
 

  }

}

Manage in your call to the API:

createLocalTracks(options)
  .then(localTracks => {
    return connect(room.accessToken, {
      name: room.roomName,
      tracks: localTracks,
    })
  }).then(room => {
    console.log(room.data);    // Returns JSON Object that includes only participant_identity.


    const myExample: Participant  = new Participant(room.data);
    console.log(myExample);


    this.participants.push("You");
  })