Lab 32 Reflection

     Lab 32 was about creating a webpage where the user can take a picture of themselves with a special filter. I started by setting up a div for the controls, within this div being a single set of <button> tags that allow the user to snap a photo via an onClick function. Outside of this div, I set up <canvas> tags I would use to display the live feed of the user with filter on, <video> tags that displayed the plain live feed of the user, and another div that displayed the photo once taken. In the JS, I made the <video> actually display the user's live feed by using navigator.mediaDevices.getUserMedia({ video: true, audio: false }) to tell the webpage to access the user's camera. The feed was displayed on screen by setting the <video> source attribute to the feed, video.srcObject = localMediaStream; . Finally, this way played on the user's screen using the .play() method. Using similar code, the feed was displayed on the <canvas> but alterations were made first by altering the rgb of the image. The onClick function of the snap button set the current time to 0, then used the .play() method, essentially freezing time and capturing an instantaneous photo from the video feed.
     These skills are important for a web designer because they expand the features of a website. Capturing live video feed opens up the possibilities for a website to host video chat abilities, useful for sites where customer support is provided or there is constant communication between coworkers on a project. Taking photos can allow users to more conveniently upload photos of themselves to sites requiring some sort of profile photo. Though it's not a widely used feature for security purposes, if used, it expands what a site can do.