Open
Description
声网参赛经历记录——白板插件开发(前端)
[toc]
# 比赛创意
最开始讨论的结果时做一个会议记录相关的插件，结合声望原本提供的白板插件功能，可以实时的进行展示，多人操作、互动，音视频通话。区别于现有会议模式的一点就是，除了音视频通话，还可以在通话的同时，在白板上进行操作，类似于Web上 <mark>在线文档</mark>、<mark>在线会议</mark>、<mark>在线画板</mark> 三者功能集一身的一款白板插件，当然这里在线白板的功能是由声望的 SDK 提供了这个能力，在线文档的这些具体的在线同步的逻辑还是要以声望提供的为基准。
1. 最终结果
最终由于我们人力有限，并且都是兼职参加比赛，所以完成上是大打折扣。
- 调用了讯飞的实时语音识别接口实现了插件的 <mark>语音转写</mark> 功能，可以进行多人语音识别到插件内部
- 可以对会议内容和识别记录进行 <mark>一键导出</mark> 的功能
最后呢，由于实现的功能过于单调，又新增了一个 Markdown 的编辑器，插件启动后可以编辑，但是这个内容是不同步的。
# 技术总结
总结一下我个人在比赛中学习和使用到的一些技术，由于我本人是 C++客户端 开发，之前虽然也有学习过VUE和前端知识，但是 VUE3 的改动还是挺大，使用起来颇有些不太习惯的地方。主要的前端框架以及代码功能都是由我比赛的队友去完成的。我负责后台数据相关的一些工作。主要面向于音视频录制、存储、发送等，以及调用语音识别接口。
- AgoraRTC(声网的sdk，提供实时音视频服务)
- IatRecorder(讯飞封装的一个语音识别接口)
- Vue
- 前端三剑客（js、h5、CSS）这三个在调试过程中占比很大
# 实现
实现部分主要讲关于音频传输、录音、实时语音转写这三点：
音频传输
音频传输方面。声网有现成的demo提供学习，使用起来相对比较简单。
API-Examples-Web/Demo/selfRendering at main · AgoraIO/API-Examples-Web
blog link 声网参赛经历记录——白板插件开发(前端)