[CQU 20240702]清录——实时语言转录屏

[cryogenicbird]

清录 —— 浏览器端录屏工作台

一、项目概述

清录是一款基于浏览器原生 API 的录屏工作台，无需安装任何插件或软件，打开网页即可使用。支持多场景管理、显示器/摄像头多源采集、系统音频与麦克风混音，以及实时语音转字幕功能。

二、核心功能

2.1 多源采集与合成

• 显示器采集：支持 60fps 高清显示器画面捕捉
• 摄像头采集：支持前置/外接摄像头画中画叠加
• 音频混音：系统音频 + 麦克风独立音量调节，实时混音输出

2.2 素材管理

• 多场景切换：支持创建多个场景，每个场景独立管理素材布局
• 自由拖拽缩放：素材节点支持拖拽移动、八向缩放手柄，自由调整位置与大小
• 图层管理：支持置顶/置底层级调整，一键铺满全屏

2.3 实时字幕

• 集成豆包（火山引擎）实时语音识别
• 字幕节点独立拖拽定位

• 适合教学录屏、演讲演示等场景

2.4 录制导出

• 支持 WebM 格式录制导出
• 录制计时器实时显示录制时长
• 一键开始/停止录制

三、技术实现

• 纯前端实现，基于 HTML5 MediaStream API、Screen Capture API、Web Audio API
• 音频处理：AudioContext 实现多轨混音与增益控制
• 字幕：WebSocket 连接本地 STT 服务，实时推送识别结果
• 无框架依赖，运行两个文件即可使用

四、启动方式

1. 安装依赖：pip install flask flask-cors websockets
2. 启动后端服务：
   打开bash进入正确位置
   python app.py # Flask 主服务 (5000端口)
   python ws_server.py # 字幕 WebSocket 服务 (5001端口)
   然后打开浏览器进入http://127.0.0.1:5000/即可

3.要使用实时字幕功能，需要自行申请火山引擎的 “豆包流式语音识别模型 2.0”：
①打开火山引擎豆包语音控制台：
👉 https://console.volcengine.com/speech/
在左侧菜单找到 “豆包流式语音识别模型 2.0”，点击进入。
②点击 “开通” 或 “试用”（有免费试用额度，通常 20 小时）。
③开通后，在 “服务接口认证信息” 中查看自己的APP ID和Access Token
④在本项目的网页中，右键点击字幕框 → “设置 API Key”，填入以上两项即可使用。

五、总结

清录是一个轻量级、即开即用的录屏工具，适合需要快速开启录屏、同时叠加摄像头画面和实时字幕的场景。项目完全基于浏览器能力实现，无需后端服务（字幕除外），部署简单，欢迎同学们使用、反馈或共同改进！

##六、项目地址
https://github.com/cryogenicbird/qinglu-recorder

[64NoName64]

that's seems good , bro. keep going