• Stars
    star
    162
  • Rank 232,284 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸŽ₯ 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.

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.

More Repositories

1

bitly

πŸ—œ A Ruby wrapper for the bit.ly API
Ruby
447
star
2

pwned

😱 An easy, Ruby way to use the Pwned Passwords API.
Ruby
360
star
3

react-express-starter

A starter kit for React applications with a back end server all in the same project
JavaScript
179
star
4

react-web-audio

A small example React app that listens to the microphone and visualises the audio
JavaScript
163
star
5

twilio-video-react-hooks

A video chat application built with Twilio Video and React Hooks
JavaScript
105
star
6

screen-capture

An exploration of screen capture in browsers.
JavaScript
103
star
7

ngrok-for-vscode

πŸš‡ A VSCode extension to control ngrok from the command palette
TypeScript
103
star
8

meta-spotify

[deprecated] A ruby wrapper for the Spotify Metadata API
Ruby
84
star
9

envyable

The simplest yaml to ENV config loader.
Ruby
76
star
10

sms-messages-app

A web powered SMS Messages app you can use with a Twilio number
CSS
69
star
11

web-assistant

A collection of experiments building towards a browser powered assistant
HTML
65
star
12

crotp

CrOTP - One Time Passwords for Crystal
Crystal
62
star
13

useful-twilio-functions

A set of useful Twilio Functions.
JavaScript
53
star
14

video-chat

An example of setting up basic video chat with WebRTC, node.js and Twilio
JavaScript
37
star
15

jekyll-gzip

Generate gzipped assets and files for your Jekyll site at build time
Ruby
35
star
16

react-twilio-phone

A Twilio Client based web phone, built with React
JavaScript
34
star
17

philna.sh

Phil Nash's personal site and blog
Astro
33
star
18

bulk-sms-alerts

An example of sending one, a few and many SMS messages using the Twilio APi
JavaScript
33
star
19

send-sms-react-twilio

An example React application that can send SMS messages via the Twilio API
JavaScript
32
star
20

react-programmable-chat

A React example of Twilio Programmable Chat
JavaScript
29
star
21

web-share-wrapper

A web component that wraps other share elements to replace with a web share button where supported.
JavaScript
22
star
22

twilio-video-svelte

A Twilio Video application built with Svelte
Svelte
21
star
23

whats_playing

Collaborative playlists over WhatsApp with Twilio and Spotify
Ruby
21
star
24

first-twilio-video-application

A demo of Twilio Video for the Build your first Twilio Video application webinar.
JavaScript
20
star
25

ruby-whatsapp-bots

A repo of WhatsApp bots built in Ruby
Ruby
19
star
26

ruby-google-sheets-sinatra

An example app using Ruby, Google Sheets and Sinatra
HTML
18
star
27

twiml_template

TwiML templates for Rails and Tilt.
Ruby
17
star
28

quote-bot

A bot built with Twilio SMS and Claudia Bot Builder
JavaScript
15
star
29

jekyll-brotli

Generate brotli compressed assets and files for your Jekyll site at build time
Ruby
15
star
30

twilio-chat-kendo-react

An example Twilio Programmable Chat application application using React and KendoReact Conversational UI
JavaScript
14
star
31

service-worker-background-fetch

A proof of concept of the background fetch API
HTML
12
star
32

guybot

A mighty pirate (and Twitter bot)
Ruby
12
star
33

jekyll-zopfli

Generate gzipped assets and files for your Jekyll site at build time using Zopfli compression
Ruby
12
star
34

ruby-quick-test

Run ruby test files quickly in Atom
CoffeeScript
12
star
35

jekyll-web_monetization

A Jekyll plugin to add Web Monetization API payment pointers to your site
Ruby
10
star
36

whatsapp-bot-capabilities

An example of a WhatsApp bot that can respond to location messages and can send images, vcards and location messages
JavaScript
9
star
37

pwned.js

An easy, promise based, way to test passwords securely against the Pwned Passwords API v2 in Node.js.
TypeScript
9
star
38

leap-motion-experiments

JavaScript
9
star
39

the-web-is-getting-pushy

An example of push notifications and service workers
JavaScript
9
star
40

web-monetization-components

A collection of web components you can use on your web monetized websites.
HTML
8
star
41

twilio-video-screen-sharing

JavaScript
8
star
42

community-sms-broadcast

An application that you can use to broadcast SMS messages to people listed on a Google Spreadsheet, powered by Twilio Functions and Twilio Programmable SMS
JavaScript
8
star
43

jsconf-schedule

An offline HTML schedule for JSConf EU
CSS
8
star
44

time-formatter

A web component that converts a date time into your user's time zone and formats it locally.
HTML
7
star
45

twilio-fax-ruby-sinatra

An application to send faxes with the Twilio Fax API
Ruby
7
star
46

jekyll-mastodon_webfinger

A Jekyll plugin that adds a WebFinger file to your site, allowing you to use your own domain to help others discover your Mastodon profile.
Ruby
7
star
47

