通过阅读本文,您可以了解互动大班课Electron的集成操作。

环境要求

  • Electron版本:6.0.10。
  • 开发平台:Mac、Windows(建议Windows端使用32位Node文件)。

前提条件

环境中已安装Node.js 6.0或以上版本。具体操作,请参见安装Node.js

操作步骤

  1. 下载并解压SDK和Demo,更多信息,请参见SDK下载Demo源码下载
    说明
    • 源码压缩文件内分为Android、iOS、Electron、Server四端文件。
    • 如果GitHub代码库下载缓慢,可安装加速插件等方式加速下载。
  2. 修改src/renderer/core/data/rtc-config.js文件,根据服务端集成中获取的服务URL配置baseUrl的值。
  3. 修改src/renderer/core/data/aim-config.js文件,配置IM的appNameappKeybaseServer的值。
    1. 创建IM应用,具体操作,请参见应用管理
    2. 获取AppID和AppKey,更多信息,请参见功能配置
    3. 根据获取到的AppID、AppKey以及步骤2中的baseUrl分别配置IM的appNameappKeybaseServer
  4. 修改package.json文件,根据Electron SDK实际版本配置postinstall的值。
    001
    说明
    • win32表示Windows系统,如果是Mac系统,用darwin表示。
    • 如果是Windows系统,参数为ia32;如果是Mac系统,参数为x64
    • postinstall中当前Electron可选的版本为6.0.10。
  5. 运行Demo。
    1. package.json文件所在的目录下执行以下命令,安装项目依赖。

      npm install

    2. 运行项目。运行成功后,浏览器会默认打开示例程序。

      npm run dev

    3. 可选:打包。

      npm run build

      说明
      • 此命令在Mac上运行时会生成dmg包,在windows上运行时会生成exe包。
      • 如果需要在Mac上生成exe包,需要修改package.json文件,具体操作,请参见步骤4,然后执行npm run build:win32进行打包(首次打包需要下载Windows对应打包环境可能会比较慢,可以选择使用国内镜像解决)。

Demo目录结构说明

项目结构如下所示:

002

API说明

目录

API 描述
instance 获取实例。
loginIm 登录IM。
logoutIm 登出IM。
createRoom 创建IM房间(老师调用)。
enterRoom 根据角色进入房间。
setClientRole 设置角色(学生调用)。
setVideoEncoderConfiguration 设置视频分辨率。
muteLocalMic 关闭或打开本地麦克风。
muteLocalCamera 关闭或打开本地摄像头。
startPreview 开启预览。
stopPreview 关闭预览。
setLocalViewConfig 设置本地预览视图。
setRemoteViewConfig 设置远端渲染视图。
setRemoteVideoStreamType 设置远端大小流。
getScreenShareSourceInfo 获取屏幕分享信息(老师调用)。
startScreenShare 开启屏幕共享(老师调用)。
stopScreenShare 停止屏幕共享(老师调用)。
getUserInfo 获取连麦用户信息。
getMemberList 获取房间成员列表。
exitRoom 退出房间。
sendTextMessage 发送普通文本消息。
muteStudentMic 关闭或打开学生麦克风(老师调用)。
muteStudentCamera 关闭或打开学生摄像头(老师调用)。
muteAllStudentMic 关闭或打开所有学生麦克风(老师调用)。
handUp 申请连麦(学生调用)。
backHandUp 是否允许学生上麦(老师调用)。
on 监听事件。
off 取消监听事件。
destroy 销毁实例。

