ApsaraVideo Live：Web連麥互動SDK介面說明

基礎類

推流基礎介面

AlivcLivePusher

目錄

詳情

• getCameras：靜態方法，擷取網路攝影機列表

  /**
   * 靜態方法，擷取網路攝影機列表
   * @return {Promise<MediaDeviceInfo[]>}
   */
  const cameras = await AlivcLivePusher.getCameras();

• getMicrophones：靜態方法，擷取麥克風列表

  /**
   * 靜態方法，擷取麥克風列表
   * @return {Promise<MediaDeviceInfo[]>}
   */
  const microphones = await AlivcLivePusher.getMicrophones();

• getPlayoutDevices：靜態方法，擷取播放裝置列表

  /**
   * 靜態方法，擷取播放裝置列表
   * @return {Promise<MediaDeviceInfo[]>}
   */
  const playoutDevices = await AlivcLivePusher.getPlayoutDevices();

• checkSystemRequirements：靜態方法，檢測webrtc各項功能的支援情況

  /**
   * 靜態方法，檢測webrtc各項功能的支援情況
   * @param {('sendonly' | 'recvonly' | 'sendrecv')} [direction]
   * @return {Promise<CheckResult>}
   */
  const checkResult = await AlivcLivePusher.checkSystemRequirements();
  // checkResult.support: boolean; 是否支援
  // checkResult.detail.isBrowserSupported: boolean; 瀏覽器是否支援
  // checkResult.detail.isH264DecodeSupported: boolean; H264 解碼是否支援
  // checkResult.detail.isH264EncodeSupported: boolean; H264 編碼是否支援
  // checkResult.detail.isWebRTCSupported: boolean; WebRTC 是否支援

• checkScreenShareSupported：靜態方法，檢測是否支援螢幕分享。

  /**
   * 檢查當前環境是否支援螢幕畫面分享
   * @returns {boolean}
   */
  const isScreenShareSupported = AlivcLivePusher.checkScreenShareSupported();

• init：初始化推流參數。

  /**
   * 初始化 RTC Engine
   * @param config 配置，各個參數均可選傳入
   * config.resolution: AlivcResolutionEnum; 解析度
   * config.fps: AlivcFpsEnum; FPS
   * config.logLevel: LogLevel; 日誌輸出層級，預設 ERROR
   * config.connectRetryCount: number; 房間重連次數
   * config.audio: boolean; 是否開啟音頻
   * config.audioId: string; 預設音訊裝置 ID
   * config.video: boolean; 是否開啟網路攝影機
   * config.cameraId: string; 預設網路攝影機裝置識別碼
   * config.screen: boolean; 是否開啟螢幕畫面分享
   */
  const pusher = new AlivcLivePush.AlivcLivePusher();
  pusher.init({
    resolution: AlivcLivePush.AlivcResolutionEnum.RESOLUTION_720P
  });

• destroy：釋放推流。

  // 釋放推流執行個體，釋放後，pusher 執行個體將不可用
  pusher.destroy()

• startPreview：開始預覽。

  /**
   * 開始預覽畫面
   * @param {string ｜ HTMLVideoElement} elementOrId 預覽的 Video 節點或 Id
   * @param {boolean} secondary 選擇性參數，預設預覽主流，是否為預覽輔流
   * @return {Promise<MediaStream>}
   */
  const stream = pusher.startPreview(elementOrId);

• stopPreview：結束預覽。

  /**
   * 停止預覽畫面
   * @param {string ｜ HTMLVideoElement} 可選 elementOrId 停止預覽的 Video 節點或 Id，不傳則停止所有預覽
   */
  pusher.stopPreview(elementOrId);

• startPush：開始推流

  /**
   * 開始推流
   * @param {string} url 推流 Url 格式樣本：artc://live.aliyun.com/push/....
   * @return {Promise}
   */
  await pusher.startPush(url);

  重要

  此處推流地址需要使用連麥地址，詳見連麥地址產生器。

• restartPush：重新推當前 Url

  /**
   * 重新推當前 Url
   * @return {Promise}
   */
  await pusher.restartPush();

• reconnectPush：重新串連進行推流

  /**
   * 重新串連進行推流。
   * @param {string} url 新的推流 Url 格式樣本：artc://live.aliyun.com/push/....
   * @return {Promise}
   */
  await pusher.reconnectPush(url);

