Skip to main content

Handling Local Participant

Get Added Local Tracks​

Once the tracks are added to the room using addLocalTrack, you need to listen to the PROCONF_EVENTS.TRACK_PUBLISHED event on the localParticipant. This event indicates that the local participant has successfully published tracks in the room. Upon triggering this event, the assigned callback function is executed. Within the callback function, you can iterate over room.localParticipant.tracks to retrieve the tracks that have been published to the server. These tracks can be categorized into two types: audio and video. Therefore, while iterating over the tracks, you can differentiate them based on their track.kind.

room.localParticipant.on(PROCONF_EVENTS.TRACK_PUBLISHED, () => {
  room.localParticipant.tracks.forEach(localTrack => {
    if (localTrack.track.kind === 'video') {
      // Handle video track
      localParticipant.video = localTrack.track;
    }
    if (localTrack.track.kind === 'audio') {
      // Handle audio track
      localParticipant.audio = localTrack.track;
    }
  });
});

Attaching Tracks to Media Elements​

Attaching Tracks to HTML Elements​

Once we receive the local audio/video tracks from the room, we need to attach these tracks to HTML elements for display on the user interface.

const video = document.getElementById('video');
localParticipant.video?.attach(video);

const audio = document.getElementById('audio');
localParticipant.audio?.attach(audio);

Media Sharing Control​

To toggle the audio/video, simply call the disable or enable function on the corresponding track.

Enable/Disable Audio Share​

// Mute audio
localParticipant.audio.disable();

// Unmute audio
localParticipant.audio.enable();

Enable/Disable Video Share​

// Mute video
localParticipant.video.disable();

// Unmute video
localParticipant.video.enable();

By following these guidelines, you can manage local tracks effectively, attach them to media elements for display, and control media sharing during a meeting.