In today’s lesson, I learned how to pipe webcam input and manipulate the stream on the fly. In comparison to the other lessons, this lesson required the use of npm. The final code can be found on Day 19 – Webcam Fun.

Resources:

• Array.prototype.forEach()
• CanvasRenderingContext2D.drawImage()
• CanvasRenderingContext2D.getImageData()
• CanvasRenderingContext2D.putImageData()
• Document.createElement()
• Document.querySelector()
• Document.querySelectorAll()
• Element.innerHTML
• Element.setAttribute()
• EventTarget.addEventListener()
• HTMLCanvasElement.toDataURL()
• HTMLVideoElement
• MediaDevices.getUserMedia()
• Node.insertBefore()