video 👉 character video

result

source video	target video

Realization way

Use 'Canvas' as the drawing container to capture every frame of video, scan line by line and column by column, and convert to corresponding gray characters

use

<video id="source" autoplay loop style="display: none;">
    <source src="./video.mp4"></source>
</video>

<button id="pause-btn">pause</button>
<button id="play-btn">play</button>

// Import and convert video element to character video
import { convertVideo, getSourceVideoSize } from 'video-character-convert';

const elementId = 'source';

convertVideo(elementId).then(data => {
    data.setCharFontSize(6);  // Set char font-size, default 7px
    data.setBgColor('#FFF3FF');  // Set canvas background color, default #FFFFFF
    data.setFillColor('#3388AA');  // set font color, default #000000

    let videoSize = data.getVideoSize();  // get video size { width, height }
    data.setVideoSize(videoSize.width * 0.4);  // Equal scale video size, or ponit width and height: `setVideoSize(100, 200)`

    const characterVideoId = data.getCanvasId();  // get characterVideo's ID
});

// Control playback with original video element
const element = document.getElementById('source');
const pauseBtn = document.getElementById('pause-btn');
const playBtn = document.getElementById('play-btn');

pauseBtn.addEventListener('click', () => {
    element.pause();
})

playBtn.addEventListener('click', () => {
    element.play();
})