详情

  • instance:获取实例。
    AliRTCElectronInterrativeEngine.instance
  • loginIm:登录IM。
    /**
     * 登录IM
     * @param {String} userid RTC鉴权信息中的userid
     * @returns {Promise}
     */
    AliRTCElectronInterrativeEngine.instance.loginIm(userid).then(()=>{
        // 登录成功
    }).catch((err)=>{
        // 登录失败
    })
  • logoutIm:登出IM。
    /**
     * 登出IM
     * @returns {Promise}
     */
    AliRTCElectronInterrativeEngine.instance.logoutIm().then(()=>{
        // 登出成功
    }).catch((err)=>{
        // 登出失败
    })
  • createRoom:创建IM房间(老师调用)。
    /**
     * 通过RTC信息创建IM房间
     * @param {String} userid RTC 用户ID
     * @param {String} channel RTC 频道号
     * @returns {Promise} 
     */
    AliRTCElectronInterrativeEngine.instance.createRoom(userid, channel).then(()=>{
        // 创建成功
    }).catch((err)=>{
        // 创建失败
    })
  • enterRoom:根据角色进入房间。
    /**
     * 进入房间
     * @param {Number} role 角色 (1 老师 2 学生)
     * @param {Object} authInfo 鉴权信息
     */
    AliRTCElectronInterrativeEngine.instance.enterRoom(role, authInfo)
  • setClientRole:设置角色(学生调用)。
    /**
     * 设置上下麦
     * @param {Number} role 角色 (1 上麦 2 下麦)
     * @returns {Number} 0:成功,其他:失败
     */
    AliRTCElectronInterrativeEngine.instance.setClientRole(role)
    说明
    • 切换上下麦后需要等待TO_INTERACTIVETO_LIVE回调返回后才成功。
    • 上麦自动开始推音视频流,下麦自动停止推音视频流。
  • setVideoEncoderConfiguration:设置视频分辨率。
    /**
     * 设置视频分辨率
     * @param {Number} width 视频宽度
     * @param {Number} height 视频高度
     */
    AliRTCElectronInterrativeEngine.instance.setVideoEncoderConfiguration(width, height)
  • muteLocalMic:关闭或打开本地麦克风。
    /**
     * 关闭/开启本地麦克风
     * @param {Boolean} mute 是否静音
     * @returns {Number} 0:成功 其他:失败
     */
    AliRTCElectronInterrativeEngine.instance.muteLocalMic(mute)
  • muteLocalCamera:关闭或打开本地摄像头。
    /**
     * 关闭/开启本地摄像头
     * @param {Boolean} mute 是否关闭摄像头
     * @returns {Number} 0:成功 其他:失败
     */
    AliRTCElectronInterrativeEngine.instance.muteLocalCamera(mute)
    说明 教育场景中关闭本地摄像头会自动关闭预览,开启后会自动打开预览。
  • startPreview:开启预览。
    /**
     * 开启预览
     * @returns {Number} 0:成功 其他:失败
     */
    AliRTCElectronInterrativeEngine.instance.startPreview()
    说明 需要调用setLocalViewConfig设置视图后才能显示预览画面
  • stopPreview:关闭预览。
    /**
     * 关闭预览
     * @returns {Number} 0:成功 其他:失败
     */
    AliRTCElectronInterrativeEngine.instance.stopPreview()
  • setLocalViewConfig:设置本地预览视图。
    /**
     * 设置本地预览视图
     * @param {HTMLDivElement} container
     */
    AliRTCElectronInterrativeEngine.instance.setLocalViewConfig(container)
  • setRemoteViewConfig:设置远端渲染视图。
    /**
     * 设置远端渲染视图
     * @param {String} userid
     * @param {HTMLDivElement} container
     * @param {Number} type  1: 摄像头流  2:共享流
     */
    AliRTCElectronInterrativeEngine.instance.setRemoteViewConfig(userid, container, type)
  • setRemoteVideoStreamType:设置远端大小流。
    /**
      * 设置远端大小流
      * @param {String} userid 用户ID
      * @param {Number} streamType 1: 大流 2: 小流
      * @returns 
      */
    AliRTCElectronInterrativeEngine.instance.setRemoteVideoStreamType(userid, streamType)
  • getScreenShareSourceInfo:获取屏幕分享信息(老师调用)。
    /**
     * 获取屏幕分享信息
     * @param {Number} sourceType 0: 屏幕信息 1: 应用窗口信息
     * @returns {Promise<Array>} sourceList 获取成功返回 分享信息 
     */
    AliRTCElectronInterrativeEngine.instance.getScreenShareSourceInfo(sourceType).then((sourceList)=>{
        // 获取成功
    }).catch(()=>{
        // 获取失败
    })

    返回的信息如下所示:

    参数名 类型 描述
    sourceId Number 分享源ID。
    sourceTitle String 分享源标题。
    appIcon NativeImage 应用的图标。
    thumbnail NativeImage 缩略图。
  • startScreenShare:开启屏幕共享(老师调用)。
    /**
     * 开启屏幕共享
     * @param {Number} type 0: 屏幕信息 1: 应用窗口信息
     * @param {Number} sourceId 分享源ID
     * @returns {Number} 0:成功 其他: 失败
     */
    AliRTCElectronInterrativeEngine.instance.startScreenShare(type, sourceId)
  • stopScreenShare:停止屏幕共享(老师调用)。
    /**
     * 停止屏幕共享
     * @returns {Number} 0:成功 其他: 失败
     */
    AliRTCElectronInterrativeEngine.instance.stopScreenShare()
  • getUserInfo:获取连麦用户信息。
    /**
     * 获取RTC用户信息
     * @param {string} uid 用户ID
     */
    AliRTCElectronInterrativeEngine.instance.getUserInfo(userid)
  • getMemberList:获取房间成员列表。
    /**
     * 获取IM房间成员列表
     * @param {string} uid 用户ID
     * @returns {Promise<Array>} memberList 获取成功返回成员列表
     */
    AliRTCElectronInterrativeEngine.instance.getMemberList().then((memberList)=>{
        // 获取成员列表成功
    }).catch(()=> {
        // 获取成员列表失败
    })

    返回的信息如下所示:

    参数名 类型 描述
    userid String 用户ID。
    isSelf Boolean 是否是自己。
    isTeacher Boolean 是否是老师。
    displayName String 用户displayName。
  • exitRoom:退出房间。
    /**
     * 退出房间 (老师会解散IM群组并退出RTC房间,学生会离开IM群组并退出RTC房间)
     * @returns {Promise<void>}
     */
    AliRTCElectronInterrativeEngine.instance.exitRoom().then(()=>{
        // 退出成功
    }).catch(()=> {
        // 退出失败
    })
  • sendTextMessage:发送普通文本消息。
    /**
     * 发送普通文本消息
     * @param {String} message 文本信息
     */
    AliRTCElectronInterrativeEngine.instance.sendTextMessage(message)
  • muteStudentMic:关闭或打开学生麦克风(老师调用)。
    /**
     * 关闭/打开学生麦克风
     * @param {String} userid 被控制学生的ID
     * @param {Boolean} muteMic 是否关闭麦克风
     */
    AliRTCElectronInterrativeEngine.instance.muteStudentMic(userid, muteMic)
    说明
  • muteStudentCamera:关闭或打开学生摄像头(老师调用)。
    /**
     * 关闭/打开学生摄像头
     * @param {String} userid 被控制学生的ID
     * @param {Boolean} muteCamera 是否关闭摄像头
     */
    AliRTCElectronInterrativeEngine.instance.muteStudentCamera(userid, muteCamera)
    说明
  • muteAllStudentMic:关闭或打开所有学生麦克风(老师调用)。
    /**
     * 关闭/开启所有学生麦克风
     * @param {Boolean} muteAllMic 是否关闭所有麦克风
     */
    AliRTCElectronInterrativeEngine.instance.muteAllStudentMic(muteAllMic)
  • handUp:申请连麦(学生调用)。
    /**
     * 举手申请上麦
     * @param {Boolean} handUp 是否举手,当前没有取消举手功能
     */
    AliRTCElectronInterrativeEngine.instance.handUp(handUp)
  • backHandUp:是否允许学生上麦(老师调用)。
    /**
     * 反馈是否允许学生上麦
     * @param {String} userid 用户ID
     * @param {Boolean} backHandUp 是否同意上麦
     */
    AliRTCElectronInterrativeEngine.instance.backHandUp(userid, backHandUp)
  • on:监听事件。
    /**
     * 订阅事件
     * @param {string} name 事件名字
     * @param {string} handler 处理事件的方法
     */
    AliRTCElectronInterrativeEngine.instance.on(name, handler)
  • off:取消监听事件。
    /**
     * 取消订阅事件
     * @param {string} name 事件名字
     * @param {string} handler 处理事件的方法
     */
    AliRTCElectronInterrativeEngine.instance.off(name, handler)
  • destroy:销毁实例。
    /**
     * 销毁实例(静态方法)
     */
    AliRTCElectronInterrativeEngine.destroy()

