Client Messaging in a Dolby.io Video Conference

Sample implementation for JavaScript (Web) of the CommandService for multiple participants to move avatars across the screen.

Overview

This project will demonstrate how to send text and data between participants connected to a session with JavaScript.

Requirements

For this project, you need a Dolby.io account to acquire an API key and Secret Key for authentication. In addition to that, you will also need CommandService API credentials, but instructions on retrieving these credentials are available in the guide and Python libraries.

Getting Started

Replace CUSTOMER_KEY and CUSTOMER_SECRET inside client.js with your own key and secret. To run the app locally, open index.html in your browser with a live server.

What's Inside

📁 icons/

• svg files for button icons and dolbyio logo

📁 scripts/

• 📄 client.js
  • Recieves and handles events emitted by the Conference and Command objects
  • Initializes VoxeetSDK using customer key and secret
  • Opens a Voxeet session
• 📄 ui.js
  • handles joining conference, leaving conference, starting video, stopping video
  • UI helper functions
• 📄 utils.js
  • sends CommandService object when avatar moves
  • handles movement of avatar
  • handles updating conference name in URL as user types conference name
• 📄 video.js
  • tracks which participant is in which video container
  • handles appending and removing video nodes on the DOM as participants join/leave conference and turns video on/off

📄 index.css

• styling
• additional formatting done with Bootstrap

📄 index.html

• main entry file

Report a Bug

In the case any bugs occur, report it using Github issues, and we will see to it.

Forking

We welcome your interest in trying to experiment with our repos.

Feedback

If there are any suggestions or if you would like to deliver any positive notes, feel free to open an issue and let us know!

Learn More

For a deeper dive, we welcome you to review the following:

• Communications API
• Getting Started with Web SDK
• Kickstart Video Calls for Your React Web App with UIKit
• Creating A Fixed Place Spatial Environment for Video Conferencing
• Blog Session - Communciations API

About Dolby.io

Using decades of Dolby's research in sight and sound technology, Dolby.io provides APIs to integrate real-time streaming, voice & video communications, and file-based media processing into your applications. Sign up for a free account to get started building the next generation of immersive, interactive, and social apps.