DEV Community: zhang清溪

How to Record a Clear Whiteboard Lesson Without Capturing Your Whole Desktop

zhang清溪 — Thu, 16 Jul 2026 15:09:50 +0000

A whiteboard lesson is usually easy to understand while you are drawing it. The trouble appears after recording: the entire desktop is visible, the board is too small, notifications or toolbars distract from the explanation, and every equation becomes difficult to read on a phone.

I ran into this while building short visual explanations. The solution was not a more complicated editor. It was to make the recording frame match the lesson before pressing record.

Here is the workflow I now use.

1. Define one learning outcome

A useful recorded lesson should answer one question.

Examples:

Why does this equation change at this step?
How does this system architecture move data?
What is the difference between these two product flows?
Where did the student make a reasoning mistake?

If a lesson has three unrelated outcomes, split it into three videos. Shorter videos are easier to rewatch, easier to update, and easier to share inside an LMS or tutoring chat.

2. Choose the final video shape first

Do not record a large desktop and decide the crop later.

Use 16:9 for YouTube, course platforms, and longer explanations. Use 9:16 for a short revision clip that will be watched on a phone. A square or portrait frame can work for social posts, but only if your labels stay large enough.

I use ExcaliRec's whiteboard recorder for teachers because the recording frame is visible before I draw. That makes it much easier to keep every important mark inside the final video.

3. Plan the board in zones

Divide the canvas into a few visual areas:

A short title or question
The main working area
A conclusion or final diagram
One quiet corner if you want a webcam bubble

This prevents the drawing from drifting endlessly across an infinite canvas. It also gives the camera a logical path to follow.

If you want to show your face, keep it small. The presenter supports the explanation; the whiteboard carries it. I wrote a separate webcam and whiteboard setup guide with framing and audio checks.

4. Write larger than feels necessary

Your monitor is not the final viewing device.

Students may watch beside their notes, inside a small LMS player, or on a phone. Use short labels, leave space between lines, and avoid building one giant diagram with tiny text.

Automatic focus motion helps, but it cannot rescue an overcrowded board. Zoom should guide attention, not make the viewer chase the camera.

5. Record a ten-second test

Before the real lesson, record a short sample:

Say one complete sentence
Draw one line and one label
Move to another part of the board
Stop and watch the file

Check four things: voice level, text size, camera position, and whether the focus movement feels calm. This ten-second test is faster than discovering a microphone or framing problem after a full lesson.

6. Explain in visual chunks

Complete one idea before moving to the next area.

For a math lesson, finish one transformation and pause. For an architecture diagram, finish one service and its connections. For a product flow, finish one user action before adding the next screen.

A brief pause between chunks gives the viewer time to process the drawing. It also creates a clean edit point if you trim the video later.

The full process is similar to the method in this drawing process recording guide: start with a promise, build in visual chunks, then end on the complete idea.

7. Leave the final drawing on screen

Do not stop immediately after the last word.

Hold the finished board for a few seconds and summarize the one conclusion the viewer should remember. That pause lets students review the full structure or take a screenshot.

8. Check the downloaded video before sharing

My final checklist is simple:

The first sentence is not cut off
The last diagram remains visible
Text is readable at phone size
The webcam does not cover a label
Audio is clear
No private tabs or notifications appear
The aspect ratio matches the destination

ExcaliRec records locally in the browser and downloads WebM. If a platform requires MP4, use a normal conversion step after recording rather than changing the teaching workflow.

The main lesson

A clear whiteboard video is mostly a framing and sequencing problem.

Choose one outcome, define the final frame, write larger, explain in chunks, and verify a short test before the full recording. When the drawing stays central and the camera follows the explanation, the result needs much less editing than a raw desktop capture.

You can try the browser recorder at ExcaliRec. It works best on a modern desktop browser, and recording stays local until you choose where to share the downloaded file.

FocuSee vs ExcaliRec: Which Recorder Is Better for Whiteboard Explainers?

zhang清溪 — Thu, 16 Jul 2026 12:57:40 +0000

If your content is the drawing itself, a general desktop recorder is often the wrong starting point.

That is the real difference between FocuSee and ExcaliRec.

Both tools help you record visual explanations, but they are optimized for different jobs. If you compare them as if they solve the same problem, you will probably pick the wrong one.

The short answer

Choose FocuSee if you need a polished desktop screen recorder for product demos, UI walkthroughs, and full-screen workflows.

Choose ExcaliRec if you create whiteboard-style explainers where the drawing is the content and you want a faster browser-based workflow.

What FocuSee is built for

FocuSee is a polished recorder for desktop demos.

Its strength is presentation: cursor motion, zoom effects, cleaner framing, and an edited-looking result without doing much post-production. If you are recording a software walkthrough, onboarding demo, or product tour, that makes sense.

