Getting started with Dyte - 1: Setting up Dyte
Tags: javascript, react, beginners
Published: 2021-12-13 04:13:11



Building audio, video apps with ease

View the video version of this blog at [Incredible.dev](https://incredible.dev/watch/qpw-mkg-cut).

--- 

### What is Dyte?

Dyte is a SDK which provides the easiest way to add real-time communications using audio and video to your apps and platforms.

## Features
### Real-time, fast communications

Dyte is blazingly fast.

![Real-time, fast communications](https://cdn.incredible.dev/G-GDXcQI01lRZ-GtREZLp.gif)

### Video capabilities to your mobile apps

Dyte enables you to build Video calling capabilities for mobile

![Video apps](https://cdn.incredible.dev/E0I3RSp6E8-EZ1xShdxyH.gif)

### Video capabilities to your web apps

Dyte Enables you to build Video calling capabilities for Web

![Video apps](https://cdn.incredible.dev/kMHOiwv3HQj2SlME8wSVn.gif)

### Audio apps

Dyte offers audio capabilities too.

![Audio apps](https://cdn.incredible.dev/vqvpbNjQc7GMWHaRStblg.gif)

### Web and mobile applications

Dyte can power both mobile and web applications

![Web and mobile applications](https://cdn.incredible.dev/zCmUIYkWZ1kNAkE0Wxcko.gif) 

--- 

## How dyte works? 

Dyte is based largely on the WebRTC protocol, and the features and optimisations we build on top of it. 

![WebRTC protocol](https://cdn.incredible.dev/0C8bdBLVs0SiYi15pioaw.gif)

Although the protocol is supposed to be peer-to-peer, it is not easy to build it reliably.

![ Peer-to-Peer Protocol](https://cdn.incredible.dev/CFMnqzAoDKvfBkPezmn14.gif)

Anyone who has tried implementing it by themselves would know that the implementions get real messy, real fast. 

![Implementation can get messy](https://cdn.incredible.dev/piwRa2Po1JLXjjZEwfqnw.gif)

To have a real working solution, servers with SFU, STUN, TURN, etc capabilities.

![Servers with SFU, STUN, TURN](https://cdn.incredible.dev/q3h0_2lksF1pD1JfJXnKm.gif)

This is required to optimize for user bandwidth.

![Optimize user bandwidth](https://cdn.incredible.dev/lS-6tQky2ZAXtS_8VMVEs.gif)

Also to optimize for performance.

![Optimize performance](https://cdn.incredible.dev/ZHlaJ2OPXufSrgk1HBsgr.gif) 

--- 

## Architecture

Here is the architecture of Dyte, and all the step that goes behind the scenes in setting up a meeting.

![Architecture](https://cdn.incredible.dev/yG_dDhnJYefnw7swEq4a2.png) 


--- 

## Using JS SDK 

### Initialising 

 Here are the steps to initialise the Dyte JS SDK

- Get meeting room name from the backend API
- Get participant token form the backend API
- Pass them as props to Dyte's React Component to initialize

### Using JS React SDK 

 You can initialize a meeting in your React app, using this component, like below.

```javascript
import { DyteMeeting } from "dyte-client";

function App() {
  return (
    <div className="App">
      <DyteMeeting
        onInit={(meeting) => {}}
        clientId={`orgId || clientId`}
        meetingConfig={{
          roomName: `roomName`,
          authToken: `authToken`,
        }}
      />
    </div>
  );
}

export default App;
``` 
---


Hope this Incredible post conveys what is Dyte, its features and how to integrate it into your applications.
To learn more about Dyte join their community [using this link](https://community.dyte.io/).