lijianfei.com

在数字化知识传播与技术内容创作中，“边画白板边讲解”一直是最具表现力和信息密度的载体。然而，传统的制作管线长期处于严重割裂的状态：要么面对 OBS 复杂沉重的推流与图层参数，要么忍受 Loom 等屏幕录制工具缺乏白板手绘质感与分镜节奏的尴尬。

近期，由知名 AI 博主张咋啦（Zara Zhang）基于“Vibe Coding”理念推出的轻量网页工具 Excalicord 引发了广泛关注。它巧妙融合了开源手绘白板王者 Excalidraw、浮动摄像头画中画、幻灯片分镜导航与原厂提词器，为技术答辩、口播录制、产品 Demo 提供了近乎零摩擦的一站式解法。

一、 传统录屏讲解的三重工程断层

无论是向团队做技术架构评审，还是面向公众制作 YouTube / B 站或小红书的知识短视频，创作者通常需要在三种工具形态中极限拉扯：

flowchart TD
    subgraph Traditional["传统录屏讲解的痛点拉扯"]
        direction TB
        T1["方案 A：OBS Studio 专业推流<br/>• 场景与图层配置极其繁琐<br/>• 资源占用高，偶发黑屏与掉帧<br/>• 录制一个 3 分钟答疑需调参 20 分钟"]
        T2["方案 B：Loom / 原生录屏<br/>• 仅捕获屏幕/窗口，缺乏即兴手绘交互<br/>• 画面死板，无原厂提词器与分镜概念<br/>• 无法按社交平台比例一键裁切美化"]
        T3["方案 C：多工具拼接 + 剪映重度后期<br/>• Excalidraw 画图 + QuickTime 录屏 + 手机录像<br/>• 剪辑软件手动做画中画、对音轨、抠背景<br/>• 生产管线过长，单条视频耗费半天"]
        T1 --- T2 --- T3
    end

    Traditional ==>|范式重构与轻量一体化| ExcalicordRevolution

    subgraph ExcalicordRevolution["Excalicord 浏览器级极速工作流"]
        direction TB
        E1["Excalicord (白板即舞台)<br/>• 承袭 Excalidraw 纯粹手绘质感与 Mermaid 导入<br/>• 无限画布下的幻灯片（Slide Frames）顺序平滑运镜<br/>• 悬浮圆形摄像头 + 视线平齐提词器<br/>• 16:9 / 3:4 / 9:16 多端画幅与艺术壁纸衬底<br/>• 浏览器端零服务端纯本地多流合成录制"]
    end

1. “工具孤岛”导致的认知超载

过去为了录制一段高质量的手绘答疑视频，创作者需要在三个显示器或窗口间频繁切换：一个窗口打开 Excalidraw 绘图，一个窗口显示记事本或 Notion 提词稿，右上角挂着 QuickTime 悬浮摄像头，后台还开着 OBS 或录屏软件。录制过程中，眼神在白板、提词稿和摄像头之间来回闪烁，观众能明显感觉到眼神游离。

2. 无限画布（Infinite Canvas）的“迷航”困境

Excalidraw 的无限画布自由度极高，但用于录像演示时却容易失控：镜头经常不知不觉移出边界，缩放比例前后不统一。讲完第一部分想讲第二部分时，鼠标在画布上滑来滑去四处找图，严重破坏观众的视觉焦点与心流。

3. 社交分发与画幅适配的后处理地狱

当前内容生态极为分散：PC/网页需要 16:9 横屏，小红书偏好 3:4 黄金图文比，抖音/Reels/Shorts 则是 9:16 竖屏。普通白板软件导出的录屏若直接上传，两侧往往留有大片生硬的黑边；若要加上精致的背景阴影与壁纸，又不得不拉进剪映或 Final Cut Pro 重新嵌套工程。

二、 Excalicord 核心产品架构与体验拆解

Excalicord 的核心解题思路在于：不做笨重的重工业级套件，而是通过精准的“胶水工程”，把内容创作者在白板讲解时最需要的四个微模块完全熔铸在同一个浏览器上下文内。

1. 幻灯片（Slide Frames）分镜机制

在 Excalicord 的白板画布上，内容被组织为具象的幻灯片容器（Slide 1、Slide 2 等）。右侧的悬浮操作栏支持一键追加幻灯片与快速跳转。

• 平滑视口锚定：点击对应的幻灯片索引，视口以最优视距自动平滑居中聚焦，杜绝了手动拖拽画布带来的晃动；
• 分步叙事逻辑：支持将一个庞大的架构图拆解为“现状 -> 痛点 -> 演进方案 -> 最终拓扑”等多个视窗，录制时只需轻触键盘或右侧导航即可像操作 Keynote 一样推进节奏。

2. 视线平齐的悬浮提词器（Teleprompter）