twitter-sms

Send and receive tweets by SMS
Ruby
7
star
48

web-otp-input

A custom element to make it really easy to use the WebOTP API
JavaScript
6
star
49

super-secret-puppies

Ruby
6
star
50

tatooine

A Ruby interface to SWAPI (the Star Wars API).
Ruby
6
star
51

rails-phone-number-verification

An example application for verifying phone numbers in a Rails application.
Ruby
6
star
52

phism

A video collaboration app that we're building on Twitch: https://twitch.tv/phil_nash
JavaScript
5
star
53

whatrtc

WhatRTC? Everything you need to know to connect browsers to the world.
CSS
5
star
54

github-weekends

A silly browser extension that marks weekend contributions on GitHub's contribution graph in red
JavaScript
5
star
55

ship-it

Don't just comment, ship it.
JavaScript
5
star
56

envyable.cr

The simplest YAML to ENV config loader in Crystal
Crystal
5
star
57

fxrates-ios

A currency exchange rate calculator for iOS, written in Swift
Swift
4
star
58

sendgrid-email-status

A Rails application that sends emails via the SendGrid API and tracks their status
Ruby
4
star
59

getUserMedia

An example of using getUserMedia
JavaScript
4
star
60

twilio-video-chat-web-component

A Web Component version of Twilio Video [deprecated]
HTML
4
star
61

advent-of-code

Advent of Code 2017-2020 solutions in Crystal
Crystal
4
star
62

omg

Quick and dirty debugging any ruby!
Ruby
4
star
63

sms-bulb

HTML
4
star
64

collabify

CSS
4
star
65

celebrity-spotting

A Sinatra app that takes images from the Twilio API for WhatsApp and uses AWS Rekognition to spot celebrities
Ruby
4
star
66

ynfb

YNFB
Ruby
3
star
67

elixir-examples

Elixir
3
star
68

twiml_template_example

Examples on using the twiml_template gem
Ruby
3
star
69

contact-picker-twilio-client

A browser based phone that uses the Contact Picker API
JavaScript
3
star
70

fun-with-getusermedia

Fun with getUserMedia
JavaScript
2
star
71

exploring-amp-email

A collection of projects implementing AMP email with SendGrid
JavaScript
2
star
72

hubot-twilio-ip-messaging

A Hubot adapter for Twilio IP Messaging
CoffeeScript
2
star
73

thereminjs

JavaScript
2
star
74

four-steps-from-javascript-to-typescript

JavaScript
2
star
75

philnash

philnash/philnash is philnash's repo about philnash
JavaScript
2
star
76

jira-twilio-plugins

HTML
2
star
77

twilio-client-and-accessibility

Exploring accessiblity and Twilio Client
Ruby
2
star
78

superclass-twilio-video-demo

A demo of Twilio Video for Superclass 2019
JavaScript
2
star
79

ng-sms-messages

An SMS application for Twilio, written with Angular and Service Workers
TypeScript
2
star
80

video-collaboration

An application using Twilio Video implementing various collaboration features
JavaScript
2
star
81

advanced-twilio-video

An example of using some advanced Twilio Video features to improve the user experience
JavaScript
2
star
82

twilio-liftoff

The example code for the Twilio Liftoff webinar series
JavaScript
2
star
83

sms-messages-hanami

An example application for receiving and responding to SMS messages from Twilio in Hanami
Ruby
2
star
84

pirate-api

πŸ΄β€β˜ οΈ An API wrapper for translating from English to Pirate and generating pirate insults ☠️
TypeScript
2
star
85

worlds-worst-synth

The world's worst synth
JavaScript
2
star
86

dad-jokes-cli

A CLI for getting Dad Jokes
JavaScript
1
star
87

crystal-experiments

Crystal Experiments with the Twilio API
Crystal
1
star
88

install-service-worker

Three different ways to install a service worker
HTML
1
star
89

twilio-typescript-examples

Examples of using Twilio with TypeScript
TypeScript
1
star
90

WindowSize

A bookmarklet to get the current height and width of the viewport
JavaScript
1
star
91

Sheenboard

1
star
92

bluemix-twilio-alchemy

HTML
1
star
93

discogs-scanner

A web app to scan records and add them to your Discogs collection
Svelte
1
star
94

twilio-autopilot-competition-entry-bot

The back-end Twilio Functions for a Twilio Autopilot bot that asks questions and enters people into a competition
JavaScript
1
star
95

todomvc-indexeddb

A vanilla JS implementation of TodoMVC with an IndexedDB data store
JavaScript
1
star
96

rainbow

A silly demo of device orientation events
1
star
97

taskrouter_priority

A priority call centre built with Twilio TaskRouter
Ruby
1
star
98

asst

A command line interface for OpenAI's ChatGPT written in JavaScript
JavaScript
1
star
99

growler_alerts_starter

HTML
1
star
100

simulring-control

A Twilio Function that pulls and filters numbers from a Google Sheet to be used in a Studio Flow
JavaScript
1
star