您可以阅读本文,了解超级小班课Web端的集成操作。
开发前的环境要求如下表所示,详情请参见:使用限制。
类别 | 说明 |
---|---|
浏览器 | Chrome浏览器60版本及以上,Safari浏览器11版本及以上。浏览器开启视频设备和麦克风设备。 |
Node.js | 支持Node.js 6.0版本及以上。具体操作,请参见安装Node.js。 |
屏幕录制 | Mac设备需要为浏览器打开屏幕录制权限。 |
应用ID和AppKey需要对应,不同的应用ID有不同的AppKey。
在后续开发中会使用应用ID和AppKey,建议记录到本地文档中,妥善保存。
打开web/src/core/data/config.js文件,修改AppID和AppKey。
本Demo中在客户端代码配置AppID和AppKey的方式,很容易被反编译逆向破解,一旦AppID和AppKey泄露,攻击者就可以盗用您的阿里云流量,因此该配置方式仅适合用于本地Demo的运行和功能调试。
正确的Token签发方式是将Token的计算代码集成到您的服务端,并提供面向App的接口,在需要Token时由您的App接口向业务服务器发起请求获取动态Token。具体操作,请参见生成Token。
npm install
npm install aliyun-webrtc-sdk -S
npm run serve
打开终端,定位到Demo中的web文件夹所在目录。输入以下命令将压缩静态资源文件,可作为生产环境打包发布。
npm run build
├── dist #打包文件
├── public #静态资源
├── src #项目文件目录
│ ├── assets #静态资源
│ ├── components #公共组件
│ ├── core #js文件
│ │ ├── data
│ │ │ ├── config.js #相关配置参数
│ │ ├── util
│ │ │ ├── utils.js #一些公共方法
│ │ ├── rtc-engine.js #单例
│ │ ├── rtc-clinet.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=>{})
在文档使用中是否遇到以下问题
更多建议
匿名提交