很多创作者在录制口播时最大的痛点是忘词或眼神漂移。Excalicord 将提词器直接做成了白板顶层的轻量悬浮卡片：

• 提词窗口可自由拖拽并放置在靠近摄像头物理位置的区域，录制时创作者看着提示文字即可自然与观众保持眼神接触；
• 提词器支持按章节段落编排，且在最终合成录制的视频画面中被物理隔离剔除，保证交付视频纯净无干扰。

3. 社交媒体多比例预设与美学壁纸

在录制设置弹窗中，Excalicord 提供了极具产品嗅觉的画幅与视觉预设：

• 主流社交比例覆盖：
  • 16:9（YouTube / B 站 / 官网技术答辩）
  • 4:3（经典演讲与平板视界）
  • 3:4（小红书爆款视频首选）
  • 9:16（抖音 / YouTube Shorts / 微信视频号）
  • 1:1（Instagram / 社交动态）与 Custom
• 杂志级环境背景衬底：预置了鲜艳、柔和、深色、自然等多样化壁纸。白板以微圆角搭配柔和弥散阴影悬浮于壁纸之上，右下角优雅嵌入圆形摄像头画面，即便随手涂鸦录制，产出也具备成熟设计感。

三、 底层技术透视：浏览器原生多流合成与录制架构

Excalicord 不需要用户下载几百兆的 Electron 安装包，在纯 Web 端即开即录。其背后依赖的是现代 Web 浏览器强大的媒体管道（Media Capture and Streams API 与 MediaStream Recording API）。

sequenceDiagram
    autonumber
    actor User as 创作者
    participant DOM as 浏览器 UI 层 (React)
    participant Excal as Excalidraw Canvas
    participant Cam as 用户摄像头/麦克风
    participant Comp as 离屏合成引擎 (Offscreen Canvas)
    participant Rec as MediaRecorder 编码器
    participant Blob as 视频成品 (WebM/MP4)

    User->>DOM: 开启录制 (选择画幅比例与背景)
    Cam->>DOM: 请求权限获取 getUserMedia (音视频轨)
    loop 每一帧渲染 (30fps / 60fps)
        Comp->>Comp: 1. 绘制底衬美学壁纸 (Background Layer)
        Excal->>Comp: 2. 截取当前 Slide Frame 白板内容并投影缩放
        Cam->>Comp: 3. 提取 Camera 视频帧，圆形裁剪 arc() 并叠加描边
        Note over Comp: 提词器等辅助 UI 不参与绘制，保持画面纯净
    end
    Comp->>Rec: canvas.captureStream() 提取合成视频轨
    Cam->>Rec: AudioContext 降噪混音后的音频轨
    Rec->>Rec: 实时流式切片分块存储 (ondataavailable Chunks)
    User->>DOM: 点击结束录制
    Rec->>Blob: 封装为 Blob 并生成 ObjectURL
    Blob-->>User: 本地零延迟直接下载

1. 离屏画布（Offscreen Compositor）图层管线

纯前端实现视频合成的核心是分层绘制流水线。在主循环（requestAnimationFrame）中，离屏合成器按严格的时序组装每一帧：

// 核心合成逻辑伪代码
function renderCompositeFrame(ctx, width, height, assets) {
  // 1. 绘制背景层（壁纸或渐变）
  ctx.drawImage(assets.wallpaperImage, 0, 0, width, height);

  // 2. 绘制投影白板层（根据当前选定画幅裁剪与圆角）
  ctx.save();
  applyRoundedRectShadow(ctx, assets.boardRect);
  ctx.drawImage(
    assets.excalidrawCanvas,
    assets.viewScrollX, assets.viewScrollY, assets.viewWidth, assets.viewHeight,
    assets.boardX, assets.boardY, assets.boardTargetWidth, assets.boardTargetHeight
  );
  ctx.restore();

  // 3. 绘制圆形悬浮摄像头（画中画）
  if (assets.cameraActive && assets.videoElement.readyState >= 2) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(assets.camX, assets.camY, assets.camRadius, 0, Math.PI * 2);
    ctx.clip();
    ctx.drawImage(assets.videoElement, assets.camSourceRect.x, assets.camSourceRect.y, assets.camSourceRect.w, assets.camSourceRect.h, assets.camTargetX, assets.camTargetY, assets.camTargetW, assets.camTargetH);
    ctx.restore();
    
    // 绘制摄像头光晕描边与物理阴影
    drawCameraBorder(ctx, assets.camX, assets.camY, assets.camRadius);
  }
}

2. 音画合流与低延迟录制

从离屏 Canvas 可以通过原生 canvas.captureStream(30) 导出标准 MediaStreamTrack。音频部分则通过 Web Audio API 的 AudioContext 建立音频处理节点链：

const canvasStream = compositeCanvas.captureStream(30);
const videoTrack = canvasStream.getVideoTracks()[0];

