Dyte

https://docs.dyte.io
Admin
Dyte provides programmable and customizable real-time communication SDKs and APIs for integrating...
Tokens:439,416
Snippets:6,267
Trust Score:9.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Run Server

Source: https://docs.dyte.io/guides/capabilities/audio/transcriptionAWS

Install the necessary Node.js dependencies and start the backend server for the AWS Transcribe integration.

```bash
npm install
npm run dev
```

--------------------------------

### DyteProvider Initialization Example

Source: https://docs.dyte.io/flutter/Components/dyte-provider

An example demonstrating how to initialize DyteProvider with DyteMobileClient and DyteUIKitInfo. This setup is necessary before using Dyte components.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DyteProvider(
      client: DyteMobileClient(
        // Dyte client configuration
      ),
      uiKitInfo: DyteUIKitInfo(
        // UI Kit information and design tokens
      ),
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}
```

--------------------------------

### Initialize Dyte Meeting Component

Source: https://docs.dyte.io/ui-kit/quickstart

This example shows how to initialize the Dyte meeting component, set up the meeting with an auth token, and pass the meeting object to the custom element. It also configures default audio and video settings and hides the setup screen.

```html
<head>
<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@latest/loader/index.es2017.js';
  defineCustomElements();
</script>
<!-- Import Web Core via CDN too -->
<!-- <script src="https://cdn.dyte.in/core/dyte.js"></script> -->
</head>
<body>
<dyte-meeting id="my-meeting"></dyte-meeting>
<script>
  const init = async () => {
    const meeting = await DyteClient.init({
      // Add your own auth token here
      authToken: yourAuthToken,
      defaults: {
        audio: false,
        video: false,
      },
    });
  
    document.getElementById('my-meeting').showSetupScreen = false;
    document.getElementById('my-meeting').meeting = meeting;
  };
  
  init();
</script>
</body>
```

--------------------------------

### Install New UI Kit Dependencies

Source: https://docs.dyte.io/guides/realtimekit-migration/sdk-guide?framework=react-native

Install the necessary dependencies for the new UI Kit.

```bash
npm install @cloudflare/realtimekit-react-native @cloudflare/realtimekit-react-native-ui
```

--------------------------------

### Start Recording

Source: https://docs.dyte.io/android-core/recording

Call the `start()` method on the `meeting.recording` object to initiate a meeting recording.

```kotlin
meeting.recording.start()
```

--------------------------------

### Install UI Kit Addons

Source: https://docs.dyte.io/react-ui-kit/build-pre-call-ui/build-your-own/add-middleware

Install the UI Kit addons package to enable features like virtual background and blur.

```bash
npm i @dytesdk/ui-kit-addons  

```

--------------------------------

### iOS Installation (CocoaPods)

Source: https://docs.dyte.io/community-packages/socketio-client

Add the DyteSocketIO pod to your Podfile and then install it using 'pod install' for iOS targets.

```bash
pod 'DyteSocketIO' , '1.25.2'  

```

```bash
pod install  

```

--------------------------------

### Install Server Dependencies

Source: https://docs.dyte.io/guides/capabilities/audio/transcriptionGoogle

Install the necessary Node.js dependencies for the server, including Google Cloud client libraries.

```bash
npm install  
```

--------------------------------

### Install Dyte UI Kit and Web Core SDK

Source: https://docs.dyte.io/react-ui-kit/customizations/custom-locale

Install the necessary Dyte SDK packages using npm, yarn, or pnpm.

```bash
npm install @dytesdk/react-ui-kit @dytesdk/react-web-core  
```

```bash
yarn add @dytesdk/react-ui-kit @dytesdk/react-web-core  
```

```bash
pnpm add @dytesdk/react-ui-kit @dytesdk/react-web-core  
```

--------------------------------

### Customizing Meeting UI with Dyte Components

Source: https://docs.dyte.io/react-ui-kit/build-in-call-ui/default-meeting-ui

This example demonstrates how to split the DyteMeeting component into its constituent parts: setup screen, in-call UI, and ended screen, allowing for custom UI implementation. It requires importing various UI components from '@dytesdk/react-ui-kit' and core hooks from '@dytesdk/react-web-core'.

```jsx
import { DyteSetupScreen, DyteEndedScreen, DyteHeader, DyteParticipantsAudio, DyteDialogManager, DyteStage, DyteGrid, DyteNotifications, DyteSidebar, DyteControlbar } from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect } from 'react';
  
