声网参赛经历记录——白板插件开发(前端)

[toc]

# 比赛创意

最开始讨论的结果时做一个会议记录相关的插件，结合声望原本提供的白板插件功能，可以实时的进行展示，多人操作、互动，音视频通话。区别于现有会议模式的一点就是，除了音视频通话，还可以在通话的同时，在白板上进行操作，类似于Web上 在线文档、在线会议、在线画板 三者功能集一身的一款白板插件，当然这里在线白板的功能是由声望的 SDK 提供了这个能力，在线文档的这些具体的在线同步的逻辑还是要以声望提供的为基准。

1. 最终结果

最终由于我们人力有限，并且都是兼职参加比赛，所以完成上是大打折扣。

• 调用了讯飞的实时语音识别接口实现了插件的 语音转写 功能，可以进行多人语音识别到插件内部
• 可以对会议内容和识别记录进行 一键导出 的功能

最后呢，由于实现的功能过于单调，又新增了一个 Markdown 的编辑器，插件启动后可以编辑，但是这个内容是不同步的。

# 技术总结

总结一下我个人在比赛中学习和使用到的一些技术，由于我本人是 C++客户端 开发，之前虽然也有学习过VUE和前端知识，但是 VUE3 的改动还是挺大，使用起来颇有些不太习惯的地方。主要的前端框架以及代码功能都是由我比赛的队友去完成的。我负责后台数据相关的一些工作。主要面向于音视频录制、存储、发送等，以及调用语音识别接口。

1. AgoraRTC(声网的sdk，提供实时音视频服务)
2. IatRecorder(讯飞封装的一个语音识别接口)
3. Vue
4. 前端三剑客（js、h5、CSS）这三个在调试过程中占比很大

# 实现

实现部分主要讲关于音频传输、录音、实时语音转写这三点：

音频传输

音频传输方面。声网有现成的demo提供学习，使用起来相对比较简单。

API-Examples-Web/Demo/selfRendering at main · AgoraIO/API-Examples-Web