Integrating The SDK
Installing our libraries
You can use either npm or yarn to install the dependencies. Please install the respective libraries depending on whether you're planning to use with react or other framework/plain JavaScript.
npm install --save @100mslive/hms-video @100mslive/hms-video-store
Setting up the sdk
Our core SDK can be used with plain JavaScript or any UI framework. We also provide a convenient hooks based interface in case you're planning to integrate our SDK in a React app. Please follow the appropriate section below.
JavaScript
There are three entities which we need to be familiar of -
hmsStore
- this contains the complete state of the room at any given time. This includes for example, participant details, messages and track states.hmsActions
- this is used to perform any action such as joining, muting and sending a message.hmsNotifications
- this can be used to get notified on peer join/leave and new messages in order to show toast notifications to the user.
Let's create a hms.js
file where we initialize and export the above entities, so they can be used as required. We'll assume that
this setup is in place in other sections of the documentation.
import { HMSReactiveStore } from '@100mslive/hms-video-store'; const hms = new HMSReactiveStore(); // by default subscriber is notified about store changes post subscription only, this can be // changed to call it right after subscribing too using this function. hms.triggerOnSubscribe(); // optional, recommended const hmsActions = hms.getHMSActions(); const hmsStore = hms.getStore(); const hmsNotifications = hms.getNotifications(); export { hmsActions, hmsStore, hmsNotifications };
React Hooks
If you're planning to use our SDK with React, we provide three friendly hooks as a wrapper over our plain JavaScript interface.
You can wrap your UI in HMSRoomProvider
and these hooks will become available to all the UI components. We'll learn more about these hooks,
and their use as we navigate through further sections.
import { HMSRoomProvider } from '@100mslive/react-sdk'; export function App() { return ( <HMSRoomProvider> <MyApp /> </HMSRoomProvider> ); }
Debugging
Do checkout our debugging page here for an easy debugging experience while integrating our sdk.