回调说明

目录

回调 描述
LOGIN_IM_SUCCESS 登录IM成功。
JOIN_RESULT 加入房间回调。
LEAVE_RESULT 离开房间回调。
TEACHER_ENTER 老师加入房间(学生订阅)。
TEACHER_LEAVER 老师离开房间(学生订阅)。
STUDENT_ENTER 远端学生上麦成功回调。
STUDENT_LEAVE 远端学生下麦成功回调。
TO_INTERACTIVE 本地上麦成功回调(学生订阅)。
TO_LIVE 本地下麦成功回调(学生订阅)。
SUBSCRIBED_AUDIO 订阅音频成功回调。
UNSUBSCRIBED_AUDIO 取消订阅音频成功回调。
SUBSCRIBED_VIDEO 订阅视频成功回调。
UNSUBSCRIBED_VIDEO 取消订阅视频成功回调。
SUBSCRIBED_SCREEN 订阅共享成功回调(学生订阅)。
UNSUBSCRIBED_SCREEN 取消订阅共享流成功回调(学生订阅)。
PUBLISHED_SCREEN 推送共享流流回调(老师订阅)。
UNPUBLISHED_SCREEN 取消推送共享流回调(老师订阅)。
USER_AUDIO_MUTE 远端用户开启或关闭麦克风回调。
USER_VIDEO_MUTE 远端用户开启或关闭摄像头回调。
ERROR 错误回调。
BYE 被服务器踢出或频道关闭时回调。
MEMBER_LIST_UPDATE 成员列表更新回调。
TEXT_MESSAGE_ADD 收到普通文本信息回调。
TEACHER_CONTROL_MIC 老师控制本地麦克风回调。
TEACHER_CONTROL_CAMERA 老师控制本地摄像头回调。
STUDENT_HAND_UP 学生举手回调。
HAND_UP_RESULT 老师返回是否允许上麦回调。

