一点经验，从需求到上线搞出一个Chinese版的Screenlapse

2023-12-22 08:10:34

掘金上有许多专业的大佬，分享各种专业技术、代码、经验，看的美滋滋，但是在身为一只菜鸡的我也在思考，大家看了那么多文章，了解了那么多前沿技术，真正落地使用的又有多少？还是需要实战一下才能知道，什么时候需要用到什么技术手段，怎么合适的运用各种技术来解决问题。因此本篇文章并不是分享哪些技术如何使用，而是针对如何将一个产品从零到一用技术落地实施，并进行一些简单的技术分享。

项目背景

最近沉迷于刷短视频，逛着逛着就在某音刷到了一个外国博主分享的Screenlapse小工具。相信不少人和我一样，第一次看到它的反应都是「哇！好酷！」，Screenlapse能够将你的电脑桌面实况录制下来，并生成一张动态的gif或者mp4格式的屏幕动态演示图。

相较于传统的方式，例如使用录屏工具，Screenlapse最大优点就是无需手动录制，录制好的视频效果也可以直接在Screenlapse的网站中进行播放。因此打算花点时间做一个Chinese版的Screenlapse工具来供大家使用。

项目需求

由于目前Screenlapse只支持生成纯GIF格式的视频，因此计划增加两种视频的格式（MP4以及WebM），实现视频快速分享的需求，同时为了更好的用户体验，希望能够使用录好的视频生成Markdown格式的内容，便于文章的书写分享。另外，由于Screenlapse是一个轻量级的录制工具，期望能够支持更多的功能，例如标注、水印、主题风格等。

项目技术选型

根据以上的功能需求，对相关技术进行调研：

屏幕录制：
- FFmpeg：一个跨平台的视频录制、转换和流媒体工具箱。
- OBS Studio：一个开源的跨平台屏幕录制和直播软件。
视频编辑：
- Video.js：一个用于构建流媒体视频播放器的开源JavaScript框架。
- Plyr.io：一个用于构建HTML5视频播放器的开源JavaScript库。
GIF生成：
- Gifsicle：一个用于创建、编辑和优化GIF图像的命令行工具。
- ImageMagick：一个用于创建、编辑和转换图像的命令行工具。
Markdown生成：
- Marked：一个用于将Markdown转换为HTML的JavaScript库。
- Remarkable：一个用于将Markdown转换为HTML的Node.js库。

项目架构设计

整个项目的架构设计采用前后端分离的架构，前端采用React框架，后端采用Node.js框架，前端负责页面的渲染和交互，后端负责视频的录制、编辑、转换和存储。

项目实现

根据以上的设计，对项目进行具体实现：

前端开发：
- 使用React框架搭建页面，使用Material-UI作为UI组件库。
- 实现视频录制、编辑、转换和存储的功能。
- 实现Markdown生成的功能。
后端开发：
- 使用Node.js框架搭建服务器，使用Express作为框架。
- 实现视频录制、编辑、转换和存储的功能。
- 实现Markdown生成的功能。