Integration

Step 1: Generate meeting id

Get a meeting id for new meeting or use an existing meeting id to join a meeting.

const meetingId = ZujoSDK.getNewMeetingId();

Step 2: Initialize meeting

To initialize meeting you need to provide the following parameters:

• meetingId: string from the previous step to specify which meeting to join in.
• name: string which will be displayed as username of participant in the meeting.
• micEnabled: boolean option to indicate if mic should be on while joining.
• webcamEnabled: boolean option to indicate if webcam should be on while joining.
• maxResolution: "sd" | "hd" defines the maximum available resolution for webcam video.

const meeting = ZujoSDK.initMeeting({
  meetingId, // required
  name, // required
  micEnabled, // optional, default: true
  webcamEnabled, // optional, default: true
  maxResolution, // optional, default: "hd"
});

The meeting object consists of:

• Properties:

  • id: string
  • activeSpeakerId: string
  • activePresenterId: string
  • mainParticipantId: string
  • localParticipant: Participant
  • participants: Map<string, Participant>

• Events:

  • participant-joined
  • participant-left
  • speaker-changed
  • presenter-changed
  • main-participant-changed

• Methods:

  • join()
  • leave()
  • muteMic()
  • unmuteMic()
  • disableWebcam()
  • enableWebcam()
  • disableScreenShare()
  • enableScreenShare()
  • on(eventType: string)
  • off(eventType: string)

Step 3: Get local and remote participants

You can get the local streams and participant meta from meeting.localParticipant. And a Map of joined participants is always available via meeting.participants.

const localParticipant = meeting.localParticipant;
const participants = meeting.participants;

Each participant object consists of:

• Properties:

  • id: string
  • displayName: string
  • streams: Map<string, Stream>

• Events:

  • stream-enabled
  • stream-disabled

• Methods:

  • setQuality(quality: "low" | "med" | "high")
  • on(eventType: string)
  • off(eventType: string)

Step 4: Listen for new & leaving participant events

When participant joins or leaves a meeting that you are connected to, you will be notified via participant-joined and participant-left events respectively.

meeting.on("participant-joined", (participant) => {
  setParticipants(new Map(meeting.participants));
});

meeting.on("participant-left", (participant) => {
  setParticipants(new Map(meeting.participants));
});

Step 5: Listen for audio/video stream events

When a participant from meeting enables or diables a audio/video stream, you will be notified via stream-enabled and stream-disabled events from the participant object.

participant.on("stream-enabled", (stream) => {
  if (stream.kind === "video") {
    // play video track on a <video /> element
  } else if (stream.kind === "audio") {
    // play audio track on a <audio /> element
  } else if (stream.kind === "share") {
    // play screen sharing video track on a <video /> element
  }
});

participant.on("stream-disabled", (stream) => {
  if (stream.kind === "video") {
    // remove video track or the <video /> element
  } else if (stream.kind === "audio") {
    // remove audio track or the <audio /> element
  } else if (stream.kind === "share") {
    // remove screen sharing video track or the <video /> element
  }
});

Each stream object consists of:

• Properties:

  • id: string
  • kind: string
  • codec: string
  • track: MediaStreamTrack

• Methods:

  • pause()
  • resume()

Note: Chrome Autoplay policy workaround

Chrome's autoplay policy does not allow audio autoplay unless user has interacted with the domain (click, tap, etc.) or the user's Media engagement Index threshold has been crossed. Thus, as a workaround before starting the meeting, user can either create a meeting join page or create a join meeting confirmation dialog by which we can perform a user click interaction to enable audio autoplay in chrome's newer versions.

Step 6: Main screen video (optional)

When a participant who is currently presenting or speaking is changed in the meeting, you will be notified via main-participant-changed event.

meeting.on("main-participant-changed", (participant) => {
  // show participant video stream on main screen
});

Step 7: Join the meeting

After we set local participant, main-screen participant, other participants, participant event handlers and stream event handlers from the meeting, next step is to join the meeting by calling meeting.join(). This will trigger participant-joined event for all other participants.

meeting.join();

Step 8: Utility methods & events (optional)

• Mute/Unmute mic

  Toggle own mic with the unmuteMic() and muteMic() methods. Toggling mic will trigger stream-enabled and stream-disabled events for all other participants when enabling and disabling mic.

  meeting.unmuteMic();
  meeting.muteMic();
  

• Enable/Disable Webcam

  Toggle own webcam with the enableWebcam() and disableWebcam() methods. Toggling webcam will trigger stream-enabled and stream-disabled events for all other participants when enabling and disabling webcam.

  meeting.enableWebcam();
  meeting.disableWebcam();
  

• Enable/Disable Screen share

  Share your screen with the enableScreenShare() method and stop sharing with disableScreenShare(). Toggling screen-share will trigger stream-enabled and stream-disabled events for all other participants when enabling and disabling screen-share.

  meeting.enableScreenShare();
  meeting.disableScreenShare();
  

• Active speaker event

  The speaker-changed event will be fired whenever the loudest speaking participant changes.

  meeting.on("speaker-changed", (participant) => {
    // indicate participant as speaking
  });
  

• Active presenter event

  The presenter-changed event will be fired whenever someone enables screen sharing.

  meeting.on("presenter-changed", (participant) => {
    // indicate participant as presenting screen
  });
  

• Set participant video quality

  Update the participant video quality based on use case to "low" | "med" | "high".

  participant.setQuality("low");
  

Leave the meeting

You can disconnect from the meeting with meeting.leave() method. This will trigger participant-left event for all other participants.

meeting.leave();