In this challenge, you will be building an application where users can go to your website and take a picture.

1. Get user's webcam by calling navigator.mediaDevices.getUserMedia({...}), which returns a promise.
2. When the promise resolves, you will get the webcam video stream object in your callback. Make sure you have a video element to display the video, and set the video element's srcObject property to the video stream so users can see their video.
3. When users click on the snap button, you need to draw the video into your canvas element to get an image of the video. To do this, first get the context (think of context as a paintbrush): const context = canvas.getContext('2d').
4. Then, draw the video by passing the video element into the drawImage function: context.drawImage(video, 0, 0)
5. Next, you want to get the image data from context using canvas.toDataURL()
6. The data returned looks like the following format: data:image/png;base64,ENCODED_IMAGE_DATA. Since we only want the ENCODED_IMAGE_DATA, we can delete the the metadata.
7. Send the data to your server.
8. When your server receives the data, you can simply write the image data into your server. Since the image is encoded as base 64, make sure you specify it: fs.writefile(filePath, imgData, 'base64', () => {})
9. On your client page, make sure you request to the server for a list of images so users can see all the pictures that was ever taken by the site.