export default function MyMeeting() {
const { meeting } = useDyteMeeting();
const roomState = useDyteSelector((m) => m.self.roomState);
  
return (
  <div className="flex h-full w-full">
    {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
    {roomState === 'joined' && (
      <div className="flex flex-col w-full h-full">
        <header>
          <DyteHeader meeting={meeting} />
        </header>
  
        <main className="flex w-full flex-1 justify-center items-center" style={{
          backgroundColor: '#272727',
          color: '#ffffff',
        }}>
          <span>Custom in-call UI</span>
          <DyteDialogManager meeting={meeting} />
        </main>
  
        <footer className="flex w-full overflow-visible">
          <DyteControlbar meeting={meeting} />
        </footer>
      </div>
    )}
    {roomState === 'ended' && <DyteEndedScreen meeting={meeting} />}
  </div>
);
}
```

--------------------------------

### Install Dyte Recording SDK

Source: https://docs.dyte.io/guides/capabilities/recording/create-record-app-using-sdks

Install the Dyte Recording SDK using npm. This is the first step to integrate custom recording functionality into your application.

```bash
npm i @dytesdk/recording-sdk
```

--------------------------------

### Install Dyte UI Kit and Core SDK (Expo)

Source: https://docs.dyte.io/react-native/quickstart

Install the Dyte UI Kit and Core SDK packages using `npx expo install` for Expo managed projects.

```bash
npx expo install @dytesdk/react-native-ui-kit @dytesdk/react-native-core  
```

--------------------------------

### Install with NPM

Source: https://docs.dyte.io/plugin-sdk/usage/installation

Use this command to install the Dyte Plugin SDK package using NPM.

```bash
npm install @dytesdk/plugin-sdk  

```

--------------------------------

### Copy Environment Example

Source: https://docs.dyte.io/guides/capabilities/audio/transcriptionAWS

Copy the example environment file to create a new .env file for your AWS credentials and service configurations.

```bash
cp .env.example .env
```

--------------------------------

### Start a Recording

Source: https://docs.dyte.io/flutter-core/recording

Initiates a meeting recording by calling the `start()` method on the `dyteClient.recording` object.

```APIDOC
## Start a Recording

### Description
Starts the meeting recording.

### Method
`dyteClient.recording.start()`

### Example
```javascript
dyteClient.recording.start();
```
```

--------------------------------

### Install New UI Kit Dependencies

Source: https://docs.dyte.io/guides/realtimekit-migration/sdk-guide?framework=web-components

Install the necessary new UI Kit dependencies for your project.

```bash
npm install @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview
```

--------------------------------

### Start Recording

Source: https://docs.dyte.io/flutter-core/recording

Call the start() method on the dyteClient.recording object to initiate a meeting recording.

```dart
dyteClient.recording.start();
```

--------------------------------

### Install OpenTok Shim

Source: https://docs.dyte.io/guides/migration/opentok/opentok-shim-by-dyte

Install the OpenTok Shim package from the NPM registry.

```bash
npm install @dytesdk/opentok-shim
```

--------------------------------

### Install Dyte CLI with npm

Source: https://docs.dyte.io/cli

Install the Dyte CLI globally using npm. This is the recommended method for Node.js environments.

```bash
npm install -g @dytesdk/cli  

```

--------------------------------

### Start a Meeting Recording

Source: https://docs.dyte.io/rn-core/recording

Call the `start` method on the `meeting.recording` object to initiate a recording. Ensure the meeting is in a state where recording can begin.

```javascript
await meeting.recording.start();
```

--------------------------------

### Install Krisp.ai Noise Cancellation Package

Source: https://docs.dyte.io/web-core/pre-call/virtual-bg

Install the Krisp.ai noise cancellation package using NPM after configuring the registry.

```bash
npm i @dytesdk/krisp-noise-cancellation  
```

--------------------------------

### Install UI Kit and Web Core via npm

Source: https://docs.dyte.io/ui-kit/quickstart

Install the Dyte UI Kit and Web Core packages using npm for your project.

```bash
npm install @dytesdk/ui-kit @dytesdk/web-core
```

--------------------------------

### Initialize DyteClient and Join Room

Source: https://docs.dyte.io/rn-core/quickstart

Instantiate the DyteClient and join a meeting room. Ensure you have read the Getting Started guide and completed the Integrate Dyte steps before using this snippet. The authToken can be obtained via Dyte's backend APIs.

```javascript
import React from 'react';
import { useDyteClient, DyteProvider } from '@dytesdk/react-native-core';

export default function App() {
  const [meeting, initMeeting] = useDyteClient();
  React.useEffect(() => {
    const init = async () => {
      const meetingOptions = {
        audio: true,
        video: true,
      };
      await initMeeting({
        authToken: 'YourAuthToken',
        defaults: meetingOptions,
      });
    };
    init();
    if (meeting) meeting.joinRoom();
  }, []);

  if (meeting)
    return (
      <DyteProvider value={meeting}>
        {/* Render you Components here*/}
        {/* Components rendered inside DyteProvider can access DyteClient object using useDyteClient() hook */}
      </DyteProvider>
    );
}
```

--------------------------------

### Initialize SetupViewController

Source: https://docs.dyte.io/ios/components/dyte-setup-screen

Creates a setup screen with the provided meeting information and mobile client. The completion closure is called when the meeting ends.

```swift
init(meetingInfo: DyteMeetingInfoV2,  
      mobileClient: DyteMobileClient,  
      completion:@escaping()->Void)
```

```swift
let controller =  SetupViewController(meetingInfo: dyteMeetingInfo,  
                                      meeting: metting) {  [weak self] in  
    guard let self = self else {return}
    self.dismiss(animated: true)
    self.view.hideActivityIndicator()
}  
controller.modalPresentationStyle = .fullScreen  
self.present(controller, animated: true)
```

--------------------------------

### Install UI Kit and Web Core via Yarn

Source: https://docs.dyte.io/ui-kit/quickstart

Install the Dyte UI Kit and Web Core packages using Yarn for your project.

```bash
yarn add @dytesdk/ui-kit @dytesdk/web-core
```

--------------------------------

### Full Plugin Rendering Example (JavaScript)

Source: https://docs.dyte.io/guides/capabilities/plugins/rendering

A comprehensive example demonstrating how to find an activated plugin, listen for its 'enabled' event, create an iframe, add the plugin view, and append it to the document body.

```javascript
const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
whiteboard.on('enabled', () => {
  const iframeEl = document.createElement('iframe');
  whiteboard.addPluginView(iframeEl);
  document.body.appendChild(iframeEl);
});
```

--------------------------------

### Livestream Start Response

Source: https://docs.dyte.io/guides/rest-apis/livestream-dyte-meeting

Example response when a livestream is successfully started. Includes status, meeting ID, and stream details.

```json
{
  "success": true,
  "data": {
    "status": "OFFLINE",
    "name": null,
    "meeting_id": "188566bc-8770-4ca0-9eb3-24b594ecaf7e",
    "ingest_server": "rtmps://2ec802dd47b0.global-contribute.live-video.net:443/app/",
    "id": "7088bba8-f522-49a8-b59b-3cd0e946bbb0",
    "stream_key": "sk_ap-south-1_AfnVpeYZjidO_fBpWKody7sDUOEfy9Zc6XAZegkR0Va",
    "playback_url": "https://2ec802dd47b0.ap-south-1.playback.live-video.net/api/video/v1/ap-south-1.9449086423410.channel.rVGDS2KM5Lnteh.m3u8"
  }
}
```

--------------------------------

### Initialize SetupViewController

Source: https://docs.dyte.io/ios/build-pre-call-ui/default-setup-screen

Creates a SetupViewController instance with meeting information and a completion handler. The completion handler is called when the meeting ends, allowing for actions like dismissing the controller. Set modalPresentationStyle to .fullScreen for a full-screen presentation.

```swift
init(meetingInfo: DyteMeetingInfoV2, mobileClient: DyteMobileClient, completion:@escaping()->Void)
```

```swift
let controller =  SetupViewController(meetingInfo: dyteMeetingInfo,
                                              meeting: metting) { [weak self] in
    guard let self = self else {return}
    self.dismiss(animated: true)
    self.view.hideActivityIndicator()
}
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)
```

--------------------------------

### Get Livestream Status

Source: https://docs.dyte.io/flutter-core/livestream

Retrieve the current livestream status from the state property of the DyteLivestreamData instance. Possible statuses include none, starting, started, ending, ended, and errored.

```dart
final DyteLivestreamStatus? status = dyteClient.livestream.data.state;
```

--------------------------------

### Create SetupViewController

Source: https://docs.dyte.io/ios/build-pre-call-ui/default-setup-screen

Initializes the SetupViewController with meeting information and a completion handler. This setup screen is displayed before joining a meeting, allowing users to configure display names and media settings.

```APIDOC
## Create SetupViewController

