在线互动教室 demo 快速体验 | 掘金技术征文

3,483 阅读4分钟

最近手头有项目需要搭建一个在线直播教室的应用,经过这几年的快速发展,在线直播教育这个领域也有不少平台提供了相关的视音频服务。相比其他行业的视音频服务,在线直播教育的硬性需求主要在以下几点:

  • 低延时:直播教学过程中,教师与学生间的互动通常会有一对一、一对多的音视频连麦情况,由于教育场景的特殊性,对于低延时的要求极其严苛。尤其很多情况下还涉及到跨国或面向偏远地区的学生等特殊情况。
  • 音视频流畅清晰:直播过程中不会出现卡顿,画面抖动,声画不同步,画面模糊等情况。
  • 教学功能:比如白板,及时问答,教鞭等
  • 回放功能:能让学生能够及时复习课程内容,定位课堂中特定知识点。

项目搭建

目前 Agora 有两个版本的 eEducation demo,web 版本 demo(eEducation-with-Web) 基于Express(Server) + React(Client),Electron 版本 demo(Agora e-Education Demo with Electron) 则是基于 Express(Room Control + Recording)+ Electron(Client)。我实在才疏学浅,对于 Electron 了解甚少。而且项目目前也是主要 web 和微信小程序,所以直接 pass Electron 选择 web 版本了。

搭建环境: 服务器环境: ubuntu 18.04 + nodejs 8.10.0 浏览器环境: chorme 74.0.3729

  1. 注册声网账号,创建项目,获取 APP ID。这些都是日常流程了,没啥好交待的,不过声网的各位实在太热情了,注册完第二天客服就打电话回访。技术支持也加微信问是否需要什么帮助,服务真是太热情了。

  2. git clone https://github.com/AgoraIO-Usecase/eEducation-with-Web.git,将项目克隆到本地。

  3. 分别进入 serverclient 目录下, 使用 npm install安装依赖。Client 目录下的安装倒是没什么问题, Server 目录下安装 agora-node-rtm 包的时候出错,编译时报 fatal error: event2/buffer.h: No such file or dicectory。嗯,缺了 libevenet 库。这个库是一个基于事件触发的网络库,是 webrtc 的必须库之一。有下面一些特点和优势:

  • 统一I/O事件、信号和定时器这三种事件;
  • 可移植,跨平台支持多种I/O多路复用技术, epoll、poll、dev/poll、select 和kqueue 等;
  • 并发支持,避免竞态条件;
  • 高性能,由事件驱动;
  • 轻量,专注于网络。
  1. libevent 需要自己下载编译,其实也蛮简单,对着 libevent github 的说明文档一步步安装即可,这里就不赘述了。
  2. 然后继续 npm install,继续报错 fatal error: uuid/uuid.h: No such file or dicectory,那就 sudo apt-get install uuid-dev
  3. 继续报错 fatal error: IAgoraService.h: No such file or dicectory,这个名字一看就是 agora 自己写的头文件了。没办法了,先去看看 agora-npm-rtm 包有没安装说明吧。
  4. 找到 agora-npm-rtm github,看了 README,它是使用了 Agora RTM Linux SDK (C++) 作为 nodejs 的插件。需要 node-gyp 支持。才疏学浅啊,不知道这是做啥用的。赶紧学习了一波。node-gyp 主要是用来编译原生 C++ 模块。sudo npm install -g node-gyp 安装完成。
  5. 查找了一下,在另一个账号下找到 RTM github 下有文件 linux RTM C++ SDK。下载,按照提示解压到目录下,还是一样的错。这样的操作我很慌啊。
  6. 首先得拷贝 libagora_rtm_sdk.so/usr/lib/ 下,才注意到文件夹下有 docker-compose.ymlDockerfile 两个文件。打开 Dockerfile,发现是有安装 uuid-devlibevent,也是将 libagora_rtm_sdk.so 放入到 /usr/lib/ 目录下,但是并未提及 include 目录下的三个头文件。我将这三个文件直接拷贝到 /usr/include/ 目录下了。 不再报 fatal error: IAgoraService.h: No such file or dicectory 的错误,但,后面的错误就是我无法解决的了:error: 'agora::rtm::CHANNEL_MESSAGE_ERR_CODE' has not been declared

10. server 目录下的问题目前我是没办法解决了,那就看下 client 能不能跑起来。打开目录后首先查看 README.md,简要介绍了怎么运行、测试、构建。但是 不是应该有地方配置 APP ID 的吗?先不管 APP ID,npm start 测试下,嗯, react 顺利构建并跑起来了,浏览器访问,然后...还是要 APP ID。 11. ok,自己找下吧,翻了下目录,没有任何像是 configure 的文件。那看下代码,index.tsx 入口没有任何提示,查看引入的文件,在 routes/App.tsx 下发现 是从环境变量引入的 REACT_AOO_AGORA_APPID。好吧,那就 export REACT_AOO_AGORA_APPID=MY_AGORA_APP_ID。再次起航。 12. 终于能够顺利访问了。界面蛮漂亮,可惜没有服务端,登入不进去。

总结

  1. 从注册完之后就有人跟进来说,服务来说很好。
  2. 文档、demo 比较全面,目前就缺浏览器插件这一部分了吧。
  3. demo 的部署文档还待优化。引用的库或者相关的资料最好加上链接,毕竟也是学习的机会。

Agora SDK 使用体验征文大赛 | 掘金技术征文,征文活动正在进行中