Discover an immersive spatial audio experience through a web application showcasing the Dolby.io Communications API's capabilities on a browser.
- Create and join a spatial conference / event,
- Navigate in a 3d environment,
- Interact with remote participants in a 3d world,
- Use video capabilities (device selection, broadcast video, ...),
- Use audio capabilities (device selection, toggle local audio, ...),
- Share your screen,
- More to come...
- A valid Dolby.io account (CPaaS - add voice and video to the application),
- A valid PubNub account (Real-Time communication platform - 3D locations synchronisation).
Clone this repository to your desktop:
git clone https://github.com/dolbyio-samples/comms-web-demo.git
After cloning this repository, go to its root directory and run the following command to install all the dependencies
cd comms-web-demo
npm install
Once the dependencies are installed, create a .env file at the root of this project. Edit it as follow:
VITE_CLIENT_ACCESS_TOKEN=[CLIENT_ACCESS_TOKEN] # your client access token, retrieved from Dolby.io (if you don't have a valid authentication server).
# note: this token will be valid only 12h and refresh token mechanism will not work.
#or
VITE_AUTH_URL=[AUTH_URL] # your own authentication server url
VITE_PUBNUB_PUBLISHER_KEY=[PUBNUB_PUBLISHER_KEY] # PubNub publisher application key
VITE_PUBNUB_SUBSCRIBER_KEY=[PUBNUB_SUBSCRIBER_KEY] # PubNub subscriber application key
Once the dependencies are installed, you can run the following command to start the application in development mode:
npm run dev
Then, you will able to access it at http://127.0.0.1:5173/
If you want to build the application instead, run the following script:
npm run build
Once done, you can locally preview the production build :
npm run preview
To run unit tests, run one of the following commands:
Watch mode:
npm run test
Coverage:
npm run coverage
- react (user interfaces)
- react three fiber ( react renderer for Three.js)
- drei (helpers for react-three-fiber)
- react three rapier (physics engine)
- three.js (3D library)
- redux (state management)
- redux-saga (side effect management)
- Vite (frontend tooling)
- Vitetest (blazing fast unit test framework)
- Prettier (code formatter)