越南开发者用 TRAE 做了个复古相机，还原拍立得显影过程

Flashback 是一款模拟复古即时相机（Polaroid）体验的 Web 应用。

作品来自越南的 TRAE 用户 The Vibe Coders（成员：Mai Nguyen & Son Le），他们是两位后端开发者，在参与 11/22 TRAE 越南 Vibe Coding 体验活动时，用 TRAE SOLO 实现了这款基于网页的应用。这款相机可以将你的普通摄像头变成一台虚拟的复古拍立得，完整还原从按下快门到照片显影的整个过程。用户只需一个带摄像头的设备，就可以拍摄带有复古滤镜的照片，并通过动画效果观看照片"显影"的过程，仿佛回到了胶片年代。

作者：Mai Nguyen & Son Le，TRAE 开发者用户

为什么做这个项目

项目起源

起初，这只是一个源于朋友的拍立得相机带来的灵感。团队成员之一说：

"我们有个朋友拥有一台真正的复古拍立得，我们非常喜欢它拍照的过程和感觉。但现实是，这种相机价格不低，我们也买不起。所以我们决定，自己动手，用代码造一台。"

于是，Flashback 应运而生。它不仅解决了昂贵设备门槛的问题，还带来了如下几点价值：

让复古摄影零门槛： 只要有摄像头，人人都能免费体验拍立得的乐趣。
模拟真实交互： 用户需要手动开机、取景、按快门，仿佛真的在用一台物理相机。
还原显影过程： 照片从黑屏逐渐清晰，仅需短短 3 秒，却让人感受到等待的仪式感。
提升情绪价值： 慢下来的一拍一显，比滤镜一键生成更值得珍藏。
保留复古美感： 多种滤镜让照片更具"老照片"的质感。

用到 TRAE 的能力

TRAE IDE 的 SOLO 模式： AI 辅助开发，帮助快速完成原型、生成代码，解决开发过程中遇到的各种问题。
一键部署到 Vercel： 简化了部署流程，让应用快速上线。

架构设计：简单技术，完整体验

应用架构

Flashback 是一个纯前端构建的单页应用（SPA），技术栈非常轻量：

HTML + CSS + JavaScript： 不依赖大型框架，兼容性强，加载迅速。

核心流程

权限获取 - 用户点击电源按钮，授权使用摄像头
实时预览 - 视频流实时显示，可预览选中的滤镜效果
图像捕获 - 点击快门，将当前画面捕获到画布
滤镜处理 - 对图像应用滤镜并进行处理
显影动画 - 照片带着动画效果"弹出"，然后逐渐"显影"
照片收藏 - 用户可以把照片拖到钉板上收藏

效果展示

在线体验

在线演示地址：

flashbackcamera.vercel.app/

主要功能展示

相机开机动画和实时预览
四种复古滤镜：正常、柯达彩色、褪色哑光、8mm 胶片
照片弹出和显影动画效果
拖放式照片钉板
移动端响应式适配

挑战与经验总结

遇到的技术难题

1. 跨浏览器的摄像头权限问题

遇到的挑战： Chrome、Firefox 和 Safari 处理媒体权限的方式各不相同，很难做到统一体验。
解决方案： 针对不同浏览器做了大量测试，并实现了多套后备方案来确保兼容性。

2. 实时滤镜的性能优化

遇到的挑战： 需要在视频流上实时应用滤镜，同时保持 60fps 的流畅度，这对性能要求很高。
解决方案： 经过测试发现，CSS 滤镜在实时预览场景下比 Canvas 滤镜性能更好，最终采用了 CSS 方案。

3. 拖放功能的实现

遇到的挑战： 要让拖放功能在桌面端和移动端都能流畅使用，需要处理多种事件类型，还要阻止浏览器的默认行为。
解决方案： 开发了自定义的拖放系统，统一处理不同设备的交互逻辑。

遇到的设计难题

4. 如何做出真实的复古感

遇到的挑战： 既要有复古美学，又要保证现代用户的使用习惯，这两者之间很难平衡。
解决方案： 在相机设计、动画效果和交互方式上反复打磨，最终找到了合适的平衡点。

5. 响应式 3D 效果的适配

遇到的挑战： 3D 相机的视差效果需要在各种屏幕尺寸上都看起来自然，从小手机到大显示器都要兼顾。
解决方案： 针对不同屏幕尺寸调整了 3D 效果参数，确保在各种设备上都有好的视觉体验。

核心经验总结

用户体验永远是第一位的

比起实现多么高级的图像处理技术，让用户感受到怀旧氛围和流畅交互更重要

音效能大幅提升真实感

简单的音效就能让整个体验的真实度提升一大截

Flashback Camera 不只是一个玩具项目，它是一次关于"数字怀旧"的实验，也是对 Web 技术可玩性的一次精彩演绎。The Vibe Coders 团队用最朴素的技术，创造了最富情感的体验，令人眼前一亮。

在这个人人追求"效率最大化"的世界，这种带点仪式感和浪漫气息的小工具，反而更值得被记住。

期待未来，他们还能用代码带来更多"有温度"的创意项目。