Web端集成

引入SDK

工程接入

API的使用

// 进入房间
await roomChannel.enterRoom(nick);

// 异步获取房间信息
await roomChannel.getRoomDetailAsync();

// 分页获取房间用户在线列表
// pageIndex从1开始
await roomChannel.listUser(pageIndex, pageSize);

// 下面的方法需要房间所有者才可以调用

// 更新房间公告
await roomChannel.updateNotice(notice);

// 更新房间标题
await roomChannel.updateTitle(notice);

• 播放器的使用：

  setPlayerConfig中传入的参数列表是AliPlayer的参数和本SDK所需参数的并集，SDK所需参数如下：

  interface PlayerParams {
    protocal?: 'http' | 'https'; // 强制使用http或https协议的播放地址
    useArtc?: boolean; // 是否使用连麦
    // AliPlayer的参数可以任意添加到这里
  }

  重要

  • 如果需要开启连麦，应在控制台中为您的播流域名配置好HTTPS证书，之后在setPlayerConfig中增加useArtc: true即可。

  • 如果连麦出现播放失败，会自动降级到普通直播。

  如果封装的播放器功能不足以支撑业务逻辑，可以直接获取到AliPlayer的实例：

  // 在开始播放之后（创建播放器后）才能获取到
  const playerInstance = liveService.playerInstance;
  // 直接调用AliPlayer的方法
  playerInstance.play();

  AliPlayer的属性和接口说明参阅属性和接口说明。

• 播放器事件：

  播放器自身也会透出事件，这些事件被直播实例所捕获，可以按照下面的方法监听：

  // 绑定播放器事件
  liveService.on(EventNameEnum.PaaSPlayerEvent, (data) => {
    console.log(data.eventName); // 播放器事件名称
    console.log(data.eventData); // 播放器事件返回数据
  });

  有关播放器事件列表，请参阅播放器事件。

• 音视频通信Rtc：

  负责Rtc通信的入会、订阅、媒体操作（静音、屏幕分享等）、旁路推直播流等功能，封装了AliRtc。

  // 获取设备信息
  rtcService.getDeviceInfo();
  
  // 开始摄像头预览
  rtcService.startRtcPreview(videoDom);
  
  // 进入频道
  await rtcService.joinChannel();
  
  // 开始推流
  await rtcService.startPublish();
  
  // 开始旁路推流（开始直播）
  await rtcService.startRoadPublish();
  
  // 发布屏幕流（必须在推流状态下设置）
  await rtcService.startPublishScreen();
  
  // 获取会议成员列表
  await rtcService.listConfUser(pageIndex, pageSize);

• AliRtc实例：

  如果封装的Rtc能力不足以支撑业务，可以通过以下方法获取AliRtc实例：

  // 获取AliRtc的实例
  const aliRtcInstance = rtcService.aliRtcInstance;

  有关AliRtc的接口参阅AliRtcEngine接口。

• AliRtc事件：

  除了SDK事件以外，rtcService也透出了AliRtc自身的事件，事件名也直接并集成EventNameEnum，可以直接在实例上监听：

  // 绑定onMedia事件
  rtcService.on(EventNameEnum.onMedia, (data) => {
    console.log(data);
  });

  AliRtc事件列表如下：

  enum AliRTCSdkEventNames {
    onPublisher = 'onPublisher',
    onUnPublisher = 'onUnPublisher',
    onMediaStream = 'onMediaStream',
    onJoin = 'onJoin',
    onLeave = 'onLeave',
    onError = 'onError',
    onBye = 'onBye',
    onUpdateRole = 'onUpdateRole',
    onNotify = 'onNotify',
    onAudioLevel = 'onAudioLevel',
    onMedia = 'onMedia',
    onSubscribeResult = 'onSubscribeResult'
  }

  说明

  可以发现RtcService和AliRtc的关系类似LiveService和AliPlayer的关系，但绑定事件方式不同，是因为SDK内部对AliRtc的事件需要做特殊处理和封装，之后可能会根据需要作出改动。

• 文档Doc

  负责ppt/pdf/jpg/png等文档的操作，包括上传、下载、转码、查看等操作。

  // 上传文档，返回值为文档Id
  const docId = await docService.upload(file);
  
  // 下载文档，返回值为文档下载地址，有效期30分钟
  docService.download(docId);
  
  // 文档转码，targetType支持'jpg'
  await docService.convert(sourceDocId, targetType, targetName);
  
  // 获取文档链接
  const data = await docService.getUrlList(docId);

• 白板Wb

  负责白板服务与RoomChannel的关联，包括获取白板的dockey、白板的录制相关接口。

  说明

  由于白板是一个较为完备的SDK，接入方式也有多种，所以本SDK只封装了白板与房间交互的部分，即获取白板的dockey、白板的录制，没有封装白板本身提供的方法。

  // 获取白板id，如果存在则返回，不存在则创建一个
  // 返回一个Promise，需要用await获取值或者在then里取值
  const dockey = await wbService.getWhiteboardId();
  
  // 开始白板录制，返回录制的recordId等信息
  await wbService.startWhiteboardRecording();
  
  // 根据recordId结束白板录制
  await wbService.stopWhiteboardRecording(recordId);
  
  // 暂停白板录制
  await wbService.pauseWhiteboardRecording(recordId);
  
  // 继续白板录制
  await wbService.resumeWhiteboardRecording(recordId);