Vibe coding实现视频字幕识别系统 — 项目说明

发布时间:2026/9/24 1:38:28
Vibe coding实现视频字幕识别系统 — 项目说明 视频字幕识别系统 — 项目说明基于 Spring Boot 阿里云视觉智能平台的视频字幕识别 Web 应用上传视频后自动解析并下载中/英文字幕。源代码密钥已移除方便提交仓库这个网址已经打不开了一、项目简介这是一个完整的 Web 应用用户通过浏览器上传视频文件或使用默认测试视频系统调用阿里云视频识别videorecogAPI 提交异步识别任务待任务完成后自动解析出中文字幕和英文字幕的下载链接前端一键下载 SRT 字幕文件。核心流程选择视频 → 上传至服务器 → 提交阿里云识别任务 → 轮询查询异步结果 → 解析字幕下载链接 → 下载字幕二、技术栈层次技术后端框架Spring Boot 3.2.12JDKJava 17构建工具Maven云服务阿里云视觉智能平台videorecog viapi阿里云 SDKvideorecog20200320视频识别、viapi20230117异步结果查询前端原生 HTML CSS JavaScript单页应用日志SLF4J Logback三、项目结构vidio-demo/ ├── pom.xml # Maven 依赖配置 ├── src/main/ │ ├── java/com/example/demo/ │ │ ├── DemoApplication.java # Spring Boot 启动类 │ │ ├── config/ │ │ │ ├── AliyunProperties.java # 阿里云 API 配置属性映射配置文件 │ │ │ └── WebMvcConfig.java # CORS 跨域 静态资源映射 │ │ ├── constant/ │ │ │ └── AliyunApiConstant.java # API 常量默认测试视频 URL 等 │ │ ├── controller/ │ │ │ ├── HelloController.java # 健康检查接口 /hello │ │ │ └── VideoCastCrewController.java # 核心 REST 接口上传、提交识别、查询结果 │ │ ├── model/ │ │ │ ├── RecognizeRequest.java # 识别请求 DTO │ │ │ └── RecognizeResultResponse.java # 识别结果响应 DTO │ │ ├── service/ │ │ │ ├── VideoCastCrewService.java # 服务接口 │ │ │ └── impl/ │ │ │ └── VideoCastCrewServiceImpl.java # 服务实现调用阿里云 SDK │ │ └── test/ │ │ ├── RecognizeVideoCastCrewList.java # 视频识别测试 │ │ └── GetAsyncJobResult.java # 异步结果查询测试 │ └── resources/ │ ├── application.properties # 应用配置端口、上传目录、阿里云密钥等 │ ├── logback-spring.xml # 日志配置 │ ├── static/ │ │ └── index.html # 前端页面单文件 SPA │ └── META-INF/ │ └── additional-spring-configuration-metadata.json四、REST API 接口4.1 视频上传POST /api/video/upload Content-Type: multipart/form-data 参数: file (视频文件)响应示例{success:true,message:视频上传成功,fileName:demo.mp4,storedFileName:20260620001700_8e76571d_demo.mp4,fileSize:5242880,fileUrl:/uploads/videos/20260620001700_8e76571d_demo.mp4,uploadTime:20260620001700}4.2 提交视频识别任务POST /api/video/cast-crew-recognition Content-Type: application/json 请求体: { videoUrl: https://example.com/video.mp4 } videoUrl 可选不传则使用默认测试视频响应示例{success:true,jobId:A1B2C3D4-5678-90EF-GHIJ-KLMNOPQRSTUV,message:任务已提交成功请使用 jobId 查询异步结果}4.3 查询异步识别结果GET /api/video/cast-crew-recognition/{jobId}/result响应示例{success:true,jobId:A1B2C3D4-...,rawResult:{ ... 阿里云 API 原始 JSON ... },message:查询成功}前端收到后会自动解析rawResult中的中英文字幕下载 URL。4.4 健康检查GET /hello → Hello, Spring Boot!五、前端页面前端是一个独立的单页应用src/main/resources/static/index.html暗色主题支持拖拽 / 点击上传视频文件支持 MP4 / MOV / AVI / MKV一键提交视频解析任务自动轮询异步任务结果每 3 秒一次最多 60 次任务状态实时显示处理中 / 已完成 / 失败中英文字幕解析与一键下载SRT 文件后端 JSON 响应可视化 控制台日志实时输出背景粒子动画六、关键实现细节6.1 阿里云 SDK 集成提交识别使用com.aliyun:videorecog20200320SDK调用RecognizeVideoCastCrewList接口返回jobId。查询结果使用com.aliyun:viapi20230117SDK调用GetAsyncJobResult接口传入jobId查询异步任务的执行结果。两阶段分别在 VideoCastCrewServiceImpl 中实现通过AliyunProperties注入 AccessKey 和 Endpoint 配置。6.2 文件上传视频文件上传后存储到本地uploads/videos/目录以时间戳_UUID_原始文件名格式命名确保文件名唯一且安全。通过WebMvcConfig将目录映射为静态资源前端可直接访问。6.3 跨域支持在WebMvcConfig中配置了 CORS允许任意域名访问/api/**接口方便前后端分离部署或本地开发调试。6.4 异步轮询前端 JS 在提交识别任务后自动每 3 秒轮询一次结果接口直到任务状态变为PROCESS_SUCCESS成功或PROCESS_FAILED失败最多轮询 60 次约 3 分钟。七、如何运行前置条件JDK 17Maven 3.6阿里云视觉智能平台账号需开通视频识别服务配置在src/main/resources/application.properties中配置server.port8081 # 阿里云 AccessKey必填替换为你自己的密钥 aliyun.access-key-id你的AccessKeyID aliyun.access-key-secret你的AccessKeySecret aliyun.videorecog-endpointvideorecog.cn-shanghai.aliyuncs.com aliyun.viapi-endpointviapi.cn-shanghai.aliyuncs.com启动# 编译并运行mvn spring-boot:run -Dspring-boot.run.forkfalse启动后访问 http://localhost:8081 即可打开前端页面。八、注意事项阿里云视频识别为异步服务提交任务后通常需要等待一段时间视视频长度而定前端会自动轮询等待。上传视频大小限制默认为500MB可在application.properties中调整。本项目中的 AccessKey 等凭证信息请妥善保管切勿提交到公开仓库。默认测试视频来自阿里云官方示例优先使用该链接验证接口连通性。这是作者首次利用这个方式来完成这个项目本篇说明也是使用AI提取项目内容完成若有不对的地方还望海涵完

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询