Flutter:如何实现 App 的远程截图功能?-夜雨聆风

Flutter:如何实现 App 的远程截图功能?

别再问“能发张截图给我吗？”

你是否也曾为了复现一个 Bug，不得不一遍遍地求测试（QA）或同事给你发张截图？或者更糟——你得在一个根本摸不着的远程设备上调试 UI 问题？为了彻底终结这些烦恼，我开发了 advanced_screenshot。

痛点

在开发 Flutter 应用时，想要从真机或模拟器获取运行截图通常非常麻烦：

• 手动截图：必须由用户操作截屏并手动发送，效率极低。
• 设备受限：像 Android Studio 自带的截图按钮，只有在设备连着你电脑时才管用。
• CI/CD 瓶颈：自动化测试流程很难实时捕获并查看截图。
• 远程调试：一旦你看不到屏幕内容，远程调试简直就是一场噩梦。

解决方案

advanced_screenshot 是一款 Flutter 插件，它在你的 App 内部内置了一个轻量级的 HTTP 服务器。这样一来，你只需发送一个简单的 HTTP 请求，就能远程抓取 App 的实时画面。

import 'package:advanced_screenshot/advanced_screenshot.dart';

void main() {
  runApp(
    ScreenshotServer(
      child: const MyApp(),
    ),
  );
}

搞定。只需套上一层组件包装（Widget Wrapper），任务就完成了。

工作原理

当你的应用在调试模式（Debug Mode）下启动时，该插件会自动执行以下操作：

1. 启动 HTTP 服务：默认监听 8080 端口。
2. 生成安全认证令牌：自动创建一个 Token 以确保连接安全。
3. 打印连接信息：直接在控制台（Console）输出相关的连接指南。

┌────────────────────────────────────────────────┐
│ 📸 Advanced Screenshot Server                  │
│                                                │
│ URL:   http://127.0.0.1:8080                   │
│ Token: 652e9357-84b4-48fa-a3b1-577a4a71fa30    │
└────────────────────────────────────────────────┘

现在，你可以随心所欲地从任何地方抓取截图了：

curl -H "Authorization: Bearer <token>" \  
http://localhost:8080/screenshot -o screenshot.png

🔒 默认安全

• 仅限调试模式：默认情况下仅在 Debug 模式运行（生产环境不会启动）。
• 基于 Token 的认证：通过身份令牌确保连接安全。
• 速率限制：每秒最多捕获 1 张截图，防止过载。

🌐 全平台支持 支持 iOS、Android、macOS、Windows 以及 Linux。

📱 设备支持

• Android USB 连接：通过 adb forward tcp:8080 tcp:8080 进行端口转发。
• iOS/真机：通过设备 IP 地址在 Wi-Fi 环境下连接。
• 模拟器：支持 localhost 直接访问。

⚙️ 灵活配置

ScreenshotServer(
  port: 8080,
  token: 'your-secret-token',  // or auto-generated
  maxRequestsPerSecond: 1,
  child: const MyApp(),
)

1. QA 测试

你的测试团队可以在不中断测试流程的情况下，瞬间获取并分享截图。只需运行一条 curl 命令，就能直接将生成的图片附件挂载到 Bug 报告中。

2. CI/CD 集成

在自动化测试执行期间实时捕获截图，并将其自动关联至测试报告：

flutter test  
curl -H "Authorization: Bearer $TOKEN" \  
http://localhost:8080/screenshot -o test_result.png

运行你的 App，然后在控制台查看服务器 URL 和 Token。就这么简单！

3. 远程调试

正在帮同事调试他设备上的问题？只需让他运行 App 并把服务器信息发给你，你就能直接从他的设备上远程抓取实时截图。

4. 设计评审

快速抓取不同屏幕尺寸或像素密度（Pixel Ratios）下的截图：

curl -H "Authorization: Bearer $TOKEN" \  
"http://localhost:8080/screenshot?pixelRatio=2.0" -o screenshot@2x.png

本工具包在设计之初就将安全性放在首位：

• 默认仅限调试模式：在 Release 正式版构建中，服务器将不会启动。
• Token 身份认证：每一个请求都必须携带有效的令牌（Token）。
• 速率限制：每秒仅限 1 次请求，有效防止接口被恶意滥用。
• 风险警示条：如果你强行在 Release 模式下开启功能，应用界面上方会显示醒目的红色警告横幅。