We have already discuss most of the procedure in an earlier concept, which involves transforming images to ASCII characters. Video is mostly the same, except we are going to have to make a few modifications to make the ASCII sync with the video.
<video> tagThe idea is mostly the same as with an image, the video is just images at a certain framerate. It's just a matter of loading in a canvas the current video frame, and doing the same work we were already doing for processing the image.
The ASCII characters' information will be updated using setInterval, so it's important to keep track of the video status through it's event system. The ASCII should not be updating if the video is paused or has ended.
Also note, that for performance / incompatiblity reasons, I've removed the whitespace from the available characters, as React has some issues rendering long blank strings.
First things first, not every browser supports getUserMedia and not every device has a webcam available. To get this to work properly, make sure the user has a webcam and the browser allows webcam capturing.
Also note that getting data from the webcam (audio or video) requires a secure connection (yes, HTTPS). For development purposes, localhost is allowed to access the contents without said connection, but otherwise, the browser will refuse to produce a video stream.
The easiest approach here is to create a faux video tag and set it's src attribute to the video stream produced by the webcam (The audio does not matter for this experiment). After doing so, we are in the first scenario, which is transforming a video to ASCII (and that's suuuper easy).
So, the idea here is to handle the webcam as follows:
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream=> {
const video = document.createElement("video")
video.srcObject = stream
video.play()
})
WAIT