Day 19: Webcam Fun
Takeaways: Creating filters is fun! Canvases and videos
can be used to display live video streams as well to take photos. Image data on
a canvas can be retrieved, manipulated, and returned to create some neat effects.
getUserMedia API is relatively young and has gone through some
changes in the past few years, so you have to include quite a lot of fallback code
to handle things properly in older browsers. For
navigator.getUserMedia is now found
navigator.mediaDevices.getUserMedia, and this method returns a
Promise rather than using callbacks. To attach the media stream to the video
element, you used to be able to use
createObjectURL, but that method
is being deprecated in favor of simply set the value of
the media stream. In order to make this demo work on mobile devices, you also have
to set a few more attributes on the video
keeps the video in the context of your webpage instead of breaking out into the
mobile device's own native video player.
Note: Access to the user's camera requires the webpage to be
served over HTTPS, so if your site does not have an SSL Certificate (like mine),
you can still visit the site with a url that begins with
just get a warning from your browser that the site is not secure. You can then
choose to still visit the site.