• stopPush：停止推流

  /**
   * 停止推流
   * @return {Promise}
   */
  await pusher.stopPush(url);

• startMicrophone：開啟或切換麥克風

  /**
   * 開啟或切換麥克風
   * @param {string} deviceId 可選，麥克風裝置 Id
   * @return {Promise}
   */
  await pusher.startMicrophone(deviceId);

• stopMicrophone：停止推流

  /**
   * 停止麥克風
   * @return {Promise}
   */
  await pusher.stopMicrophone();

• getCurrentMicDeviceId：擷取當前麥克風裝置ID

  /**
   * 擷取當前麥克風裝置ID
   * @return {string | undefined} 麥克風裝置ID
   */
  const micId = pusher.getCurrentMicDeviceId();

• startCamera：開啟或切換網路攝影機

  /**
   * 開啟或切換網路攝影機
   * @param {string} deviceId 可選，網路攝影機裝置 Id
   * @return {Promise}
   */
  await pusher.startCamera(deviceId);

• stopCamera：停止網路攝影機

  /**
   * 停止網路攝影機
   * @return {Promise}
   */
  await pusher.stopCamera();

• getCurrentCameraDeviceId：擷取當前網路攝影機裝置ID

  /**
   * 擷取當前網路攝影機裝置ID
   * @return {string | undefined} 網路攝影機裝置ID
   */
  const cameraId = pusher.getCurrentCameraDeviceId();

• startScreenShare：開始畫面共用

  /**
   * 開始畫面共用
   * @return {Promise}
   */
  await pusher.startScreenShare();

• stopScreenShare：停止螢幕畫面分享

  /**
   * 停止螢幕畫面分享
   * @return {Promise}
   */
  await pusher.stopScreenShare();

• startCustomStream：開啟自訂輔流

  /**
   * 開始自訂輔流
   * @param mediaStream 自訂媒體流
   * @return {Promise<MediaStream>}
   */
  await pusher.startCustomStream(mediaStream);

• stopCustomStream：停止自訂輔流

  /**
   * 停止自訂輔流
   * @return {Promise<void>}
   */
  await pusher.stopCustomStream();

• mute：靜音/解除靜音（不停止推流，只是停止播放）

  /**
   * 靜音/解除靜音（不停止推流，只是停止播放）
   * @param {boolean} 是否靜音
   * @returns {boolean} 靜音/取消靜音執行結果
   */
  pusher.mute(true);

• muteVideo：關閉/開啟畫面（不停止推流，只是停止顯示）

  /**
   * 關閉/開啟畫面（不停止推流，只是停止顯示）
   * @param mute true表示不發送視頻資料，false表示恢複正常
   * @returns 修改是否成功
   */
  pusher.muteVideo(true);

• getLivePushStatsInfo：擷取上一次上報的推流統計資訊

  /**
   * 擷取上一次上報的推流統計資訊
   * @return {StatsInfo} 推流統計資訊
   */
  const statsInfo = pusher.getLivePushStatsInfo();

• getPushUrl：擷取當前推流Url

  /**
   * 擷取當前推流Url
   * @return {string | undefined} 當前推流Url
   */
  const url = pusher.getPushUrl();

• getChannelId：擷取目前通道ID

  /**
   * 擷取目前通道ID
   * @return {string | undefined} 目前通道ID
   */
  const channelId = pusher.getChannelId();

• getUserId：擷取目前使用者ID

  /**
   * 擷取目前使用者ID
   * @return {string | undefined} 目前使用者ID
   */
  const userId = pusher.getUserId();

• setLiveMixTranscodingConfig：更新旁路轉推混流布局

  /**
   * 更新旁路轉推混流布局
   * @param {AlivcLiveTranscodingConfig} config 可選，不傳則停止旁路混流；詳細參數見 AlivcLiveTranscodingConfig 類
   * @return {Promise} 更新要求傳回值
   */
  const response = await pusher.setLiveMixTranscodingConfig(config);

• getResolution：獲得當前解析度

  /**
   * 獲得當前解析度
   * @return {AlivcResolutionEnum | undefined} 當前解析度
   */
  const resolution = pusher.getResolution();

