企业官网建设流程全解析

一条命令自建Loom：Screendrop + Cloudflare R2云分享部署保姆级教程

【免费下载链接】ScreendropA beautiful screenshot + screen recording + Loom alternative - all native, self hostable and free.项目地址: https://gitcode.com/gh_mirrors/sc/Screendrop

Screendrop 是一款免费、开源、可自建的 macOS 原生录屏 + 截图工具，也是 Loom 的完美替代品。本教程带你在5 分钟内完成 Cloudflare R2 云分享部署：用自己的 Cloudflare 账号存视频、生成带播放器、字幕和评论的分享链接，全程零代码、零出站流量费。

为什么值得自建一个 Loom？

直接用 Loom 的痛点很明显：

• 💸订阅收费，团队版更贵；
• 🔒数据存在别人的服务器，敏感内容不敢上传；
• 📤流量费不透明，视频分享多了成本不可控。

Screendrop 的思路是"本地优先 + 自建云端"：

核心分享机制详见项目文档 README.md 的Cloud Sharing章节。

30 秒认识 Screendrop

Screendrop 是一个 macOS 菜单栏应用，把"截图 → 注释 → 录屏 → 剪辑 → 分享"全流程做进一个 App：

• ⌨️ 全局快捷键：Option+1全屏截图、Option+2窗口截图、Option+4打开录屏选择器；
• ✏️ 无损注释编辑器：箭头、编号标记、智能打码、背景壁纸、水印，全部可撤销；
• 🎬 录屏工作室：自动缩放跟随鼠标、重建光标与点击特效、本地语音转字幕、按文字剪视频；
• ☁️ 云分享：上传到自建 Worker，生成 Loom 风格的分享页。

下图是注释编辑器中的编号标记效果，录完屏直接标注再分享，非常顺手：

云分享架构：Worker + R2 + D1 三件套

Screendrop 的云分享是"Cloudflare 优先"的自托管架构，只有三个组件：

1. Cloudflare Worker：接收带令牌鉴权的上传，返回分享链接；
2. Cloudflare R2：存放截图和视频文件，没有出站带宽收费，这正是自建 Loom 最省钱的点；
3. Cloudflare D1：记录轻量的上传与分享页元数据。

你只需要向 Screendrop 提供两样东西：Worker 的 URL和一个上传令牌（Upload Token）——完全不需要 R2 或 S3 的 Access Key，密钥永远不离开你的 Cloudflare 账号。

上传流程在源码中一目了然：Screendrop 通过PUT /api/upload把文件交给 Worker，Worker 校验 Bearer 令牌后把文件流式写入 R2、把元数据写入 D1，最后返回分享 URL 并保存到本地 Library。相关实现可参考 CloudUploader.swift 与 CloudSidecarUploader.swift（后者负责上传标题、海报图、字幕和预览雪碧图这些"侧车"资源）。

部署教程：5 步完成 Cloudflare R2 配置

第 1 步：安装 Screendrop

要求 macOS 26.4 或更新版本。从发布页下载 DMG 拖入"应用程序"，或者一条 Homebrew 命令搞定：

brew install --cask fayazara/tap/screendrop

第 2 步：复制上传令牌

打开设置 → 云（Settings → Cloud）。首次进入时，App 会自动为你生成一个强随机令牌（基于系统安全熵源生成，实现见 SettingsCloudPane.swift）。点击Copy Token复制下来，待会要用。

第 3 步：一键部署到 Cloudflare

点击页面中醒目的橙色Deploy to Cloudflare按钮（源码位置：SettingsCloudPane.swift）。它会自动完成：

• 克隆官方 Worker 模板；
• 自动创建并绑定 R2 存储桶与 D1 数据库；
• 提示你填写UPLOAD_TOKEN密钥——把第 2 步复制的令牌粘贴进去即可。

全程在 Cloudflare 的官方部署流程里操作，跟着引导走完就行，不需要写一行代码。

💡 如果你习惯命令行部署，也可以在 Worker 目录执行npx wrangler secret put UPLOAD_TOKEN写入令牌，并把 R2、D1 绑定到 Worker。

第 4 步：回填 Worker URL 并验证连接

部署完成后，把 Cloudflare 给你的 Worker URL（形如https://…workers.dev）粘贴回"Worker URL"输入框，点击Verify Connection。App 会依次调用 Worker 的/api/setup和/api/ping两个接口（见 SettingsCloudPane.swift）：

• ✅ 右上角状态点变绿显示Connected，说明 R2 + D1 已就绪；
• ❌ 显示Invalid token，通常是令牌没填对，复制完整一点即可。

令牌会安全存入 macOS 钥匙串（CloudCredentialStore.swift），不在明文偏好中。

第 5 步：上传并拿到分享链接

随便截个图或录个屏，点击预览卡片上的上传按钮：

• 可以填一个标题、开关"允许评论与点赞"（选择会记住，下次自动应用，实现见 CloudUploadOptions.swift）；
• 也可以在设置 → 截图/录屏 → 捕获后自动化里勾选"上传并复制链接"，实现截完自动上传、链接自动进剪贴板，这才是一键分享的完全体。

自建后的分享页有多像 Loom？

共享录屏会打开一个 Loom 风格页面，包含：

• 🎥 视频播放器：倍速播放、影院模式、拖动进度条时显示缩略图预览；
• 📝可搜索字幕：跟随播放高亮，点击即可跳转；
• 💬 可以锚定到某个时间点的评论；
• 👁 观看次数统计、海报图，粘贴到聊天软件时有富文本链接预览。

共享截图则是干净的图片查看器，支持复制与下载。链接主上传完成即可访问，字幕、海报、预览图随后陆续补全。

常见问题 FAQ

Q1：R2 要钱吗？存储本身在免费额度内基本够用，关键是 R2没有出站流量费——别人反复看你的视频也不产生额外费用，这是自建 Loom 最大的省钱点。

Q2：数据会经过第三方服务器吗？不会。Screendrop 没有中心服务器，账号、文件、链接全在你的 Cloudflare 资源里；App 本地只保留令牌和 Library 元数据。

Q3：验证失败显示 Invalid token 怎么办？重新复制完整令牌，确认 Worker 的UPLOAD_TOKEN密钥与 App 中的一致，再点 Verify Connection。

Q4：换台电脑能用同一个云端吗？能。在新设备里填同一个 Worker URL + 同一个令牌即可，云端数据完全通用。

写在最后

整个流程回顾：安装 → 复制令牌 → 一键部署 → 回填 URL → 上传拿链接。5 分钟，零代码，你就拥有了一个数据在自己手里、没有流量费、带字幕和评论的"私有 Loom"。Screendrop 目前仍在快速迭代中，如遇小问题可到项目发布页查看更新说明，源码架构参考 README.md 与 AGENTS.md。

【免费下载链接】ScreendropA beautiful screenshot + screen recording + Loom alternative - all native, self hostable and free.项目地址: https://gitcode.com/gh_mirrors/sc/Screendrop