th3m1ke / mediadevices-camera-selection

Examples on how to switch devices with the mediaDevices API

mediaDevices Camera Selection

An example of using the mediaDevices API to choose a user's camera.

This repo now covers a couple of projects showing how to use this.

• The basics
• As part of a video chat

Basics on mediaDevices and camera selection

To see how to use the API with vanilla JavaScript and a basic example. Check out the blog post on choosing cameras in JavaScript with the mediaDevices API.

See it in action

You can test the basic version of this project by visiting it online here.

Run the project yourself

You should run this project on a local web server. I like to use serve for this, but you can do so as you choose.

Clone or download the repo, then change into the directory and host the files.

git clone https://github.com/philnash/mediadevices-camera-selection.git
cd mediadevices-camera-selection

If you want to use serve, you can install and use it with npm like so:

npm install
npm run serve

The page will be available at localhost:5000/index.html.

Selecting cameras during a video chat

This repo contains a modified version of the Twilio Video quickstart application with added camera selection.

Run the project yourself

Clone or download the repo, then change into the directory and install the dependencies.

git clone https://github.com/philnash/mediadevices-camera-selection.git
cd mediadevices-camera-selection
npm install

Copy the .env.template file to .env and fill in the details from your Twilio account.

Run the application with:

npm start

You can now view the application at localhost:3000. Join a room, then use the select element to change your camera. To test this with a mobile device and switch between front and back cameras, I recommend using ngrok as described below.

Viewing on a mobile device.

If you want to test this on a mobile device, you will need to make a tunnel to your local machine. I recommend you use ngrok for this. You can download and install ngrok from ngrok.com. Once you have it installed, run

ngrok http 5000

This will open a tunnel to the locally hosted project. You will get two randomly generated URLs, enter the HTTPS version into the browser in your mobile device.