FocuSee is stronger when the viewer needs to follow:

interface details
cursor movement
feature sequences
product interactions

In other words, FocuSee is best when the screen itself is the story.

What ExcaliRec is built for

ExcaliRec is much narrower.

It is built for whiteboard-style explainers, especially Excalidraw-style videos where the drawing is the actual content. You open the board, choose a ratio, record in the browser, keep the key strokes readable with auto-focus motion, and download the clip locally.

ExcaliRec is stronger when the viewer needs to follow:

diagrams
sketches
system flows
concepts drawn on a board

It is the better fit when the whiteboard is the story.

Where FocuSee is better

Better full desktop recording workflow
Better fit for software walkthroughs
Better fit for polished product demos
More natural choice for cursor-led presentations

Where ExcaliRec is better

Faster setup for drawing-based explainers
Browser-based workflow with no install
Better fit for Excalidraw-style recording
Simpler path when you only need to capture the board

The mistake most comparisons make

Many “screen recorder alternatives” pages compare tools that solve adjacent jobs, not identical ones.

That is why feature checklists are often misleading.

The right question is not:

Which tool has more effects?

The right question is:

What should the viewer pay attention to?

If the answer is the interface, use a desktop demo recorder.

If the answer is the whiteboard, use a whiteboard-first recorder.

Why this matters for Excalidraw-style videos

In whiteboard explainers, extra interface clutter usually hurts comprehension.

Common problems:

too much desktop UI
too many editing controls
too much setup before recording
too many visual effects around a simple explanation

What usually works better is a lighter workflow:

Open the whiteboard
Pick a ratio
Record locally
Export the clip

That is the workflow ExcaliRec is trying to simplify.

Final take

FocuSee is the better general-purpose recorder for desktop demos.

ExcaliRec is the better fit when the drawing is the content.

If you teach, think, or sell by drawing, you probably do not need a full desktop recorder first.

You need a recorder that gets out of the way.

If you want to see the whiteboard-first approach, start here:

ExcaliRec FocuSee alternative

How I Built a Forgiving Color-Memory Score in JavaScript

zhang清溪 — Wed, 15 Jul 2026 13:57:52 +0000

I built ToonTones around a small loop. You see a color, it disappears, and you rebuild it from memory.

The controls use HSL because hue, saturation, and lightness make sense to players. The scoring code uses RGB instead.

That split solved several problems.

Why I did not score the HSL sliders

A direct HSL comparison looks tempting. Add the hue, saturation, and lightness differences, then map the total to ten points.

Hue breaks that approach. Zero degrees and 359 degrees are neighbors, not opposites.

Saturation also behaves strangely near gray. A hue difference can be mathematically large while the visible difference stays small.

I kept HSL for input and converted both colors before scoring.

The weighted RGB distance

The target starts as a hex color. The player's HSL choice becomes hex, then both values become RGB.

Here is the distance calculation:

function colorDistance(a, b) {
  const [r1, g1, b1] = hexToRgb(a);
  const [r2, g2, b2] = hexToRgb(b);
  const redMean = (r1 + r2) / 2;

  return Math.sqrt(
    (2 + redMean / 256) * (r1 - r2) ** 2 +
    4 * (g1 - g2) ** 2 +
    (2 + (255 - redMean) / 256) * (b1 - b2) ** 2
  );
}

Green gets the largest fixed weight. Red and blue weights change with the average red level.

This is not Delta E. It does not model human vision perfectly.

It is fast, deterministic, and easy to run after every round in a browser game.

Turning distance into a 0–10 score

The largest distance under this formula is about 764.833. I use that value to normalize each result.

const normalized = Math.min(1, distance / 764.833);
const score = 10 * (1 - normalized) ** 0.72;

The exponent makes the game forgiving. A nearly correct answer should feel nearly correct.

For one red target, an exact match scores 10.00. A small visible miss scores 9.87.

A very different cyan guess scores 3.76. Black against white reaches zero.

Those numbers made more sense during play than a harsh linear scale.

Five rounds reduce lucky guesses

One color can flatter or punish a player by accident. ToonTones averages five independent rounds.

That average becomes the final score. It also gives players enough feedback to spot a pattern.

Some players miss hue. Others remember vivid colors as darker or less saturated.

The scorer does not diagnose those mistakes yet. The round-by-round swatches make them visible.

What I would change next

A proper Lab-space comparison would be a useful experiment. Delta E could better match visible color differences.

I would test it beside the current method before replacing anything. Better math does not always create better game feedback.

The current formula is short, stable, and understandable. That matters for a game that explains every score immediately.

I wrote a shorter player-facing scoring guide with practical tips for reading each result.