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

 
## npm
npm install --save @100mslive/react-sdk@latest
## yarn
yarn add @100mslive/react-sdk@latest

 
https://cdn.skypack.dev/@100mslive/hms-video
https://cdn.skypack.dev/@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 };

 
import { hmsActions, hmsStore, hmsNotifications } from './hms';

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>
  );
}

 
import {
  useHMSStore,
  useHMSActions,
  useHMSNotifications
} from '@100mslive/react-sdk';

export function MyComponent() {
  const hmsStore = useHMSStore();
  const hmsActions = useHMSActions();
  const hmsNotifications = useHMSNotifications();

  return </>;
}

Debugging

Do checkout our debugging page here for an easy debugging experience while integrating our sdk.