通过阅读本文,您可以了解超级小班课Web端的集成操作。
环境要求
Web端具体环境要求,更多信息,请参见使用限制。
前提条件
操作步骤
Demo源码解析
- 目录结构说明
├── dist #打包文件 ├── public #静态资源 ├── src #项目文件目录 │ ├── assets #静态资源 │ ├── components #公共组件 │ ├── core #js文件 │ │ ├── data │ │ │ ├── config.js #相关配置参数 │ │ ├── util │ │ │ ├── utils.js #一些公共方法 │ │ ├── rtc-engine.js #单例 │ │ ├── rtc-client.js #RTC实例文件 │ ├── plugins │ ├── router #路由 │ ├── views #页面 │ │ ├── login │ │ │ ├── login.vue #登录页面 │ │ ├── student │ │ │ ├── student.vue #学生页面 │ │ ├── assistant │ │ │ ├── assistant.vue #助教页面 │ │ ├── teacher │ │ │ ├── teacher.vue #教师页面 │ ├── vuex │ ├── App.vue #根组件 │ ├── main.js #入口文件 ├── vue.config.js #vue配置文件
- 主要功能说明
- 检查浏览器是否支持。
RtcEngine.instance.isSupport().then(re => {}).catch(err=>{});
- 获取设备信息。
RtcEngine.instance.getDevices().then(re => {})
- 指定摄像头。
RtcEngine.instance.currentCamera(deviceId)
- 指定麦克风。
RtcEngine.instance.currentAudioCapture(deviceId)
- 开启预览。
/** * 预览 * @parame {HtmlVideoElement} video 播放预览画面的video标签 */ RtcEngine.instance.startPreview(video).then(re=>{})
- 停止预览。
RtcEngine.instance.stopPreview(video).then(re=>{})
- 设置是否自动推流自动订阅。
需要在加入频道之前设置,此接口是针对频道设置的。
/** * 设置是否自动推流和自动订阅 默认自动推流自动订阅 * @param {*} channel 频道 * @param { boolean } autoPub true表示自动推流 * @param { boolean } autoSub true表示自动订阅 */ RtcEngine.instance.setAutoPublishSubscribe(channel, autoPub, autoSub)
- 注册回调。
需要在加入频道之前设置,此接口是针对频道设置的。
/** * 注册回调 * @param {*} channel 频道 * @param {*} callback */ RtcEngine.instance.registerCallBack(channel, callback)
- 加入频道。
/** * 加入房间 * @param {*} channel 频道 * @param {*} userName */ RtcEngine.instance.login(channel, userName).then(re=>{})
- 开始推流。
/** * 开始推流 * @param {*} channel 频道 */ RtcEngine.instance.startPublish(channel).then(re=>{})
- 停止推流。
/** * 停止推流 * @param {*} channel 频道 */ RtcEngine.instance.stopPublish(channel).then(re=>{})
- 设置是否停止发布本地音频。
/** * 设置是否停止发布本地音频 * @param {*} channel 频道 * @param {*} enable */ RtcEngine.instance.muteLocalMic(channel, enable)
- 设置是否停止发布本地视频。
/** * 设置是否停止发布本地视频 * @param {*} channel 频道 * @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 {*} channel 频道 * @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 {*} channel * @return { array | boolean } */ RtcEngine.instance.getUserList(channel)
- 获取用户信息。
/** * 获取判断用户列表 * @param {*} channel 频道 * @return { array | boolean } */ RtcEngine.instance.getUserInfo(channel, userId)
- 离开频道。
/** * 离开频道 */ RtcEngine.instance.logout().then(re=>{})
- 检查浏览器是否支持。