Playing with WebRTC: Taking still photos

This is going to be a pretty quick post.  I was playing with an MDN Tutorial on WebRTC and started wondering what I could do with it.

Here’s how the basic functionality works:

See the Pen
JavaScript Photo Booth – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

So, I was thinking about the post earlier this year where I used CSS filters to modify SVG images and I figured that there could be something there.

See the Pen
JavaScript Photo Booth – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, you start with a live preview of yourself.  When you click on you, it takes a photo of you and adds filters to a 2×2 grid of the picture.  When you click on the grid, it brings you back to the live preview.

Have a question, comment, etc?  Feel free to drop a comment, below.

Leave a Reply

Your email address will not be published. Required fields are marked *