### Description
Creates a setup screen with the configuration object of type `DyteMeetingInfoV2`. This screen is shown before joining a meeting, where users can edit their display name and media settings.

### Method Signature
```swift
init(meetingInfo: DyteMeetingInfoV2, meeting: DyteMobileClient, completion: @escaping () -> Void)
```

### Parameters
- **meetingInfo** (`DyteMeetingInfoV2`): Required. An instance of type `DyteMeetingInfoV2` representing the meeting configuration.
- **meeting** (`DyteMobileClient`): Required. The default meeting object.
- **completion** (`@escaping () -> Void`): Required. An escaping closure to get a callback when the meeting ends. For example, when the user leaves the meeting, you might want to present the starting screen.

### Usage Example
```swift
let controller = SetupViewController(meetingInfo: dyteMeetingInfo, meeting: metting) {
    [weak self] in
    guard let self = self else { return }
    self.dismiss(animated: true)
    self.view.hideActivityIndicator()
}
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)
```
```

--------------------------------

### Get Livestream Permissions

Source: https://docs.dyte.io/flutter-core/host-actions

Access the livestream permissions object to check if a user can start or stop livestreams.

```dart
final LivestreamPermissions livestreamPermissions = dyteClient.permissions.livestream;
```

--------------------------------

### Copy Environment File

Source: https://docs.dyte.io/guides/capabilities/audio/transcriptionGoogle

Copy the example environment file to create a new .env file for your server configuration.

```bash
cp .env.example .env  
```

--------------------------------

### Get Livestream Status

Source: https://docs.dyte.io/web-core/livestreaming

Retrieve the current status of the livestream. Possible values include IDLE, STARTING, LIVESTREAMING, and STOPPING.

```javascript
meeting.livestream.status
```

--------------------------------

### Initialize and Start Dyte Meeting UI

Source: https://docs.dyte.io/android/components/dyte-meeting

Initialize the DyteMeetingInfoV2 and DyteUIKitInfo objects, build the DyteUIKit instance, and start the meeting. Ensure you have the necessary authentication token and base URL.

```kotlin
val meetingInfo = DyteMeetingInfoV2(  
  authToken = authToken,  
  baseUrl = baseUrl  
)  
val dyteUIKitInfo = DyteUIKitInfo(  
  activity = this,  
  dyteMeetingInfo = meetingInfo  
)  
val dyteUIKit = DyteUIKitBuilder.build(dyteUIKitInfo)  
dyteUIKit.startMeeting()  

