Events

Embed-SDK React

Embed-SDK Web

Events emitted by the App Builder Embed SDK.

sdkEventsMapInterface

Key	Type	Description
create	( hostPhrase: string, attendeePhrase?: string, pstnNumber?: { number: string, pin: string } ): void	Triggered when a room is created
ready-to-join	( meetingTitle: string, devices: MediaDeviceInfo[] ) => void	Triggered when user on the precall screen
join	( meetingTitle: string, devices: MediaDeviceInfo[], isHost: boolean ) => void	Triggered when user joins a room
leave	() => void	Triggered when user leaves a room
rtc-user-joined	(uid: UidType) => void	Triggered when remote user joins the room
rtc-user-left	(uid: UidType) => void	Triggered when remote user leaves the room
rtc-user-published	(uid: UidType, trackType: 'audio' | 'video') => void	Triggered when remote user publishes a media track
rtc-user-unpublished	(uid: UidType, trackType: 'audio' | 'video') => void	Triggered when remote user unpublishes a media track
devices-selected-microphone-changed	( deviceId: deviceId ) => void	Triggered when the selected audio input device is changed
devices-selected-camera-changed	( deviceId: deviceId ) => void	Triggered when the selected video input device is changed
devices-selected-speaker-changed	( deviceId: deviceId ) => void	Triggered when the selected audio output device is changed
token-not-found	() => void	Triggered when no token is provided in the login method, and not found in the local storage
will-token-expire	() => void	Triggered when provided token 59 seconds before token expires
did-token-expire	() => void	Triggered when provided token has expired
token-refreshed	() => void	Triggered when token is refreshed

create( hostPhrase: string, attendeePhrase?: string, pstnNumber?: { number: string, pin: string } ): void

Parameters

Parameter	Type	Description
hostPhrase	string	Room pass phrase to join as host
attendeePhrase?	string	Room pass phrase to join as attendee
pstnNumber?	{ number: string, pin: string }	Room PSTN Dial-in info

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "create",
    (hostPhrase, attendeePhrase, pstnNumber) => {
      console.log("Room created with", {
        hostPhrase,
        attendeePhrase,
        pstnNumber,
      });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "create",
  (hostPhrase, attendeePhrase, pstnNumber) => {
    console.log("Room created with", {
      hostPhrase,
      attendeePhrase,
      pstnNumber,
    });
  }
);

...

unbind();

ready-to-join( meetingTitle: string, devices: MediaDeviceInfo[] ): void

Parameters

Parameter	Type	Description
meetingTitle	string	Name of the room being joined
devices	MediaDeviceInfo[]	Array media devices detected by the Agora SDK

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "ready-to-join",
    (meetingTitle, devices) => {
      console.log("Ready to join room with", { meetingTitle, devices });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "ready-to-join",
  (meetingTitle, devices) => {
    console.log("Ready to join room with", { meetingTitle, devices });
  }
);

...

unbind();

join( meetingTitle: string, devices: MediaDeviceInfo[], isHost: boolean ): void

Parameters

Parameter	Type	Description
meetingTitle	string	Name of the room being joined
devices	MediaDeviceInfo[]	Array of media devices detected by the Agora SDK
isHost	boolean	Indicates if user is joining room as a host

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "join",
    (meetingTitle, devices, isHost) => {
      console.log("Joining room with", { meetingTitle, devices, isHost });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "join",
  (meetingTitle, devices, isHost) => {
    console.log("Joining room with", { meetingTitle, devices, isHost });
  }
);

...

unbind();

leave(): void

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on("leave", () => {
    console.log("App Builder room left");
  });

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on("leave", () => {
  console.log("App Builder room left");
});

...

unbind();

rtc-user-joined(uid: UidType ): void

Parameters

Parameter	Type	Description
uid	UidType	Uid of the remote user

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "rtc-user-joined",
    (uid) => {
      console.log("Remote user joined room with", { uid });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "rtc-user-joined",
  (uid) => {
    console.log("Remote user joined room with", { uid });
  }
);

...

unbind();

rtc-user-left(uid: UidType ): void

Parameters

Parameter	Type	Description
uid	UidType	Uid of the remote user

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "rtc-user-left",
    (uid) => {
      console.log("Remote user left room with", { uid });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "rtc-user-left",
  (uid) => {
    console.log("Remote user left room with", { uid });
  }
);

...

unbind();

rtc-user-published(uid: UidType, trackType: 'audio'|'video' ): void

Parameters

Parameter	Type	Description
uid	UidType	Uid of the remote user
trackType	'audio' | 'video'	Media type of the published track

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "rtc-user-published",
    (uid, trackType) => {
      console.log("Remote user published track with", { uid, trackType });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "rtc-user-published",
  (uid, trackType) => {
    console.log("Remote user published track with", { uid, trackType });
  }
);

...

unbind();

rtc-user-unpublished(uid: UidType, trackType: 'audio'|'video' ): void

Parameters

Parameter	Type	Description
uid	UidType	Uid of the remote user
trackType	'audio' | 'video'	Media type of the unpublished track

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "rtc-user-unpublished",
    (uid, trackType) => {
      console.log("Remote user unpublished track with", { uid, trackType });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "rtc-user-unpublished",
  (uid, trackType) => {
    console.log("Remote user unpublished track with", { uid, trackType });
  }
);

...

unbind();

devices-selected-microphone-changed( deviceId: deviceId ): void

Parameters

Parameter	Type	Description
deviceId	deviceId	Id of the selected device

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "devices-selected-microphone-changed",
    (deviceId) => {
      console.log("Microphone changed to", { deviceId });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "devices-selected-microphone-changed",
  (deviceId) => {
    console.log("Microphone changed to", { deviceId });
  }
);

...

unbind();

devices-selected-camera-changed( deviceId: deviceId ): void

Parameters

Parameter	Type	Description
deviceId	deviceId	Id of the selected device

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "devices-selected-camera-changed",
    (deviceId) => {
      console.log("camera changed to", { deviceId });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "devices-selected-camera-changed",
  (deviceId) => {
    console.log("camera changed to", { deviceId });
  }
);

...

unbind();

devices-selected-speaker-changed( deviceId: deviceId ): void

Parameters

Parameter	Type	Description
deviceId	deviceId	Id of the selected device

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "devices-selected-speaker-changed",
    (deviceId) => {
      console.log("speaker changed to", { deviceId });
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "devices-selected-speaker-changed",
  (deviceId) => {
    console.log("speaker changed to", { deviceId });
  }
);

...

unbind();

token-not-found(): void

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "token-not-found",
    () => {
      console.log("No token was provided");
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "token-not-found",
  () => {
    console.log("No token was provided");
  }
);

...

unbind();

will-token-expire(): void

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "will-token-expire",
    () => {
      console.log("Token will expire in 59s");
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "will-token-expire",
  () => {
    console.log("Token will expire in 59s");
  }
);

...

unbind();

did-token-expire(): void

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "did-token-expire",
    () => {
      console.log("Token expired");
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "did-token-expire",
  () => {
    console.log("Token expired");
  }
);

...

unbind();

token-refreshed(): void

react-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on(
    "token-refreshed",
    () => {
      console.log("Token automatically refreshed");
    }
  );

  return () => {
    unbind();
  };
}, []);

web-sdk

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderWebSDK.on(
  "token-refreshed",
  () => {
    console.log("Token automatically refreshed");
  }
);

...

unbind();