Photowave

When the page initially loads, it will automatically request a media stream from the user's camera. The video element then sets the media stream as its srcObject. If for some reason the auto-start fails, there is button to manually request the stream.

When the stream state is active, the video element displays the current stream. The video scales with the page independantly from the size of the stream.

Once the user kicks things off, they see a countdown from 3, followed by a series of camera flashes. At each flash, the RecordImage action takes a screenshot from the video and draws it to a hidden canvas. Those canvas images are used to assemble an animated gif. The countdown and flashes both use the react-modal package in two different ways, depending on what props are passed to them.

After the photobooth function takes 6 pictures, they are encoded together to make a dataURL for an animated gif, which is displayed in another modal window. From there, the user can download the gif, or click 'try again' to return to the photobooth.