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的appName、appKey和baseServer的值。
   1. 创建IM应用，具体操作，请参见应用管理。
   2. 获取AppID和AppKey，更多信息，请参见功能配置。
   3. 根据获取到的AppID、AppKey以及步骤2中的baseUrl分别配置IM的appName、appKey和baseServer。
4. 修改package.json文件，根据Electron SDK实际版本配置postinstall的值。
   

   说明

   • 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目录结构说明

项目结构如下所示：

API说明

目录

详情

• 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_INTERACTIVE或TO_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)

  说明

  • 被打开或关闭麦克风的学生会收到TEACHER_CONTROL_MIC回调。
  • 收到该回调后需要调用muteLocalMic接口。
• muteStudentCamera：关闭或打开学生摄像头（老师调用）。

  /**
   * 关闭/打开学生摄像头
   * @param {String} userid 被控制学生的ID
   * @param {Boolean} muteCamera 是否关闭摄像头
   */
  AliRTCElectronInterrativeEngine.instance.muteStudentCamera(userid, muteCamera)

  说明

  • 被打开或关闭麦克风的学生会收到TEACHER_CONTROL_CAMERA回调。
  • 收到该回调后需要调用muteLocalCamera接口。
• 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成功。

  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: 是否同意上麦
  })