This repository has been created as a starting point for our workshop. In the workshop we will learn to create a peer2peer video chat using Twillio. We will explore various UI edge cases such as disconnection and connection degradation in addition to anciliary features such as text chat.
Before the event, participants should follow the steps below in Setup section. To gain free admission, participants can submit a Pull Request with their solution to the Teaser Challenge below.
All of the API server code is in the folder ./server. To start development:
cd server
yarn install # or npm install (some warnings may occur, but usually nothing fatal)
cp .env.example .env # Edit this with the right Twilio credentials (set an empty TWILIO_CHAT_SERVICE_SID if you only want to use video)
node .
The API will run at http://localhost:3000 and provide two endpoints:
POST /user Authenticates the user and provides a JWT Request body:
{
"username":"patient",
"password":"password"
}
Responses:
200 Success - The authentication was successful Example body:
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJwYXRpZW50IiwicGFzc3dvcmQiOiJwYXNzd29yZCIsImRpc3BsYXlOYW1lIjoiSG9tZXIgU2ltcHNvbiIsInJvbGUiOiJwYXRpZW50IiwiaWF0IjoxNTA4NzYxNDA0LCJleHAiOjE1MDg4NDc4MDR9.VDIbyyDpV8_g_KjWQw4H6UDPpvSuYjpjxM1hZ-ukpZ0"
}
404 Not found - The user could not be found 401 Unauthorized - Authentication failed
GET /token Retrieves a token for Twillio
Headers:
Authorization: Bearer <JWT>
Responses: 200 Success
{
"identity": "patient",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJwYXRpZW50IiwicGFzc3dvcmQiOiJwYXNzd29yZCIsImRpc3BsYXlOYW1lIjoiSG9tZXIgU2ltcHNvbiIsInJvbGUiOiJwYXRpZW50IiwiaWF0IjoxNTA4NzYxNDA0LCJleHAiOjE1MDg4NDc4MDR9.VDIbyyDpV8_g_KjWQw4H6UDPpvSuYjpjxM1hZ-ukpZ0"
}
401 Unauthorized - Invalid JWT 400 Bad Request
# Login and capture the JWT
curl -H "Content-Type: application/json" \
-XPOST \
http://localhost:3000/user \
-d '{"username":"patient", "password":"password"}'
# Get the twilio token to start your session
curl -H "Content-Type: application/json" \
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJwYXRpZW50IiwicGFzc3dvcmQiOiJwYXNzd29yZCIsImRpc3BsYXlOYW1lIjoiSG9tZXIgU2ltcHNvbiIsInJvbGUiOiJwYXRpZW50IiwiaWF0IjoxNTA4NzYxNDA0LCJleHAiOjE1MDg4NDc4MDR9.VDIbyyDpV8_g_KjWQw4H6UDPpvSuYjpjxM1hZ-ukpZ0" \
http://localhost:3000/token
There are two example users by default:
- username: doctor
- username patient
Both use the password "password" for testing purposes.
Once you are running the API:
- Add your code to ./ui.
- Within this folder, feel free to use yarn or npm or any other tools and frameworks you require.
- To submit a solution, make a pull request with your changes.
- Don't forget to include documentation on how to run your UI.
- You should not need to change any code inside
./serverbut if you decide to, please comment as to why.
For a quick and easy challenge to begin, first create a login form for the users. The form must:
- Submit JSON the the /user endpoint in a POST
- Capture the JWT and store it locally somehow for the next request
- Demonstrate the call to /token returns 200 (passes authorisation)
Don't forget to employ validation, tooltips, and any other UI techniques to make the form user friendly. Design is not the main focus but make sure the UI is clean and easy to use.
When developing a peer2peer video chat you may find it useful to test communication between devices and share links to your dev environment with those devices and other users. Ngrok is a tool to create a secure http(s) tunnel to your development environment which enables you to conveniently do this kind of testing. Here's how to use it:
- Install ngrok
npm install ngrok -g
- Setup a tunnel to the development server
ngrok http 3000
- Copy the ngrok url from the output and distribute it to someone else.