详情

  • LOGIN_IM_SUCCESS:登录IM成功。
    AliRTCElectronInterrativeEngine.instance.on(EventType.LOGIN_IM_SUCCESS, ()=>{
        // 登录IM成功
    })
  • JOIN_RESULT:加入房间回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.JOIN_RESULT, (result)=>{
        // result: 加入频道结果,成功返回0,失败返回错误码
    })
  • LEAVE_RESULT:离开房间回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.LEAVE_RESULT, (result)=>{
        // result: 离开频道结果 成功返回0,失败返回错误码信息。
    })
  • TEACHER_ENTER:老师加入房间(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TEACHER_ENTER, (userid)=>{
        // userid: 老师的ID
    })
  • TEACHER_LEAVER:老师离开房间(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TEACHER_LEAVE, (userid)=>{
        // userid: 老师的ID
    })
  • STUDENT_ENTER:远端学生上麦成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.STUDENT_ENTER, (userid)=>{
        // userid: 学生的ID
    })
  • STUDENT_LEAVE:远端学生下麦成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.STUDENT_LEAVE, (userid)=>{
        // userid: 学生的ID
    })
  • TO_INTERACTIVE:本地上麦成功回调(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TO_INTERACTIVE, ()=>{
      // 上麦成功,自动推音视频流
    })
  • TO_LIVE:本地下麦成功回调(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TO_LIVE, (userid)=>{
        // 下麦成功,自动停推音视频流
    })
  • SUBSCRIBED_AUDIO:订阅音频成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.SUBSCRIBED_AUDIO, (userid)=>{
        // userid: 被订阅音频用户的ID
    })
  • UNSUBSCRIBED_AUDIO:取消订阅音频成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.UNSUBSCRIBED_AUDIO, (userid)=>{
        // userid: 被取消订阅音频用户的ID
    })
  • SUBSCRIBED_VIDEO:订阅视频成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.SUBSCRIBED_VIDEO, (userid)=>{
        // userid: 被订阅视频用户的ID
    })
  • UNSUBSCRIBED_VIDEO:取消订阅视频成功回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.UNSUBSCRIBED_VIDEO, (userid)=>{
        // userid: 被取消订阅视频用户的ID
    })
  • SUBSCRIBED_SCREEN:订阅共享成功回调(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.SUBSCRIBED_SCREEN, (userid)=>{
        // userid: 被订阅共享用户的ID
    })
  • UNSUBSCRIBED_SCREEN:取消订阅共享流成功回调(学生订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.UNSUBSCRIBED_SCREEN, (userid)=>{
        // userid: 被取消订阅共享用户的ID
    })
  • PUBLISHED_SCREEN:推送共享流流回调(老师订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.PUBLISHED_SCREEN, ()=>{
        // 成功开始推送共享流
    })
  • UNPUBLISHED_SCREEN:取消推送共享流回调(老师订阅)。
    AliRTCElectronInterrativeEngine.instance.on(EventType.UNPUBLISHED_SCREEN, ()=>{
        // 成功停止推送共享流
    })
  • USER_AUDIO_MUTE:远端用户开启或关闭麦克风回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.USER_AUDIO_MUTE, (userid, isMuted)=>{
        // userid: 对端ID
      // isMuted: 是否静音了麦克风
    })
  • USER_VIDEO_MUTE:远端用户开启或关闭摄像头回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.USER_VIDEO_MUTE, (userid, isMuted)=>{
        // userid: 对端ID
      // isMuted: 是否关闭了摄像头
    })
  • ERROR:错误回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.ERROR, (code)=>{
        // code: 错误码
    })
  • BYE:被服务器踢出或频道关闭时回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.BYE, (code)=>{
        // code: 0: 被踢出  1:频道关闭  2:账号在另一地点登录
    })
  • MEMBER_LIST_UPDATE:成员列表更新回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.MEMBER_LIST_UPDATE, ()=>{
        // 使用getMemberList接口获取最新成员列表
      // 该成员列表指IM群组成员列表
    })
  • TEXT_MESSAGE_ADD:收到普通文本信息回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TEXT_MESSAGE_ADD, (data)=>{
        // data.userid: 用户ID
      // data.isSelf: 是否是自己发送的消息
      // data.isTeacher: 是否是老师发送的消息
      // data.displayName: 用户displayName
      // data.message: 信息内容
    })
  • TEACHER_CONTROL_MIC:老师控制本地麦克风回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TEACHER_CONTROL_MIC, (muteMic)=>{
        // muteMic: 是否关闭麦克风
    })
  • TEACHER_CONTROL_CAMERA:老师控制本地摄像头回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.TEACHER_CONTROL_CAMERA, (muteCamera)=>{
        // muteCamera: 是否关闭摄像头
    })
  • STUDENT_HAND_UP:学生举手回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.STUDENT_HAND_UP, (data)=>{
        // data.userid: 举手学生的ID
      // data.displayName: 举手学生的displayName
      // data.handUp: 是否举手
    })
  • HAND_UP_RESULT:老师返回是否允许上麦回调。
    AliRTCElectronInterrativeEngine.instance.on(EventType.HAND_UP_RESULT, (backHandUp)=>{
        // backHandUp: 是否同意上麦
    })