Quickstart

This quickstart shows how to incorporate live video and audio into any web 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.

If you're looking for a quick and easy way to integrate video and audio into your application with a prebuilt UI, check out our UI Kit.

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:

  • Create a Dyte Developer Account
  • Create a Dyte Meeting
  • Add Participant to the meeting

Step 1: Install the SDK

You can install the package using CDN, npm or Yarn.

Javascript

NPM

npm install @dytesdk/web-core

CDN

Add the following script tag in the head of your HTML file.

<script src="https://cdn.dyte.in/core/dyte.js" />

React

npm install @dytesdk/react-web-core

Step 2: Initialize the SDK

Javascript

1. Initialize the Dyte client.
2. Call the init() method and pass the authToken.

authToken	After you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.

const meeting = await DyteClient.init({
  authToken,
});

React

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, You may use the meeting object to set the users display name or apply a video background middleware.

Next step is to join the room.

Join the room

To join the meeting room, call join() method on the DyteClient instance as shown below.

await meeting.join();

info

Once the join room process completes roomJoined event is emitted on meeting.self namespace.

If you want to perform any actions, such as enabling audio, video, or starting and stopping recording, you can do so after the roomJoined event is fired.

For example:

Javascript

meeting.self.on('roomJoined', () => {
  console.log('User has joined the room', meeting.self.roomJoined);
  // run my actions.
});

React

...
const roomJoinedListener = () => {
  console.log('User has joined the room', meeting.self.roomJoined);
  // run my actions.
}

useEffect(() => {
  meeting.self.on('roomJoined', roomJoinedListener);

  return () => {
  meeting.self.off('roomJoined', roomJoinedListener);
  };
}, [meeting]);
...

Leave the room

Once the meeting is over, you can leave the meeting room.

To leave the meeting room, call leave() method on the dyteClient as shown below.

await meeting.leave();

info

Once the leave room process completes roomLeft event is emitted on meeting.self, roomLeft may also be called in case the user is kicked out of the room or disconnects

For example:

Javascript

meeting.self.on('roomLeft', () => {
  console.log('User has left the room', meeting.self.roomJoined);
  // run my actions.
});

React

...
const roomLeftListener = () => {
  console.log('User has left the room', meeting.self.roomJoined);
  // run my actions.
}

useEffect(() => {
  meeting.self.on('roomLeft', roomLeftListener);

  return () => {
    meeting.self.off('roomLeft', roomLeftListener);
  };
}, [meeting]);
...