How can i simulate keystrokes like the guy in this youtube tutorial?

Question

Okay guys..

What i want: I want to make a video tutorial where some specific code is being written while i speak (voiceover) just like this guy: https://www.youtube.com/watch?v=bqtqltqcQhw&t=166s

I'm assuming that he isn't writing the code while he speaks because it looks too fast and steady. So how is he "playing" the code?

is there a Visual studio code Add-on for this? Hope you understand my question.. this is my first on SO

Answer 1

My understanding is you are talking about the typed code in the top left of the video that he types before the time in the video linked? I didn't see any code being typed from the time of the link.

The typing looked real-time to me... in which case he just records, via screen capture software like OBS, himself typing the code...then puts the video in a video editor...scales and crops and moves it to the top left of the screen. And if need be applies a speed control, or time lapse some programs call it, to increase the speed of the clip in question so it runs faster.

Or another technique is to fake simulate the typing. So once you have the completed code you take a picture and toss it in your video editor. Then you basically apply a mask with keyframes as an overlay and move the mask from left to right at the desired speed so the underlying text becomes visible in a way to simulate the typing. In his case all he really needs to do is crop a section of his code's background into a separate strip as an overlay, scale it to make it longer across the x axis...and overlay it on his video strip showing the existing code...hiding the part in question initially, then keyframe it to move across the screen at the timing desired. He could do this with multiple rectangular overlays of his code's background, or he could just make one big square that covers all the code that is the same colour as the background of the code... and then make a mask where he cuts into it section by section over time. So pretty much determining sections of the square to become transparent at different times.

Answer 2

There are severeal ways to achieve this.

My faivorite is doitlive.

from their site:

doitlive is a tool for live presentations in the terminal. It reads a file of shell commands and replays the commands in a fake terminal session as you type random characters.

The way it works is you create a bash script with the series of commands you want to "type" in the screen.

then execute:

doitlive play my_script.sh

and then you just type on your keyboard any character you want and it will actually type the command from your script.

Answer 3

I have written a small bash script for you, which writes code in cosoli with a delay of e.g. 0.04 seconds.

Here's a sample run:

bash script.sh script.txt 0.04

Here is the code:

#!/bin/bash

file=$1
delay=$2

if [ ! -f "$file" ]; then
    echo "File '$file' not found!"
    exit 1
fi

if [ -z "$delay" ]; then
    echo "No delay is indicated!"
    exit 1
fi

while IFS= read -r line; do
    for (( i=0; i<${#line}; i++ )); do
        echo -n "${line:$i:1}"
        sleep "$delay"
    done
    echo ""
done < "$file"