```

--------------------------------

### Find Participant IDs

Source: https://docs.dyte.io/rn-core/participants/permissions

Retrieve the IDs of participants whose permissions need to be updated. This example filters participants by name starting with 'John'.

```javascript
const participantIds = meeting.participants.joined  
  .toArray()  
  .filter((e) => {  
    return e.name.startsWith('John');  
  })  
  .map((p) => p.id);
```

--------------------------------

### Render All Participants in Dyte React

Source: https://docs.dyte.io/guides/migration/twilio/media

React example using the useDyteSelector hook to get active participants and render each one using the DyteParticipantTile component.

```javascript
const participants = useDyteSelector((m) => m.participants.active);

return (<div>
      {
          participants
             .map((p) => (<DyteParticipantTile participant={p} />)
      }
   </div>);
```

--------------------------------

### Create a Meeting using CLI

Source: https://docs.dyte.io/cli/meetings

Use this command to create a new meeting via the Dyte CLI. No additional setup is required beyond having the CLI installed.

```bash
dyte meetings create  
```

--------------------------------

### Subscribe to Page Change Event

Source: https://docs.dyte.io/rn-core/participants/events

Use this snippet to get notified when the meeting's page changes, for example, in a presentation context. It logs the current page number.

```javascript
meeting.participants.on(
  'pageChanged',
  ({ viewMode, currentPage, pageCount }) => {
    console.log('page changed', currentPage);
  },
);
```

--------------------------------

### Create Meeting with record_on_start

Source: https://docs.dyte.io/guides/capabilities/recording/start-recording

Use this method to automatically start recording as soon as the first participant joins a meeting. Ensure `storage_config` is specified in the Developer Portal.

```curl
curl --request POST \
  --url https://api.dyte.io/v2/meetings \
  --header 'Authorization: Basic <api_authorization_token>' \
  --header 'Content-Type: application/json' \
  --data '{ \
  "title": "Lorem Ipsum", \
  "preferred_region": "ap-south-1", \
  "record_on_start": true \
}'
```

--------------------------------

### Check Active Recording State

Source: https://docs.dyte.io/rn-core/recording

Access the `recordingState` property of the `meeting.recording` object to get the current status of the recording. This helps in understanding if a recording is active, idle, starting, or stopping.

```javascript
meeting.recording.recordingState
```

--------------------------------

### Get Messages by User ID

Source: https://docs.dyte.io/rn-core/chat/other-chat-functions

Retrieve all chat messages sent by a specific user. You first need to find the user's ID, for example, by searching for their name among joined participants.

```javascript
const { userId } = meeting.participants.joined  
  .toArray()  
  .find((p) => p.name === 'Freddie');  
  
const messages = meeting.chat.getMessagesByUser(userId);
```

--------------------------------

### Enable/Disable Screenshare and Get Status (Generic)

Source: https://docs.dyte.io/guides/capabilities/screensharing/basics

This example demonstrates enabling, disabling, and checking the current status of screen sharing using the `meeting.localUser` object. This pattern is applicable across various platforms.

```javascript
meeting.localUser.enableScreenShare();

meeting.localUser.disableScreenShare();

meeting.localUser.screenShareEnabled;
```

--------------------------------

### Download Chat Dump on Client-Side

Source: https://docs.dyte.io/guides/capabilities/chat/export-chat-dump

Example of downloading a chat dump CSV file in the browser. It involves making a GET request, converting the response to a blob, and simulating a click on an anchor element.

```javascript
// 1. Make a GET request to the `chat_download_url`.
// 2. Convert response to blob.
// 3. Create an invisible `<a>` HTML element with download attribute and add the above blob to it's `href`.
// 4. Programmatically click on the `<a>` element so that the browser automatically starts downloading and then remove the `<a>` element.
```

--------------------------------

### Download Chat Dump on Server-Side (Node.js)

Source: https://docs.dyte.io/guides/capabilities/chat/export-chat-dump

Example of downloading a chat dump CSV file on the server using Node.js streams. It involves creating a writable stream, making a GET request, and piping the response body to the file.

```javascript
// 1. Create a writable stream for a local file.
// 2. Make a GET request to `chat_download_url`.
// 3. Get a readable stream using `res.body` and pipe to the writable stream created in the first step.
```

--------------------------------

### Initialize Dyte Client with Audio and Video Defaults

Source: https://docs.dyte.io/web-core/advanced/advance

Configure default audio and video states upon SDK initialization. By default, both are enabled.

```javascript
const meeting = await DyteClient.init({
  authToken,
  defaults: {
    audio: false, // Disable user's audio by default
    video: true, // Enable user's video by default
  },
});
```

--------------------------------

### Run the Transcription Server

Source: https://docs.dyte.io/guides/capabilities/audio/transcriptionGoogle

Start the Node.js server to handle audio data forwarding to Google Cloud. The server's URL will be used as the backend_url.

```bash
npm run dev  
```

--------------------------------

### Start Recording (JavaScript)

Source: https://docs.dyte.io/web-core/recording

Initiate a meeting recording using the `meeting.recording.start()` method. To allow multiple parallel recordings, start the first recording with the `{ allowMultiple: true }` option.

```javascript
await meeting.recording.start();
```

```javascript
await meeting.recording.start({ allowMultiple: true });
```

--------------------------------

### Configure Dyte CLI Recordings

Source: https://docs.dyte.io/cli/recording

Run this command to set up your recording configuration. You will be prompted with a series of questions. Defaults are provided if you are unsure.

```bash
dyte recordings config  
```

--------------------------------

### Customizing In-Call UI with Dyte Components

Source: https://docs.dyte.io/react-native/build-in-call-ui/default-meeting-ui

This example demonstrates how to split the DyteMeeting component's functionalities to build a custom in-call UI. It conditionally renders different UI parts based on the room state, such as the setup screen, header, custom in-call content, and control bar.

```javascript
import {
  DyteSetupScreen,
  DyteEndedScreen,
  DyteHeader,
  DyteParticipantsAudio,
  DyteDialogManager,
  DyteStage,
  DyteGrid,
  DyteNotifications,
  DyteSidebar,
  DyteControlbar,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect } from 'react';

export default function MyMeeting() {
  const { meeting } = useDyteMeeting();
  const roomState = useDyteSelector((m) => m.self.roomState);

  return (
    <View className="flex h-full w-full">
      {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
      {roomState === 'joined' && (
        <View className="flex h-full w-full flex-col">
          <View>
            <DyteHeader meeting={meeting} />
          </View>

          <View
            className="flex w-full flex-1 items-center justify-center"
            style={{
              backgroundColor: '#272727',
              color: '#ffffff',
            }}>
            <DyteText>Custom in-call UI</DyteText>
            <DyteDialogManager meeting={meeting} />
          </View>

          <View className="flex w-full overflow-visible">
            <DyteControlbar meeting={meeting} />
          </View>
        </View>
      )}
      {roomState === 'ended' && <DyteEndedScreen meeting={meeting} />}
    </View>
  );
}
```

--------------------------------

### Install Livestream Dependencies (Expo)

Source: https://docs.dyte.io/react-native/quickstart

Install the livestream product dependencies using `npx expo install` if needed.

```bash
npx expo install amazon-ivs-react-native-player  
```

--------------------------------

### Basic dyte-config.json Example

Source: https://docs.dyte.io/plugin-sdk/setup/customize

This is a sample configuration file for a Dyte plugin, demonstrating the structure and common properties.

```json
{
    "name": "my-plugin",
    "version": "0.0.X",
    "description": "Add a short description for your plugin here",
    "pluginId": "79936149-758e-4d8d-8366-23deaxxxxxxx",
    "picture": "https://dyte-uploads.s3.ap-south-1.amazonaws.com/dyte.png",
    "url": "https://79936149-758e-4d8d-8366-23deaxxxxxxx-latest.plugins.dyte.app",
    "files": {
        "include": [
            "index.html",
            "**/*"
        ],
        "exclude": [
            "**/*.ts",
            "*.md"
        ]
    },
    "tags": ["#plugin"],
    "author": "",
    "repository": ""
}

```

--------------------------------

### Install Native Dependencies (Expo)

Source: https://docs.dyte.io/react-native/quickstart

Install required native dependencies for Expo projects using `npx expo install`.

```bash
npx expo install @dyteinternals/react-native-webrtc react-native-document-picker react-native-file-viewer react-native-fs react-native-safe-area-context react-native-sound-player react-native-svg react-native-webview lodash.merge  
```

--------------------------------

### Initialize DyteClient

Source: https://docs.dyte.io/rn-core/error-codes/error-code-zero-ten

Verify if you initialized the `DyteClient` correctly. See DyteClient for more details.

```javascript
await DyteClient.init({ ... })
```

--------------------------------

### Install Dyte Plugin SDK via yarn

Source: https://docs.dyte.io/plugin-sdk/quickstart

Install the Dyte Plugin SDK package using yarn. This is an alternative to npm for package installation.

```bash
yarn add @dytesdk/plugin-sdk
```

--------------------------------

### Create a Store

Source: https://docs.dyte.io/plugin-sdk/usage/stores-api/manage-stores

Initializes a new store instance. Stores can be global (realtime) or local.

```javascript
const store = plugin.stores.create('myStore');  
```

--------------------------------

### List Installed Plugins

Source: https://docs.dyte.io/plugin-sdk/setup/create

Verify that your plugin has been successfully created and is listed by the Dyte CLI.

```bash
dyte plugins ls
```

--------------------------------

### Dyte Setup Screen Component Props

Source: https://docs.dyte.io/angular-ui-kit/components/dyte-setup-screen

This section details the props available for the Dyte Setup Screen component, which allow for customization of the meeting setup experience.

```APIDOC
## Dyte Setup Screen Component

### Description
A screen shown before joining the meeting, where you can edit your display name, and media settings.

### Props

#### `meeting`
- **Type**: `DyteClient`
- **Required**: Yes
- **Description**: The meeting object used to interact with the Dyte meeting.

#### `config`
- **Type**: `UIConfig`
- **Default**: `defaultConfig`
- **Description**: Configuration object for the UI, allowing customization of various UI elements and behaviors.

#### `iconPack`
- **Type**: `IconPack`
- **Default**: `defaultIconPack`
- **Description**: Custom icon pack to be used in the component.

#### `size`
- **Type**: `"lg" | "md" | "sm" | "xl"`
- **Description**: Specifies the size of the component.

#### `states`
- **Type**: `States`
- **Default**: `storeState`
- **Description**: Object containing the state management for the component.

#### `t`
- **Type**: `DyteI18n`
- **Default**: `useLanguage()`
- **Description**: Language object for internationalization, allowing for custom translations.
```

--------------------------------

### Install Twilio Shim

Source: https://docs.dyte.io/guides/migration/twilio/twilio-shim-by-dyte

Install the Dyte Shim for Twilio from the NPM Registry.

```bash
npm install @dytesdk/twilio-shim  

```

--------------------------------

### Start Recording with AWS S3 Storage Configuration

Source: https://docs.dyte.io/guides/capabilities/recording/custom-cloud-storage

Use this `curl` command to start a recording and specify AWS S3 as the cloud storage destination. Ensure you replace placeholders with your actual credentials and bucket details. This configuration takes precedence over Developer Portal settings.

```curl
curl --request POST \ 
  --url https://api.dyte.io/v2/recordings \ 
  --header 'Authorization: Basic <api_authorization_token>' \ 
  --header 'Content-Type: application/json' \ 
  --data '{  
  "meeting_id": "97440c6a-140b-40a9-9499-b23fd7a3868a",  
  "storage_config": {  
    "type": "aws",  
    "access_key": "your-access-key",  
    "secret_key": "your-secret-key",  
    "bucket": "your-bucket-name",  
    "region": "us-east-1",  
    "path": "/"  
  }  
}'  

```

--------------------------------

### Create DyteRecording Instance

Source: https://docs.dyte.io/guides/capabilities/recording/create-record-app-using-sdks

Instantiate the DyteRecording class with desired options. This sets up the recording manager for your meeting.

```javascript
const recordingSdk = new DyteRecording(options);
```

--------------------------------

### Create Global and Local Plugin Stores

Source: https://docs.dyte.io/plugin-sdk/guides/how-to-work-with-plugin-stores

Demonstrates how to create a global store accessible to all users and a local store accessible only to the current user. Store creation is a local event and should be initiated by all clients.

```javascript
    // create a global store  
    const videoStore = plugin.stores.create('youtube');  
  
    // create a local store  
    const my-playlist = plugin.stores.create('private-playlist', { local: true });  
```

--------------------------------

### Install react-native-svg

Source: https://docs.dyte.io/guides/realtimekit-migration/sdk-guide?framework=react-native

Install the `react-native-svg` dependency, following its specific version compatibility instructions.

```bash
npm install react-native-svg@<compatible-version>
```

--------------------------------

### Launch Meeting UI (Kotlin)

Source: https://docs.dyte.io/android

Call the startMeeting() method on the initialized DyteUIKit instance to launch the meeting user interface.

```kotlin
dyteUIKit.startMeeting()
```

--------------------------------

### Initialize and Start Dyte Meeting UI

Source: https://docs.dyte.io/ios/components/dyte-meeting

Initializes the DyteUiKit with meeting information and starts the meeting UI. Use this to quickly render a full meeting experience.

```swift
self.dyteUikit = DyteUiKit.init(meetingInfoV2:  
                  DyteMeetingInfoV2(authToken: authToken,  
                  enableAudio: false,  
                  enableVideo: false,  
                  baseUrl: Constants.BASE_URL_INIT),
                  flowDelegate: nil)  
let controller =  self.dyteUikit.startMeeting {  
    [weak self] in  
    guard let self = self else {return}
    self.dismiss(animated: true)  
    self.view.hideActivityIndicator()  
}  
controller.modalPresentationStyle = .fullScreen  
self.present(controller, animated: true)  

```

--------------------------------

### Initialize Dyte Settings Video Component

Source: https://docs.dyte.io/ui-kit/components/dyte-settings-video

Example of how to initialize and use the `dyte-settings-video` component in HTML and JavaScript. Ensure the `meeting` object is available in the scope.

```html
<dyte-settings-video id="dyte-el"></dyte-settings-video>

<script>
  const el = document.getElementById('dyte-el');
  el.meeting = meeting;
</script>
```

--------------------------------

### Install Expo Config Plugins

Source: https://docs.dyte.io/react-native/quickstart

Install the Expo config plugins if they are not already present in your project.

```bash
npx expo install @expo/config-plugins  
```

--------------------------------

### Initialize Recording SDK

Source: https://docs.dyte.io/guides/capabilities/recording/create-record-app-using-sdks

Initialize the recording SDK with a DyteClient object after creating the meeting object and before joining the room. This step is crucial for the SDK to function correctly.

```javascript
// Call this after you have called initMeeting  
await recordingSdk.init();
```

--------------------------------

### Launch Meeting UI (Java)

Source: https://docs.dyte.io/android

Call the startMeeting() method on the initialized DyteUIKit instance to launch the meeting user interface.

```java
dyteUIKit.startMeeting();
```

--------------------------------

### Create a Webhook

Source: https://docs.dyte.io/cli/webhooks

Run this command to create a new webhook. Ensure you have the Dyte CLI installed and configured.

```bash
dyte webhooks create  
```

--------------------------------

### Configure Meeting with Default Audio/Video Settings

Source: https://docs.dyte.io/android-core/local-user/introduction

Set initial audio and video states when configuring the meeting. Use `audioEnabled` and `videoEnabled` parameters.

```Java
DyteMeetingInfoV2 meetingInfo = new DyteMeetingInfoV2(
      AUTH_TOKEN,
      false,
      true,
      "dyte.io"
    );
```

--------------------------------

### Install CocoaPods Dependency

Source: https://docs.dyte.io/guides/live-video/client-setup/ios

Run this command in your terminal to install the client SDK as a CocoaPods dependency.

```bash
pod install
```

--------------------------------

### Start Livestream

Source: https://docs.dyte.io/flutter-core/livestream

Initiate a livestream using the start method. This functionality is dependent on preset permissions.

```dart
dyteClient.livestream.start();
```

--------------------------------

### Audio/Video Preview with Imports and Hook

Source: https://docs.dyte.io/react-ui-kit/build-pre-call-ui/build-your-own/add-audio-video-preview

This example demonstrates a complete React component for a meeting preview. It includes necessary imports from '@dytesdk/react-ui-kit' and '@dytesdk/react-web-core', and uses the `useDyteMeeting` hook to access meeting context. The component renders a participant tile with controls within a styled container.

```jsx
import {
DyteParticipantTile, DyteAvatar, DyteNameTag,
DyteAudioVisualizer, DyteMicToggle, DyteCameraToggle, DyteButton,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting } from '@dytesdk/react-web-core';

export default function CustomMeetingPreview() {
const { meeting } = useDyteMeeting();

return (

<div
className="h-full w-full flex flex-col items-center justify-center"
style={{ minHeight: '400px' }}
>
<div className="flex w-full items-center justify-around p-[10%]">
  <div className="relative">
    <DyteParticipantTile participant={meeting.self}>
      <DyteAvatar participant={meeting.self} />
      <DyteNameTag participant={meeting.self}>
        <DyteAudioVisualizer participant={meeting.self} slot="start" />
      </DyteNameTag>
      <div
        id="user-actions"
        className="absolute flex"
        style={{
          bottom: '8px',
          right: '8px',
        }}
      >
        <DyteMicToggle size="sm"></DyteMicToggle>
        <DyteCameraToggle size="sm"></DyteCameraToggle>
      </div>
    </DyteParticipantTile>
  </div>
```

--------------------------------

### Install Livestream Dependencies (npm)

Source: https://docs.dyte.io/react-native/quickstart

Install additional dependencies if you need to use the interactive livestream product.

```bash
npm install amazon-ivs-react-native-player  
```

--------------------------------

### Install RealtimeKit React Native Packages

Source: https://docs.dyte.io/guides/realtimekit-migration/sdk-guide

Install the core and UI packages for RealtimeKit React Native.

```bash
npm install @cloudflare/realtimekit-react-native @cloudflare/realtimekit-react-native-ui  
```

--------------------------------

### Display and Configure WebinarAlertView

Source: https://docs.dyte.io/ios/components/dyte-join-stage

Demonstrates how to create, display, and configure event handlers for the WebinarAlertView. This example shows adding the alert view to a controller's view and setting up target actions for its confirm and cancel buttons.

```swift
let alert = WebinarAlertView(meetingClient: meeting, participant: meeting.localUser)
alert.layer.zPosition = 1.0
baseController.view.addSubview(alert)
alert.confirmAndJoinButton
  .addTarget(self,
            action: #selector(alertConfirmAndJoinClick(button:)),
            for: .touchUpInside)
alert.cancelButton
  .addTarget(self,
            action: #selector(alertCancelButton(button:)),
            for: .touchUpInside)
```

--------------------------------

### Initialize SDK

Source: https://docs.dyte.io/plugin-sdk/usage/basic/methods

Initializes the SDK and returns a plugin object. The Client SDK receives a `ready` event once initialization is complete, signifying that the plugin is ready for event/data exchange.

```APIDOC
## Initialize

### Description
Initializes the SDK and returns a plugin object. The Client SDK (web/mobile) receives a `ready` event once the initialisation is complete. The `ready` event signifies that the plugin is now ready for event/data exchange.

### Method
`DytePlugin.init()`

### Request Example
```javascript
const plugin = await DytePlugin.init();
```
```
Tokens:
Raw