Skip to main content

Quickstart

This quickstart shows how to incorporate live video and audio into your React application using Dyte's Core SDKs. Core SDKs offer comprehensive customization and branding capabilities, enabling you to create your own user interface (UI) from scratch, without having to deal with complex media layers.

Objective​

You'll learn how to:

  • Install the Dyte SDK
  • Initialize Dyte Client
  • Connect to the meeting
  • Go live!

Before Getting Started​

Make sure you've read the Getting Started with Dyte topic and completed the following steps:

Step 1: Install the SDK​

You can install the package npm or Yarn.

npm install @dytesdk/react-web-core

npm version

Step 2: Initialize the SDK​

To start, we need to initialize the libraries and wrap the application in the <DyteProvider /> component. Import the DyteProvider from the dytesdk/react-web-core.

The <DyteProvider /> provides the necessary context for the various hooks to consume the meeting object as per their purpose. Dyte provides the following built-in hooks for your usage:

  • useDyteClient()
  • useDyteMeeting()
  • useDyteSelector()

For more information on hooks, see Use Web Core Hooks.

To initialize, call the init() method and pass the authToken. You can get the authToken using the Add Participant API.

import { DyteProvider, useDyteClient } from '@dytesdk/react-web-core';
import { useEffect } from 'react';

export default function App() {
  const [meeting, initMeeting] = useDyteClient();

  useEffect(() => {
    initMeeting({
      authToken: '<auth-token>',
      defaults: {
        audio: false,
        video: false,
      },
    });
  }, []);

  return (
    <DyteProvider value={meeting}>
      {/* Render your UI here. Subcomponents can now use the `useDyteMeeting` and `useDyteSelector` hooks */}
    </DyteProvider>
  );
}

You can now use the useDyteMeeting and useDyteSelector hooks as required.

Step 3: Connect to the Meeting​

Now, you have established the connection with the Dyte meeting server successfully. Next step is to join the room and leave the room once the meeting is over.

import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect } from 'react';
import Room from './Room';

export default function AudioRoom() {
  const { meeting } = useDyteMeeting();
  const roomJoined = useDyteSelector((meeting) => meeting.self.roomJoined);

  useEffect(() => {
    meeting.self.on('roomLeft', () => {
      // handle navigation to other screen here after the user has left the room.
      alert("You've left the room");
    });
  }, [meeting]);

  return <Room />;
}

Example​

import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';

const Meeting = () => {
  // in case you want to use the whole meeting object
  const { meeting } = useDyteMeeting();

  // in case you just want to use a `slice` of a meeting object
  // these are optimized so that re-renders only occur when the selected slice changes
  const messages = useDyteSelector((meeting) => meeting.chat.messages);
  const activeParticipants = useDyteSelector(
    (meeting) => meeting.participants.active
  );

  return <div>{/* render your UI */}</div>;
};