当前位置: 首页 > 后端技术 > Node.js

搭建超小班网课系统

时间:2023-04-03 11:08:46 Node.js

介绍本场景介绍利用视频云技术搭建超小班网课系统。阿里云体验实验室地址(阿里云ECS体验场景体验)https://developer.aliyun.com/...背景知识音视频通信:音视频通信RTC(Real-TimeCommunication)即实时通信覆盖全球的阿里云通信音视频开发平台,提供高可用、高质量、超低延迟的实时网络服务,适用于在线教育、互动娱乐、视频会议、保险定损、调度、指挥。使用阿里云RTCSDK,您可以在移动端、Web端、PC端等多种终端快速构建可互操作的实时音视频应用。超小班授课:超小班授课是将几千名学生分成几个小班(建议4-6人一组),同时由名师和数名助教进行辅导。所有学生均可实时观看名师授课画面,并可通过连麦与名师互动。多位助教实时关注小班学生动态,维护小班课堂秩序,并可与小班学生连线进行助教指导。这个场景不仅可以让优秀的老师辅导更多的学生,还可以保证学生之间的互动,大大增加学生的学习效果。超小班解决方案适用于K12、少儿语言培训等教育场景。获取音视频通讯应用的AppKey1.使用自己的阿里云账号登录音视频通讯RTC控制台。2.点击左侧的应用管理。3.在应用管理页面,可以看到默认应用的AppID。4.在默认应用右侧的操作栏中点击查询AppKey。在弹出的Appkey查询窗口中点击确定。在查询成功的弹框里可以看到AppKey。连接ECS服务器1.打开系统自带的终端工具。Windows:CMD或Powershell。MAC:终端。2、在终端输入连接命令ssh[用户名]@[ip地址]。username和ipaddress需要替换为第1节中创建的ECS服务器的登录名和公网地址。例如:sshroot@123.123.123.123命令显示结果如下:输入yes。同意后继续,会提示输入登录密码。密码为创建的云服务的ECS登录密码。登录成功后,会显示如下信息。安装Node.js环境1.执行以下命令下载Node.js二进制包。wgethttps://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz2。执行以下命令将Node.js二进制包解压到路径/usr/local。tarxfnode-v14.15.0-linux-x64.tar.xz-C/usr/local/--no-same-owner3.执行以下命令将Node.js二进制文件的路径添加到环境变量中小路。echo"exportPATH=/usr/local/node-v14.15.0-linux-x64/bin:$PATH">>/etc/profile4.执行以下命令,使修改后的环境变量立即生效。来源/etc/profile5.执行以下命令验证安装配置是否成功。如果node-v安装成功,会显示类似下面的内容。修改配置本场景ECS服务器/根路径内置了超小班的项目源码和运行环境,在项目源码中填写自己的AppKey即可运行项目。1、执行以下命令,用Vim打开config.js文件。cdsuperclass_web/&&vimsrc/core/data/config.js2。按i键进入编辑模式,修改appId和appKey为第2步查询到的AppId和AppKey。3、修改完成后,按Esc键退出编辑模式,然后输入以下命令和按Enter键退出Vim编辑器。:wq运行Demo1。执行以下命令安装项目依赖。npm安装2.执行以下命令安装RTCSDK。npm安装aliyun-webrtc-sdk-S3.执行以下命令运行项目。npmrunserve运行成功后,会默认在浏览器中打开项目主页。如果没有自动打开,请在浏览器地址栏输入https://[ipaddress]:888,ip地址见第3步。Demo源码分析工程结构如下:├──dist#packagefile├──public#staticresource├──src#projectfiledirectory│├──assets#staticresource│├──components#publiccomponent│├──core#js文件││├──data│││├──config.js#相关配置参数││├──util││├──utils.js#一些公共方法││├──rtc-engine.js#Singlecase││├──rtc-clinet.js#RTC实例文件│├──plugins│├──router#routing│├──views#page││├──login│││├──login.vue#登录页面││├──student││├──student.vue#student页面││├──assistant││├──assistant.vue#助教页面││├──老师│││├──teacher.vue#teacherpage│├──vuex│├──App.vue#根组件│├──main.js#入口文件├──vue.config.js#vue配置文件下面列出了一些关键函数代码,查看浏览器是否支持。RtcEngine.instance.getDevices().then(re=>{})获取设备信息。RtcEngine.instance.getDevices().then(re=>{})指定相机。RtcEngine.instance.currentCamera(deviceId)指定麦克风。RtcEngine.instance.currentAudioCapture(deviceId)启用预览。/***Preview*@parame{HtmlVideoElement}video播放预览画面的video标签*/RtcEngine.instance.startPreview(video).then(re=>{})停止预览。RtcEngine.instance.stopPreview(video).then(re=>{})用于设置是否自动推送订阅,需要在加入频道前设置。这个接口是为频道设置的。/***设置是否自动推送和自动订阅默认auto-push和auto-subscribe*@param{*}channel*@param{boolean}autoPubtrue表示自动推送*@param{boolean}autoSubtrue表示auto-subscribe*/RtcEngine.instance.setAutoPublishSubscribe(channel,autoPub,autoSub)注册回调,需要在加入频道前设置,该接口为频道设置。/***注册回调*@param{*}channelchannel*@param{*}callback*/RtcEngine.instance.registerCallBack(channel,callback)加入频道。/***加入房间*@param{*}channelchannel*@param{*}userName*/RtcEngine.instance.login(channel,userName).then(re=>{})开始流。/***开始流式传输*@param{*}channelchannel*/RtcEngine.instance.startPublish(channel).then(re=>{})停止流式传输。/***停止推流*@param{*}channelchannel*/RtcEngine.instance.stopPublish(channel).then(re=>{})设置是否停止发布本地音频。/***设置是否停止发布本地音频*@param{*}channelchannel*@param{*}enable*/RtcEngine.instance.muteLocalMic(channel,enable)设置是否停止发布本地视频。/***设置是否停止发布本地视频*@param{*}channelchannel*@param{*}enable*/RtcEngine.instance.muteLocalCamera(channel,enable)切换启用和停止屏幕流。/***开启和关闭屏幕流*@param{*}channel*@param{*}enable*/RtcEngine.instance.switchPublishScreen(channel,enable)订阅音视频。/***设置远程渲染默认订阅音视频(小流)*@param{*}channel*@param{*}userId*/RtcEngine.instance.subscribe(channel,userId).then(re=>{})退订。/***取消订阅*@param{*}channelchannel*@param{*}userId*/RtcEngine.instance.unSubScribe(channel,userId).then(re=>{})设置远程渲染。/***设置远程渲染*@param{*}channel*@param{*}userId*@param{*}video*@param{*}streamType*/RtcEngine.instance.setDisplayRemoteVideo(channel,userId,video,streamType)获取频道用户列表。/***获取判断用户列表频道*@param{*}频道*@return{array|boolean}*/RtcEngine.instance.getUserList(channel)获取用户信息。/***获取判断用户列表*@param{*}channelchannel*@return{array|boolean}*/RtcEngine.instance.getUserInfo(channel,userId)离开频道。/***离开频道*/RtcEngine.instance.logout().then(re=>{})