- #Videocanvas controls how to#
- #Videocanvas controls manual#
- #Videocanvas controls code#
- #Videocanvas controls download#
This is done repeatedly as the video plays, so that frame after frame is processed and displayed with the chroma-key effect. As a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop. The for loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png.Įvery pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. Line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four. This provides raw 32-bit pixel image data we can then manipulate. Line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getImageData() method on the first context. Note that you can pass the video element into the context's drawImage() method to draw the current video frame into the context. In line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size.
![videocanvas controls videocanvas controls](https://www.customcontrols.co.uk/wp-content/uploads/2020/04/PICSPLIT-Lifestyle-03.jpg)
When this routine is called, the video element is displaying the most recent frame of video data, which looks like this: Then you can call the html2canvas(document.body).then((canvas) => ) function to capture the current web page screenshot to a canvas.Then you need to import the file into your Html web page source code.