这是针对Pinata挑战的参赛作品
我建的东西VidSnap 是一个屏幕录制应用程序,用于轻松捕捉并分享你的屏幕内容。你所需要做的就是点击“开始录制”按钮,并将预览链接分享给任何人。它很私密,你的录制会安全地存储在 Pinata Cloud。
演示你可以在这里查看VidSnap的实际操作:网址是"https://vidsnap-app.vercel.app/"。
或者看看这个快速屏幕截图 😉:https://vidsnap-app.vercel.app/v/019288f7-d95f-7eef-bcd4-7c2f00693508
您可以开始录制匿名音频,也可以自由注册用户名和密码。注册后,视频会保存到您的账户里,您可以在首页查看所有录制的内容。
这是你的视频预览;你可以将网址分享给任何人,让他们也可以观看。
(注:由于没有提供源文本和翻译内容,因此无法进行具体的修改和反馈。请提供需要审查的文本。)
VidSnap:轻松录制屏幕的应用VidSnap 是一个屏幕录制软件,可以轻松捕捉并分享您的屏幕内容。只需点击“开始录制”,然后将预览链接分享给任何人。它是保密的,您的录制内容会安全地保存在 Pinata Cloud 上。
开始吧- 将项目克隆到您的本地机器。
- 将其链接到 Vercel 项目以进行 API 功能测试(使用
npm i -g vercel
)。 - 在 Pinata Cloud 注册并创建一个新的 API 密钥。
- 获取 JWT 密钥并在 Vercel 中将其添加为环境变量
vercel env add PINATA_JWT
- 在
/api/video.js
文件中替换网关域名。 - 运行开发服务器
vercel dev
首页
更多细节
Pinata 被用来存储所有文件和元数据。
我创建了四个用于与Pinata API交互的API端点。
/api/file.js
处理所有文件上传和元数据操作以及文件删除。在这里我们为每个操作使用不同的 HTTP 方法,比如 GET、POST、PUT 和 DELETE。我想指出 Pinata 的一个优点是我们可以发送不同类型的文件数据,例如 blobs,因此在这种用例中我们可以将流录制转换为 blob 并直接发送给 API。/api/files.js
获取group_id
内的所有文件。Pinata 提供的一个有趣且有用的特性是,无需数据库就可以为每个用户单独存储文件,这使得存储更加方便。/api/group.js
为每个用户创建一个新的组,group_id 用于标识每个用户在文件端点中的文件。/api/video.js
获取视频录制的签名 URL 并将其请求重定向到该 URL,此端点用于在应用程序中嵌入视频内容,使视频播放更加便捷。
这个 web 应用使用 AlpineJS 实现交互,使用 TailwindCSS 设置样式,使用 Clerk 进行用户验证,并使用 Vercel 进行部署。这个技术组合使我能够在 24 小时内快速构建并部署了一个 MVP。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