{"id":20268660,"url":"https://github.com/agoraio/video-sdk-samples-reactjs","last_synced_at":"2026-03-10T23:37:33.344Z","repository":{"id":185392737,"uuid":"639693023","full_name":"AgoraIO/video-sdk-samples-reactjs","owner":"AgoraIO","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-27T18:18:42.000Z","size":3050,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-04T21:11:10.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AgoraIO.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-12T02:41:41.000Z","updated_at":"2024-03-16T17:39:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"84312c33-970e-45bc-b1a4-2f005f266cd9","html_url":"https://github.com/AgoraIO/video-sdk-samples-reactjs","commit_stats":null,"previous_names":["agoraio/video-sdk-samples-reactjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AgoraIO/video-sdk-samples-reactjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AgoraIO%2Fvideo-sdk-samples-reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AgoraIO%2Fvideo-sdk-samples-reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AgoraIO%2Fvideo-sdk-samples-reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AgoraIO%2Fvideo-sdk-samples-reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AgoraIO","download_url":"https://codeload.github.com/AgoraIO/video-sdk-samples-reactjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AgoraIO%2Fvideo-sdk-samples-reactjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30362123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T12:19:14.174Z","updated_at":"2026-03-10T23:37:33.312Z","avatar_url":"https://github.com/AgoraIO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Agora Video SDK for ReactJS reference app\n\nThis app demonstrates use of [Agora's Video SDK](https://docs.agora.io/en/video-calling/get-started/get-started-sdk) for real-time audio and video communication. It is a robust and comprehensive documentation reference app for Android, designed to enhance your productivity and understanding. It's built to be flexible, easily extensible, and beginner-friendly.\n\nClone the repo, run and test the samples, and use the code in your own project. Enjoy.\n\n- [Samples](#samples)\n- [Prerequisites](#prerequisites)\n- [Run this project](#run-this-project)\n- [Contact](#contact)\n\n## Samples\n\nThe runnable code examples are:\n\n- [SDK quickstart](./src/get-started-sdk/README.md) - The minimum code you need to integrate high-quality, low-latency Video \n  Calling features into your app using Video SDK.\n- [Authentication Workflow](./src/authentication-workflow/README.md) - Authenticate the current user and channel with a token \n  retrieved from a token server.\n- [Connect through restricted networks with Cloud Proxy](./src/cloud-proxy/README.md) - Connect from an environment \n  with a restricted network.\n- [Stream media to a channel](./src/play-media/README.md) - Use the media player classes in Video SDK to enable your \n  users to publish media files to a channel.\n- [Call quality best practice](./src/ensure-call-quality/README.md) - use Video SDK features to  ensure optimal audio and video quality in your app.\n- [Audio and voice effects](./src/audio-and-voice-effects/README.md) - Modify the captured audio to add sound \n  effects, mix in a pre-recorded audio, or change the voice quality. \n\n- [Geofencing](./src/geofencing/README.md) - Control and customize data routing in your app by specifying the Agora SD-RTN™ \n  region users \n  connect to.\n- [Custom video and audio sources](./src/custom-audio-and-video/customVideoAudioManager.tsx) - Customize your audio and video sources.\n\n- [Screen share, volume control and mute](./src/product-workflow/productWorkflowManager.tsx) -  implement a simple workflow in your app.\n\n- [Live streaming over multiple channels](./src/live-streaming-over-multiple-channels/liveStreamingMultipleChannels.tsx) -  Join multiple channels at the same time and broadcast or receive audio and video over them.\n\n## Prerequisites\n\nBefore getting started with this reference app, ensure you have the following set up:\n\n- A [supported browser](../reference/supported-platforms#browsers).\n- Physical media input devices, such as a camera and a microphone.\n- A JavaScript package manager such as [npm](https://www.npmjs.com/package/npm).\n\n## Run this project\n\nTo run the sample projects in this folder, take the following steps:\n\n\n1. **Clone the repository**\n\n    To clone the repository to your local machine, open Terminal and navigate to the directory where you want to clone the repository. Then, use the following command:\n\n    ```bash\n    git clone https://github.com/AgoraIO/video-sdk-samples-reactjs\n    ```\n\n1. **Install the dependencies**\n\n    In Terminal, navigate to `video-sdk-samples-reactjs`, and execute the following command.\n\n    ``` bash\n    npm install\n    ```\n\n1. **Modify the project configuration**\n\n   The app loads connection parameters from the [`config.json`](.`src/agora-manager/config.json`) file. Ensure that the file is populated with the required parameter values before running the application.\n\n    - `uid`: The user ID associated with the application.\n    - `appId`: (Required) The unique ID for the application obtained from [Agora Console](https://console.agora.io). \n    - `channelName`: The default name of the channel to join.\n    - `rtcToken`: An token generated for `channelName`. You generate a temporary token using the [Agora token builder](https://agora-token-generator-demo.vercel.app/).\n    - `serverUrl`: The URL for the token generator. See [Secure authentication with tokens](authentication-workflow) for information on how to set up a token server.\n    - `tokenExpiryTime`: The time in seconds after which a token expires.\n\n    If a valid `serverUrl` is provided, all samples use the token server to obtain a token except the **SDK quickstart** project that uses the `rtcToken`. If a `serverUrl` is not specified, all samples except **Secure authentication with tokens** use the `rtcToken` from `config.json`.\n\n1. **Build and run the project**\n\n     In Terminal, run the following command:\n\n    ``` bash\n    yarn dev\n    ```\n\n1. **Run the samples in the reference app**\n\n   1. Open the project in your browser. The default URL is http://localhost:5173/.\n\n   1. In the dropdown, select this document and test \u003cVpd k=\"PRODUCT\" /\u003e.\n\n## Contact\n\nIf you have any questions, issues, or suggestions, please file an issue in our [GitHub Issue Tracker](https://github.com/AgoraIO/video-sdk-samples-reactjs/issues).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagoraio%2Fvideo-sdk-samples-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagoraio%2Fvideo-sdk-samples-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagoraio%2Fvideo-sdk-samples-reactjs/lists"}