技术方案

用户9361

5月25日修改

代码讲解工具技术方案

> 阅读摘要

> 本方案以 `docs/PRD/代码讲解工具.md` 为最高权威来源，结合 `docs/技术模块拆解.md`、`docs/项目时间规划.md` 与 `docs/竞品分析/` 的结论，给出 code-tape 的 P0/P1/P1+ 技术路线。P0 采用 事件流优先、音视频辅助、前端 iframe 沙箱展示、本地录制包优先 的低风险方案：用 Web 编辑器采集代码内容、光标选区、鼠标轨迹、快捷键和运行结果，用 MediaRecorder 采集麦克风与摄像头，用统一时间轴生成录制包，再由回放调度器基于快照和事件增量恢复任意时间点状态。P1 再补齐云端回放中心、分享、活动索引和更完整的代码执行；P1+ 扩展 WebRTC 实时面试与 AI 字幕。​

一、方案依据与核心判断

1. 权威来源

本方案按以下优先级使用文档信息：

1.
docs/PRD/代码讲解工具.md：最高权威，决定产品目标、P0/P1/P1+ 范围和验收口径。​

2.
docs/技术模块拆解.md：作为模块边界、技术挑战和实施顺序依据。​

3.
docs/项目时间规划.md：作为两周冲刺与 DDL 收敛依据。​

4.
docs/竞品分析/：作为技术路线取舍、产品体验借鉴和 P1/P1+ 边界参考。​

PRD 明确要求本项目不是传统录屏，而是记录带时间戳的操作事件流，并在回放时还原编辑器内容、鼠标、光标选区、快捷键、音视频和控制体验。因此本方案所有架构设计都围绕“结构化时间线”展开。​

2. 竞品结论与本项目取舍

竞品分析的共同点是“代码讲解比普通录屏更需要结构化时间线”，但各竞品对终端、文件树、运行环境和观看者接管的投入并不一致。本项目按 PRD 和 DDL 约束优先交付录制/回放主链路，把容易放大工程复杂度的 IDE 能力后置。​

竞品/方向	最有价值启发	与本项目的分歧	P0 取舍
Scrimba	播放器即 IDE，事件回放可被观看者临时接管	观看者编辑和 fork 会引入双轨状态	P0 先只读回放，观看者临时编辑放 P1 可选
Replay.io	时间轴 + 事件索引 + 快照恢复比线性视频更适合 seek	Replay 偏调试器级别时间旅行，本项目只需讲解回放	P0 做快照 + 增量事件，不做调试器能力
CodeSandbox	iframe / Browser Sandbox 适合教学 Demo 的前端预览	完整工程预览和依赖管理超出 PRD P0	P0 采用 iframe sandbox，不上云端容器
StackBlitz / WebContainers	浏览器内 Node/npm 很强	WebContainers 部署、兼容和包安装成本高	P1 做 PoC，P0 不接入 WebContainers
CodeSignal / HackerRank	面试 replay 证明 key-by-key 过程有复盘价值	判题、题库和多人面试不是 P0 主链路	P0 录制完整代码快照事件，P1 再优化 diff/operation log
Codecast / RecDev	事件流主轨 + 音视频辅助 + 代码/终端可复制	终端、文件树、checkpoint 会显著扩大实现面	P0 不做终端和文件树，但事件结构预留扩展
CoderPad	Monaco + 运行结果 + 回放控制是成熟面试平台核心	CoderPad 的协作和面试管理不是 P0 范围	P0 选 Monaco，JS 运行结果进入事件流

3. P0 默认决策

docs/技术模块拆解.md 中列出的待确认问题，本方案给出可执行默认决策：​

问题	决策	理由
代码执行路线	P0 采用前端 iframe sandbox 展示，P1 再评估 WebContainers 或后端沙箱	最低风险，符合 CodeSandbox/Scrimba/StackBlitz 调研结论
TypeScript 执行深度	P0 必达支持 TS 编辑、高亮、录制和回放；TS 简单运行列为 P0 可选 PoC，不做 type checking 和 npm 依赖	避免把主链路拖进完整构建系统，确保 JS 运行稳定优先
音视频封装	P0 录制为一个 WebM 媒体轨；录制前可选择输入设备；麦克风和摄像头开关记录为 media marker	MediaRecorder 实现简单，回放同步成本最低
录制包保存	P0 本地 IndexedDB 保存并支持加载回放；文件导出作为保存失败兜底；云端上传放 P1	两周内优先保证录制 -> 保存 -> 回放闭环
其他语言加分项	Python 只作为 P0 可选加分：高亮、语言切换和回放恢复，不做执行	不让加分项阻塞 JS/TS 主链路

二、目标、非目标与验收口径

1. P0 目标

技术方案​

技术方案