Adds a selection menu to choose a microphone, camera, and speaker from the list of media devices that can be controlled by the browser.
This blog focuses on utilizing the Communication API to enable control over media devices in video conferencing applications, empowering end-users to manage and switch their devices during conferences.
You will need four items for this tutorial: a Dolby.io account, a working webcam, a speaker, and a microphone.
Here is how to set up and run this project locally.
- Sign up for a free Dolby.io account here.
- Create a new application and save the Communications API key and secret.
-
Clone this repo and change directory.
$ git clone https://github.com/dolbyio-samples/comms-app-web-media-device-picker $ cd blog-browser-getting-started-media-device-picker -
Replace this line in client.js with your Dolby.io Communications API key and secret.
VoxeetSDK.initialize('customerKey', 'customerSecret');
-
Start a simple http server to access the conference web application
$ cd src && npx http-server -a localhost -p 8000 -c-1 -o ./
-
Open the application in your web browser at localhost:8000.
Chrome has deprecated support for accessing media devices through insecure origins (http://) and visiting a local web page through it's HTML file is not recognized as a secure origin (https://). However, you can test the Communications API's media devices feature through your machine's localhost since it is treated as a secure origin on Chrome and other Chromium browsers.
Safari on macOS (as of v15.0) still supports accessing media devices through insecure origins, so you can open the index.html file on there without starting a HTTP server for testing purposes.
In the case any bugs occur, report it using Github issues, and we will see to it.
We welcome your interest in trying to experiment with our repos.
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!
For a deeper dive, we welcome you to review the following:
- Communications API
- Getting Started with Web SDK
- Deliver Video Conference Recordings with Webhooks and AWS Lambda
- How-to Build a Video Call App for Music Lessons or Live Performances
- How to Remove Background Noise from Audio
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.
