The code in this repo demonstrates how to use MediaPipe and Agora to implement responsive virtual avatars within Agora Live Video streams.
For an explination of the code: View GUIDE.md
Ping the token server: << Send Ping >>
Once token server responds, test the build: https://digitallysavvy.github.io/agora-mediapipe-readyplayerme/
-
Clone the repo
-
Copy
.env-example
file and rename to.env
cp .env-example .env
-
Set the APP_ID, and TOKEN_SERVER env variables in the .env file
- Follow steps in setup
- Open the terminal and navigate to repo folder
- Use this command to run dev mode with local webserver:
npm run dev
-
Follow steps in setup
-
Open the terminal and navigate to repo folder
-
Use this command to run the build script:
npm run build
-
Upload the contents of the new
dist
folder to your webserver -
Make sure the server has your Agora API key, and Agora Token server url are set in the environment variables using the env variables
VITE_AGORA_APP_ID
&VITE_AGORA_TOKEN_SERVER_URL
This project is setup with a GitHub actions workflow to deploy the project to GitHub pages, if enabled in the project settings.
To enable GitHub Pages build via GitHub Actions:
- Clone or Fork the project (https://github.com/digitallysavvy/agora-mediapipe-readyplayerme/)
- Click the project's Settings tab
- Click the Pages tab in the left column menu
- Under Build and deployment, select GitHub Actions as the Source
- Click the Environments tab in the left column menu
- Click github-pages from the Environments list
- Click Add variable under the Environment variable section
- Set the name
VITE_AGORA_APP_ID
and your Agora AppId as the value. - Repeat step 8 and add
VITE_AGORA_TOKEN_SERVER_URL
and the url to your agora token service url. - (optional) If you used a different name for your github repo, update the
vit.config.js
file to update the url if you change the project name