// 麦克风音频接入与增益/滤波
const audioCtx = new AudioContext();
const micSource = audioCtx.createMediaStreamSource(micStream);
const destination = audioCtx.createMediaStreamDestination();
micSource.connect(destination);

// 组合为最终录制流
const combinedStream = new MediaStream([
  videoTrack,
  destination.stream.getAudioTracks()[0]
]);

// 启动 MediaRecorder
const recorder = new MediaRecorder(combinedStream, {
  mimeType: 'video/webm;codecs=vp9,opus'
});

[!TIP]
本地隐私安全闭环：因为录制、编码、切片完全运行在用户的本地浏览器内核中，视频数据从未经过远端云服务器中转，这对于涉及公司核心商业机密或敏感情报的技术评审录屏提供了天然的数据安全护栏。

四、 深度横评：主流技术录屏与白板讲解方案选型

为了帮助团队和独立创作者精准选型，我们将 Excalicord 与常见的几套录屏方案进行多维对比：

五、 从 Excalicord 看“Vibe Coding”与独立开发的新范式

Excalicord 不仅仅是一款好用的效率工具，它更是当前 “Vibe Coding（氛围编程）” 浪潮中非常具备代表性的微型 SaaS 案例。

创始人张咋啦（Zara Zhang）本身并非计算机科班出身，而是一位深谙产品传播与创作者痛点的敏锐观察者。在以 Cursor、Claude Code 为代表的 AI Agent 基础设施成熟之后，独立开发的竞争壁垒正在发生深刻转移：

mindmap
  root("AI 时代独立开发的核心杠杆")
    ("底层重型基石<br/>(开源生态)")
      ["Excalidraw 矢量手绘画布"]
      ["WebRTC / MediaRecorder 标准 API"]
      ["Lucide Icons / TailwindCSS"]
    ("关键痛点胶水<br/>(Vibe Coding 敏捷落地)")
      ["提词器视线对齐设计"]
      ["分镜 Frame 容器机制"]
      ["小红书 3:4 / 抖音 9:16 社交画幅"]
    ("产品美学与情绪价值")
      ["杂志级质感壁纸"]
      ["圆角微拟物阴影"]
      ["开箱即用免登录体验"]

1. 从“重新发明轮子”到“高审美场景组合”

在传统研发模式下，要立项做一个包含绘图引擎和多媒体合成的工具，往往需要组建一个 5~8 人的研发团队，耗费数月攻坚图形渲染引擎；但在 AI 时代，开源社区早已将 Excalidraw 等底层基础设施打磨到了极致。真正的护城河不再是底层 Canvas 是谁写的，而是谁能以最敏锐的触角发现“录视频忘词”、“小红书画幅黑边丑”等细微痛点，并用最优雅的产品审美将其粘合在一起。

2. 商业化闭环与边界拓展

Excalicord 采用了目前被验证最健康的轻量级商业模式：

• 核心体验普惠免费：基础录制、白板使用、本地导出不设强制登录门槛；
• 增值体验精准变现：通过“去除水印”、“超清画质导出”、“高级背景库”等针对进阶专业创作者的诉求进行小额变现。

3. 当前局限与未来演进空间

作为一款主打轻量敏捷的网页工具，Excalicord 在应对极复杂的重型场景时也存在客观的技术边界：

1. 多页长文档与 PDF 穿透：目前更适合即兴板书、思维导图和架构图推演，对于数百页大型 PDF 课件的翻页和精细批注支持相对受限；
2. 多媒体动图/视频画中画嵌入：Excalidraw 本身对静态图片支持优秀，但在白板画布上内嵌动态播放的演示视频并在录制中保持音画帧级同步，仍是 Web 端具有挑战性的课题；
3. 原生 MP4 导出兼容性：受制于各浏览器对 MediaRecorder 格式支持的差异，WebM 在 macOS 原生 QuickTime 播放器中的兼容性不如 MP4，后续若引入 WebCodecs 或轻量 ffmpeg.wasm 进行客户端转码，将进一步消除导出后的格式顾虑。

六、 总结与结语

知识的生产与传递，本质上是一场降低读者认知负荷的艺术。

Excalidraw 用粗糙手绘感消解了技术架构的生硬与严肃，而 Excalicord 则进一步消解了创作者面对摄像头的紧张感与剪辑台前的繁重工序。它让“白板涂鸦”与“面对面交流”自然融为一体，使每一次技术汇报和知识分享都变成了一场赏心悦目的可视化演讲。

如果你也经常需要给同事讲解系统架构、录制产品上手教程，或者正在探索将专业知识转化为自媒体视频内容，不妨打开浏览器体验一下这种近乎直觉的创作流。

🔗 关联资源

• Excalicord 官方产品体验：https://www.excalicord.com/
• Excalidraw 开源仓库：https://github.com/excalidraw/excalidraw