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
npm install --save @100mslive/hms-video-store
## yarn
yarn add @100mslive/hms-video-store

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

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.

In case you want to use the CDN link, you can change the imports as present in the example here. It's recommended to use a fixed version with CDN to avoid unintentional retrieval of a new release with breaking changes. Although CDN is great for quickstart and prototyping, we highly recommend setting up a bundler for production to improve page load speed and avoid a dependency on cdn provider.

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.getActions();
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.