Run the Sample Project

Introduction

Agora provides an open-source Basic-Video-Broadcasting sample project on GitHub. This document introduces how to run this project and experience live video streaming implemented by the Agora SDK.

You can also use this online demo and try live video streaming implemented by the Agora SDK.

Prerequisites

• A valid Agora account.
• An Agora project with an App ID and a temp token
• A Windows or macOS computer meets the following requirements:
  • Access to the Internet. If your network has a firewall, follow the instructions in Firewall Requirements to access Agora services.
  • A browser that matches the supported browser list. Agora highly recommends using the latest version of Google Chrome.
  • Physical media input devices, such as a built-in camera and a built-in microphone.
  • An Intel 2.2GHz Core i3/i5/i7 processor (2nd generation) or equivalent
• Node.js LTS.

Procedure

1. Create an Agora project

To create an Agora project, do the following:

1. Enter the Project Management page.
2. Click Create.
3. Follow the on-screen instructions to enter a project name and use case, and check Secured mode: APP ID + Token (Recommended) as the authentication mechanism.
4. Click Submit. You can now see the project on the Project Management page.

2. Get an App ID

Agora automatically assigns each project an App ID as a unique identifier.

To copy this App ID, find your project on the Project Management page in Agora Console, and click the icon in the App ID column.

3. Generate a temporary token

To ensure communication security, Agora recommends using tokens to authenticate users joining a channel.

For testing purposes, Agora Console supports generating RTC temporary tokens. To generate an RTC temporary token:

1. On the Project Management page, find your project and click Config.
   
2. Click Generate temp RTC token under Primary Certificate.
   
3. Enter the name of the channel that you want to join, and click Generate. When joining the channel later, ensure that the channel name is the same with the one you enter here.
4. Click the copy icon to copy the temporary token.

4. Integrate the Agora SDK

Integrate the Agora SDK into the sample project, as follows:

1. Download the Basic-Video-Broadcasting repository, and find the OpenLive-Web sample project.
2. Change the directory to OpenLive-Web with the cd command in the terminal.
3. Run npm install to install the dependencies and integrate the Agora Web SDK.

5. Start a live video streaming

Run the sample project to start a live video streaming, as follows:

1. Rename the extension of the .env.example file to .env in the sample project folder.

   The .env.example file is a hidden file, and you may need to change the system settings to show this file.

2. Open the .env file, replace <#YOUR Agora.io APP ID#> with the App ID of your Agora project, and replace <#YOUR Agora.io APP TOKEN#> with the temporary token generated in Agora Console.

   Both the App ID and the temporary token should be in string format, as the following figure shows.

3. Change the directory to OpenLive-Web with the cd command in the terminal, and then run npm run dev to run the sample app.

   The sample app opens in your default browser.
   

   If the sample app does not open automatically, you can visit http://localhost:3000 in your browser to open it manually.

4. Enter the channel name that you used to generate the temporary token, and then click Start Live Streaming to start the live video streaming as a host. You need to allow the browser to access your camera and microphone in the pop-up window. You should see a video stream of yourself on the page.

   If you start the live video streaming after choosing the audience icon, the browser will not request access to your camera and microphone, and you will not see the local video stream of yourself on the page.

If the sample project does not work properly, open the browser console and check for errors. The following are the most likely errors:

• INVALID_VENDOR_KEY: Incorrect App ID or token. Ensure that you enter the correct App ID and token.
• DYNAMIC_USE_STATIC_KEY: Token missing. Because your Agora project enables App Certificate, you need a token to join the channel.
• Media access:NotFoundError: Camera/microphone error. Check that your camera and microphone are working properly.