实战：录制 + 导出全流程演示
以「一次完整的技术分享视频制作」为主线，把前面学到的绘图标注、摄像头视图、录制、多格式导出串成一条完整流程：从写完的 Markdown 出发，到交付 PDF/PPTX/视频。
项目背景
主题：团队内部分享「Slidev 演示技巧」。已完成演示文稿，接下来按五步走完录制与交付。
第一步：配置演示环境
在 Frontmatter 中预设好导出文件名与摄像头模式：
yaml
---
title: Slidev 演示技巧分享
exportFilename: slidev-sharing
cameraType: pip
drauu:
color: '#e11d48'
size: 4
---启动开发服务器预览，确认每页布局与动画节奏。
第二步：演示中绘图标注
分享过程使用 Drauu 圈重点：
- 讲到「一键导出」时按
b进入绘图模式 - 用矩形圈出导出命令
- 用箭头指向输出文件说明
- 换红色强调易错点（Playwright 安装）
- 讲解结束按
Esc退出
笔迹会同步显示，观众跟着标注走，重点一目了然。
第三步：开启摄像头与录制
- 按
c开启画中画摄像头，拖动到右下角 - 确认麦克风权限已允许
- 按
r进入录制，选择当前窗口 + 摄像头 - 从头开始正式分享
录制包含：幻灯片动画、绘图标注、摄像头画面、语音讲解，一镜到底。
第四步：多格式导出
分享结束停止录制，浏览器自动下载 .webm 视频。随后导出其他格式：
bash
# PDF 完整交付（含动画步骤）
slidev export --with-clicks --output slidev-sharing-steps.pdf
# PPTX 给需要二次批注的同事
slidev export --format pptx
# PNG 封面图
slidev export --format png --range 1再打开 http://localhost:3030/export，用浏览器导出器补充一份 PDF，作为不依赖 CLI 的备份交付。
第五步：文件归档
整理交付物到统一目录：
slidev-sharing/
├── slides.md # 源文件
├── slidev-sharing-steps.pdf # 分步骤 PDF
├── slidev-sharing.pptx # Office 版
├── slidev-sharing-1.png # 封面图
└── slidev-sharing.webm # 录制视频视频转 MP4 后可直接上传内部课程平台。
能力清单
| 环节 | 使用能力 | 效果 |
|---|---|---|
| 环境配置 | Frontmatter 导出/摄像头/绘图配置 | 一次配好，全程生效 |
| 现场讲解 | Drauu 绘图标注 | 实时圈重点、画箭头 |
| 出镜分享 | 画中画摄像头 | 观众看到真人讲解 |
| 视频产出 | 内置录制 | 屏幕 + 摄像头 + 语音同步 |
| 多格式交付 | CLI + 浏览器导出 | PDF/PPTX/PNG/视频全齐 |
验证与复盘
- 打开导出 PDF 核对页数与步骤拆分
- 播放录制视频检查画面与声音同步
- 确认摄像头在录制结束后已关闭
- 检查文件名与归档目录规范
整个流程无需第三方录屏软件：一份 Markdown 起步，绘图标注提升讲解表现力，摄像头出镜增强亲和力，内置录制产出视频，多格式导出完成交付。这套链路就是 Slidev 从「做好幻灯片」到「完成内容交付」的完整闭环。