TTFS: Time To First Sentence, the first sentence latency. | 250-1000 | | TTS | `tts_ttfb` | Time To First Byte. The response latency from when the TTS request starts to when the first byte is received. | 100-350 | | Avatar rendering | Rendering latency | The latency from when the avatar module receives the first frame of TTS audio to when it generates and synchronizes the first frame of audio and video (if enabled) | 50-200 | \* Algorithm preprocessing latency is based on `silence_duration_ms` set to 640 ms. Adjusting this parameter affects preprocessing latency.
Conversational AI Engine workflow
Transcript rendering workflow
{message.uid}: {message.text}
))}
)
}
```
6. **Add a conversational AI agent to the channel**
To [start a conversational AI agent](/en/api-reference/api-ref/conversational-ai/join), configure the following parameters in your `POST` request:
| Parameter | Description | Required |
| --------------------------------------- | -------------------------------------------------- | -------- |
| `advanced_features.enable_rtm: true` | Starts the Signaling service | Yes |
| `parameters.data_channel: "rtm"` | Enables Signaling as the data transmission channel | Yes |
| `parameters.enable_metrics: true` | Enables agent performance data collection | Optional |
| `parameters.enable_error_message: true` | Enables reporting of agent error events | Optional |
After a successful response, the agent joins the specified RTC channel and is ready to interact with the user.
7. **Unsubscribe from the channel**
After each agent session ends, unsubscribe from channel messages to release resources associated with callback events.
```ts
conversationalAIAPI.unsubscribeMessage(channel_name)
```
8. **Release resources**
At the end of each call, use the `destroy` method to clean up the cache.
```ts
conversationalAIAPI.destroy()
```
or add it manually with the following JSON:
```json
{
"mcpServers": {
"agora-docs": {
"url": "https://mcp.agora.io"
}
}
}
```
Agora Web SDK Quickstart
Electron Quickstart
``` ## Test the sample code [#test-the-sample-code-5] Take the following steps to test the sample code: 1. Update the `APPID`, `token`, and `channel` parameter values in your code. 2. To run the app, execute the following command in the project root directory: ```bash npm start ``` You see a window pop up showing the local video. 3. Invite a friend to run the demo app on a second device. Alternatively, use the [Web demo](https://webdemo.agora.io/basicVideoCall/index.html) to join the same channel. * If users on both devices join the channel as hosts, they can see and hear each other. * If one user joins as host and the other as audience, the host can see themselves in the local video window; the audience can see the host in the remote video window and hear the host. ## Reference [#reference-5] This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product. * If a firewall is deployed in your network environment, refer to [Connect with Cloud Proxy](build/optimize-quality-and-connection/cloud-proxy.mdx) to use Agora services normally. ### Next steps [#next-steps-5] After implementing the quickstart sample, read the following documents to learn more: * To ensure communication security in a test or production environment, best practice is to obtain and use a token from an authentication server. For details, see [Secure authentication with tokens](build/authenticate-users/use-tokens.mdx). ### Sample project [#sample-project-5] Agora provides open source sample projects on [GitHub](https://github.com/AgoraIO-Extensions/Electron-SDK/tree/main/example/src/renderer/examples) for your reference. Download or view the [JoinChannelVideo](https://github.com/AgoraIO-Extensions/Electron-SDK/blob/main/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx) project for a more detailed example. ### API Reference [#api-reference-5] * [`createAgoraRtcEngine`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_createagorartcengine) * [`joinChannel`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_joinchannel2) * [`enableVideo`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_enablevideo) * [`startPreview`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_startpreview) * [`leaveChannel`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_leavechannel2) * [`release`](https://api-ref.agora.io/en/video-sdk/electron/4.x/API/class_irtcengine.html#api_irtcengine_release) ### Frequently asked questions [#frequently-asked-questions-4] * [How can I resolve common development issues on Electron?](/en/api-reference/faq/integration/electron_faq) * [How can I fix black screen issues?](/en/api-reference/faq/quality/video_blank) * [Why can't I turn on the camera?](/en/api-reference/faq/quality/video_camera) * [How can I listen for audience joining or leaving a channel?](/en/api-reference/faq/integration/audience_event) * [How can I solve channel-related issues?](/en/api-reference/faq/integration/channel) * [How can I set the log file?](/en/api-reference/faq/integration/set_log_file) ### See also [#see-also-5] * [Error codes](reference/error-codes.md) * [Connection status management](build/optimize-quality-and-connection/connection-status-management.mdx) <_PlatformProcessedMarker close="true" /> <_PlatformPanel platform="flutter"> <_PlatformProcessedMarker groupMode="structured" canonicalPlatform="web" platform="flutter" /> This page provides a step-by-step guide on how to create a basic Broadcast Streaming app using the Agora Video SDK. ## Understand the tech [#understand-the-tech-6] To start a Broadcast Streaming session, implement the following steps in your app: * **Initialize the Agora Engine**: Before calling other APIs, create and initialize an Agora Engine instance. * **Join a channel**: Call methods to create and join a channel. * **Join as a host**: A live streaming event has one or more hosts. A host publishes audio and video to the channel. Hosts can also subscribe to streams from other hosts. * **Join as audience**: Audience members can only subscribe to streams published by hosts. * **Send and receive audio and video**: Hosts publish streams to the channel. Audience members subscribe to audio and video streams published by hosts.  ## Prerequisites [#prerequisites-6] * [Flutter](https://docs.flutter.dev/get-started/install) 2.10.5 or higher with Dart 2.14.0 or higher. * [Android Studio](https://developer.android.com/studio), IntelliJ, VS Code, or any other IDE that supports Flutter. See [Set up an editor](https://docs.flutter.dev/get-started/editor). * Prepare your development and testing environment according to your [target platform](reference/supported-platforms.md). Run the `flutter doctor` command to confirm that your development environment is set up correctly for Flutter development. * A camera and a microphone * A valid Agora account and project. Please refer to [Agora account management](manage-agora-account.md) for details. ## Set up your project [#set-up-your-project-6] This section shows you how to set up your Flutter project and install the Agora Video SDK. **Create a new project** From the Terminal, run the following commands to create a new project named `agora_project`, or follow the [steps for your IDE](https://docs.flutter.dev/get-started/test-drive?tab=vscode#choose-your-ide): ```bash flutter create agora_project cd agora_project ``` **Add to an existing project** To add Broadcast Streaming to your existing project: 1. Open your Flutter project and navigate to the `lib` folder. 2. Add a new file to the `lib` folder and name it `agora_logic.dart`. ### Install the SDK [#install-the-sdk-6] Install the Agora Video SDK and other dependencies. 1. Add the [latest version](https://pub.dev/packages/agora_rtc_engine) of Agora Video SDK to your Flutter project: ```bash flutter pub add agora_rtc_engine ``` 2. Add the permission processing package: ```bash flutter pub add permission_handler ``` The `dependencies` in your `pubspec.yaml` file should look like the following: ```yaml dependencies: flutter: sdk: flutter agora_rtc_engine: ^6.5.0 # Agora Flutter SDK, please use the latest version permission_handler: ^11.3.1 # Package for managing runtime permissions cupertino_icons: ^1.0.8 ``` 3. Install the dependencies. Execute the following command in the project path: ```bash flutter pub get ``` ## Implement Broadcast Streaming [#implement-broadcast-streaming-6] This section guides you through the implementation of basic real-time audio and video interaction in your app. The following figure illustrates the essential steps:
{isConnected ? (
You
{remoteUsers.map((user) => (
{user.uid}
))}
) : (
{isConnected && (
setAppId(e.target.value)}
placeholder=""
value={appId}
/>
setChannel(e.target.value)}
placeholder=""
value={channel}
/>
setToken(e.target.value)}
placeholder=""
value={token}
/>
)}
\*\* Custom nodes are not included in the blueprint. You create a custom function before you can add the corresponding node. ### Add channel-related variables [#add-channel-related-variables] Add variables to create an engine instance and join a channel. 1. Create three variables: **Token**, **ChannelId**, and **AppId**. Select the **Variable Type** as **String**. 2. In the **Load Agora Config** function, add the **Sequence** node, and then connect **Set Token**, **Set Channel Id**, and **Set App Id** respectively. Fill in the token, channel name, and app ID values obtained from Agora Console.  ### Initialize RTC engine [#initialize-rtc-engine] 1. If your target platform is Android, check whether system permissions have been granted before initializing the RTC engine. Refer to the following figure to create nodes for adding permissions to access the microphone and camera in the **CheckPermission** function. 
or add it manually with the following JSON:
```json
{
"mcpServers": {
"agora-docs": {
"url": "https://mcp.agora.io"
}
}
}
```
Chat SDK workflow
API call sequence
Agora Chat Examples
{!isLoggedIn ? ( <>
setUserId(e.target.value)}
placeholder="Enter the user ID"
/>
setToken(e.target.value)}
placeholder="Enter the token"
/>
) : (
<>
Welcome, {userId}
setPeerId(e.target.value)}
placeholder="Enter the peer user ID"
/>
setMessage(e.target.value)}
placeholder="Input message"
/>
)}
Operation log
{logs.map((log, index) => (
{log}
))}