• changeResolution：更新解析度

  /**
   * 更新解析度
   * @param resolutionEnum 解析度，傳入 Custom 時為自訂
   * @param width 寬度，自訂解析度時必選
   * @param height 高度，自訂解析度時必選
   * @param bitrate 最大碼率
   * @return {Promise}
   */
  await pusher.changeResolution(AlivcResolutionEnum.RESOLUTION_720P);

• getFps：擷取當前幀率

  /**
   * 擷取當前幀率
   * @return {AlivcFpsEnum | undefined} 當前幀率
   */
  const fps = pusher.getFps();

• changeFps：更新幀率

  /**
   * 更新幀率
   * @param {AlivcFpsEnum} fps 目標幀率
   * @return {Promise}
   */
  await pusher.changeFps(AlivcFpsEnum.FPS_30);

• getPublishMediaStream：擷取當前推流的 MediaStream

  /**
   * 擷取當前推流的 MediaStream
   * @return {MediaStream | undefined} 當前推流的 MediaStream
   */
  const mediaStream = pusher.getPublishMediaStream();

• getLiveTraceId：擷取直播trace ID

  /**
   * 擷取直播trace ID
   * @return {string} TraceId
   */
   pusher.getLiveTraceId();

AlivcLiveTranscodingConfig

屬性列表

AlivcLiveMixStream

屬性列表

AlivcLivePusher.info

使用樣本：

pusher.info.on('bye', (_code, reason) => {
  // console.log(`您已離會，原因: ${reason}`);
});
pusher.info.on('pushstatistics', _stat => {
  // console.log(_stat);
});

AlivcLivePusher.error

使用樣本：

pusher.error.on('system', error => {
  // console.log(error);
});
pusher.error.on('sdk', error => {
  // console.log(error);
});

AlivcLivePusher.network

使用樣本：

pusher.network.on('connectionlost', () => {
  // console.log('網路異常，串連已斷開');
});

拉流相關介面

AlivcLivePlayer

介面列表

詳情

• startPlay：開始播放音視頻流

  /**
   * 開始播放音視頻流
   * @param url 播放 url 格式參考：artc://live.aliyun.com/play/...
   * @param elementOrId 播放的媒體(Video/Audio)標籤或Id
   * @param secondaryElementOrId （可選）輔流播放 媒體(Video/Audio)標籤或Id
   * @return {Promise<AlivcLivePlayInfo>} 可以通過 AlivcLivePlayInfo 監聽相關事件
   */
  const playInfo = await player.startPlay(url, elementOrId, secondaryElementOrId);

  重要

  • 此處播流地址需要使用連麥地址，詳見連麥地址產生器。

  • 非連麥觀眾可使用Web播放器進行播流，詳見Web播放器快速接入。

• playAnotherElement：在另一個video節點播放音視頻流

  /**
   * 在另一個video節點播放音視頻流
   * @param elementOrId 播放的媒體(Video/Audio)標籤或Id
   * @param secondary （可選）是否播放輔流，預設播放主流
   */
  player.playAnotherElement(elementOrId);

• stopPlay：停止播放視頻流

  /**
   * 停止播放視頻流
   * @param elementOrId 播放的媒體(Video/Audio)標籤或Id，可選，不傳則停止所有播放
   * @return {Promise} 
   */
  await player.stopPlay(elementOrId);

• pauseAudioPlaying：暫停播放音頻流

  /**
   * 暫停播放音頻流
   */
  player.pauseAudioPlaying();

• pauseVideoPlaying：暫停播放視頻流

  /**
   * 暫停播放視頻流
   */
  player.pauseVideoPlaying();

• resumeAudioPlaying：恢複播放音頻流

  /**
   * 恢複播放音頻流
   */
  player.resumeAudioPlaying();

• resumeVideoPlaying：恢複播放視頻流

  /**
   * 恢複播放視頻流
   */
  player.resumeVideoPlaying();

• destroy：釋放拉流

  /**
   * 釋放拉流，釋放後 player 將不可用
   */
  player.destroy();

AlivcLivePlayInfo

使用樣本：

playInfo.on('statistics', _stat => {
  // console.log(_stat);
});
playInfo.on('userleft', () => {
  // console.log('遠端使用者離會');
});
playInfo.on('canplay', function () {
  // console.log('遠端可播放');
});
playInfo.on('update', function (previousStatus) {
  // console.log(previousStatus.mediaStream);
  // console.log(previousStatus.secondaryMediaStream);
});