VUE+SPRINGBOOT从0-1打造前后端-前后台系统-会议记录
在当今快节奏的工作环境中，会议记录是每个职场人士都必须要面对的任务。传统的手动记录方式不仅效率低下，而且容易遗漏重要信息。随着Web技术的发展，基于浏览器的实时语音转写技术为会议记录提供了全新的解决方案。本文将详细介绍如何利用WebSocket、WebRTC和讯飞开放平台的实时语音转写API，构建一个高效的会议记录系统。
一、系统架构概述
我们的会议记录系统主要包含以下几个核心模块：
前端界面：基于Vue.js框架构建的用户界面
录音模块：使用Recorder.js实现浏览器端语音采集
实时传输模块：基于WebSocket协议的语音数据传输
语音转写模块：对接讯飞开放平台的实时语音转写服务
结果展示模块：实时显示转写结果的文本区域
系统工作流程如下：
用户点击"长时会议记录"按钮开始录音
系统建立WebSocket连接并开始采集语音
语音数据通过WebSocket实时传输到转写服务
转写结果实时返回并显示在文本区域
用户点击"停止记录"按钮结束整个过程
二、关键技术实现
1. 语音采集与处理
我们使用Recorder.js库来实现浏览器端的语音采集功能。这是一个轻量级的JavaScript库，支持多种音频格式的录制和处理。
let recorder = new Recorder("../../recorder")
recorder.start({sampleRate: 16000,frameSize: 1280,
});关键参数说明：
sampleRate: 采样率设置为16000Hz，这是语音识别常用的采样率frameSize: 每帧大小设置为1280字节，平衡实时性和网络负载
录音过程中，我们通过onFrameRecorded回调函数处理音频数据：
recorder.onFrameRecorded = ({isLastFrame, frameBuffer}) => {if (!isLastFrame && wsFlag) {wsTask.send(new Int8Array(frameBuffer))} else {if (wsFlag) {wsTask.send('{"end": true}')}}
}这种分帧传输的方式确保了语音数据的实时性，同时减轻了网络压力。
2. WebSocket连接管理
WebSocket是实现实时通信的关键技术。我们封装了WebSocket的初始化和管理逻辑：
async wsInit() {let reqeustUrl = await this.getWebSocketUrl()wsTask = new WebSocket(reqeustUrl);wsTask.onopen = function() {wsFlag = truerecorder.start({sampleRate: 16000,frameSize: 1280,});}wsTask.onmessage = function(message) {this.renderResult(message.data)}// 其他事件处理...
}需要注意的是，WebSocket连接需要处理各种状态变化和异常情况，包括连接建立、消息接收、连接关闭和错误处理等。
3. 讯飞API鉴权与连接
与讯飞开放平台的连接需要进行鉴权，我们实现了完整的鉴权流程：
getWebSocketUrl() {var appId = atob(this.user.appid);var secretKey = "861ae0b4f7d7c1c0875a4b7153d9997d";var ts = Math.floor(new Date().getTime() / 1000);var signa = hex_md5(appId + ts);var signatureSha = CryptoJSNew.HmacSHA1(signa, secretKey);var signature = CryptoJS.enc.Base64.stringify(signatureSha);signature = encodeURIComponent(signature);return `${this.URL}?appid=${appId}&ts=${ts}&signa=${signature}`;
}鉴权过程包括：
获取应用ID和密钥
生成时间戳
计算签名
构造完整的WebSocket连接URL
4. 转写结果处理
讯飞API返回的转写结果需要经过解析才能显示给用户：
renderResult(resultData) {let jsonData = JSON.parse(resultData);if (jsonData.action == "result") {const data = JSON.parse(jsonData.data)let resultTextTemp = ""data.cn.st.rt.forEach((j) => {j.ws.forEach((k) => {k.cw.forEach((l) => {resultTextTemp += l.w;});});});if (data.cn.st.type == 0) {this.text += resultTextTemp;}}
}结果处理逻辑解析了讯飞API返回的JSON结构，提取出实际的转写文本并追加到显示区域。
三、前端界面设计
系统界面简洁实用，主要包含以下几个部分：
<div class="Meeting-container"><!-- 转写结果显示区域 --><textarea v-model="text"placeholder="请点击长时会议记录，会把会议说的话记录成文字，方便会后整理纪要"style="height: 560px;"></textarea><!-- 控制按钮 --><div><el-button @click="voiceSend"><i class="el-icon-microphone"></i>长时会议记录</el-button><el-button @click="stopVoice">停止记录</el-button></div> </div>
界面设计考虑点：
大文本区域方便查看长文本内容
醒目的操作按钮
简洁的提示信息
响应式布局适应不同设备
四、系统优化与扩展
1. 性能优化
音频数据处理优化：使用TypedArray处理二进制数据，提高处理效率
网络传输优化：合理设置分帧大小，平衡实时性和网络负载
内存管理：及时清理不再需要的音频数据，避免内存泄漏
2. 功能扩展
多语言支持：扩展支持英语等其他语言的转写
说话人分离：识别不同说话人并标注
关键词标记：自动识别并标记会议中的关键信息
云端存储：将转写结果自动保存到云端
3. 错误处理与日志
完善的错误处理机制：
wsTask.onerror = function() {console.log('发生错误...')// 可以添加更详细的错误处理和用户提示this.$message.error("连接发生错误，请检查网络后重试");
}建议添加日志记录功能，便于问题排查和系统维护。
五、部署与使用指南
1. 系统部署
准备Web服务器（如Nginx）
部署前端代码
配置HTTPS（WebRTC和WebSocket通常需要安全上下文）
配置域名和SSL证书
2. 使用说明
打开系统页面
点击"长时会议记录"按钮开始
系统会提示"已开始记录会议..."
进行正常会议，系统会自动转写语音
会议结束后点击"停止记录"按钮
复制或导出转写结果
六、常见问题与解决方案
浏览器兼容性问题
解决方案：明确说明支持的浏览器及版本，提供检测脚本
麦克风权限问题
解决方案：添加明确的权限请求提示和引导
网络不稳定导致中断
解决方案：实现自动重连机制和断点续传
长时录音的内存问题
解决方案：定期清理缓存，添加内存监控
结语
本文详细介绍了一个基于Web技术的实时语音会议记录系统的设计与实现。通过结合WebSocket、WebRTC和语音识别API，我们构建了一个高效、实用的会议辅助工具。系统具有良好的实时性和可用性，能够显著提高会议记录的效率和质量。
未来，我们可以进一步扩展系统的功能，如添加编辑标记、智能摘要生成、多设备同步等功能，使其成为更完善的会议协作平台。