{"id":18112064,"url":"https://github.com/philnash/mediadevices-camera-selection","last_synced_at":"2025-07-14T23:04:43.104Z","repository":{"id":31552250,"uuid":"128173503","full_name":"philnash/mediadevices-camera-selection","owner":"philnash","description":"🎥 Examples on how to switch devices with the mediaDevices API","archived":false,"fork":false,"pushed_at":"2023-07-11T19:43:43.000Z","size":1372,"stargazers_count":168,"open_issues_count":4,"forks_count":65,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T15:53:04.751Z","etag":null,"topics":["camera","getusermedia","mediadevices","webrtc"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philnash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"philnash"}},"created_at":"2018-04-05T07:34:50.000Z","updated_at":"2025-02-11T23:06:32.000Z","dependencies_parsed_at":"2025-05-07T15:44:40.467Z","dependency_job_id":"281a27ba-c487-43e6-be22-1e5a5edc5249","html_url":"https://github.com/philnash/mediadevices-camera-selection","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/philnash/mediadevices-camera-selection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fmediadevices-camera-selection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fmediadevices-camera-selection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fmediadevices-camera-selection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fmediadevices-camera-selection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philnash","download_url":"https://codeload.github.com/philnash/mediadevices-camera-selection/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philnash%2Fmediadevices-camera-selection/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265365543,"owners_count":23753349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["camera","getusermedia","mediadevices","webrtc"],"created_at":"2024-11-01T01:09:19.949Z","updated_at":"2025-07-14T23:04:43.077Z","avatar_url":"https://github.com/philnash.png","language":"JavaScript","funding_links":["https://github.com/sponsors/philnash"],"categories":[],"sub_categories":[],"readme":"# mediaDevices Camera Selection\n\nAn example of using the [mediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) API to choose a user's camera.\n\nThis repo now covers a couple of projects showing how to use this.\n\n* [The basics](#basics-on-mediadevices-and-camera-selection)\n* [As part of a video chat](#selecting-cameras-during-a-video-chat)\n\n## Basics on mediaDevices and camera selection\n\nTo 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](https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html).\n\n### See it in action\n\nYou can test the basic version of this project by [visiting it online here](https://philnash.github.io/mediadevices-camera-selection/).\n\n### Run the project yourself\n\nYou should run this project on a local web server. I like to use [serve](https://www.npmjs.com/package/serve) for this, but you can do so as you choose.\n\nClone or download the repo, then change into the directory and host the files.\n\n```bash\ngit clone https://github.com/philnash/mediadevices-camera-selection.git\ncd mediadevices-camera-selection\n```\n\nIf you want to use serve, you can install and use it with npm like so:\n\n```bash\nnpm install\nnpm run serve\n```\n\nThe page will be available at [localhost:5000/index.html](http://localhost:5000/index.html).\n\n## Selecting cameras during a video chat\n\nThis repo contains a modified version of the [Twilio Video quickstart application](https://github.com/twilio/video-quickstart-js) with added camera selection.\n\n### Run the project yourself\n\nClone or download the repo, then change into the directory and install the dependencies.\n\n```bash\ngit clone https://github.com/philnash/mediadevices-camera-selection.git\ncd mediadevices-camera-selection\nnpm install\n```\n\nCopy the `.env.template` file to `.env` and fill in the details from your [Twilio account](https://www.twilio.com/console).\n\nRun the application with:\n\n```bash\nnpm start\n```\n\nYou can now view the application at [localhost:3000](http://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.\n\n## Viewing on a mobile device.\n\nIf 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](https://www.twilio.com/blog/2015/09/6-awesome-reasons-to-use-ngrok-when-testing-webhooks.html). You can [download and install ngrok from ngrok.com](https://ngrok.com/). Once you have it installed, run\n\n```bash\nngrok http 5000\n```\n\nThis 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilnash%2Fmediadevices-camera-selection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilnash%2Fmediadevices-camera-selection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilnash%2Fmediadevices-camera-selection/lists"}