In the previous section, we learned how to read an image; now, we are going to learn how to read framed images from a webcam stream. To do this, we need the following HTML elements:
- An alert box to show when OpenCV.js is loaded; because OpenCV.js is heavy and will take a few seconds to load on the client browser, then we are going to load it asynchronously and when it's loaded, we will start to load the other required code and user interfaces.
- A video element to load the client video stream with the ID videoInput.
- A Canvas element which shows the result of our algorithm.
- A button to start processing video frames with the ID cv_start, which is initially hidden.
We are going to maintain the same alert box and canvas elements used in the previous sample and add two new elements, a button using the link and a video HTML element, as we can see in the...