本文介绍Web连麦互动SDK相关接口说明。
基础类
| 类名 | 描述 | ||||||
| AlivcLivePusher | 推流功能类。 说明  通过window.AlivcLivePush.AlivcLivePusher进行访问 | ||||||
| AlivcLivePlayer | 拉流抽象接口。 说明  通过window.AlivcLivePush.AlivcLivePlayer进行访问 | ||||||
推流基础接口
AlivcLivePusher
目录
| API | 描述 | ||||||
| 静态方法,获取摄像头列表。 | |||||||
| 静态方法,获取麦克风列表。 | |||||||
| 静态方法,获取播放设备列表。 | |||||||
| 静态方法,检测webrtc各项功能的支持情况。 | |||||||
| 静态方法,检测是否支持屏幕分享。 | |||||||
| 初始化推流参数。 | |||||||
| 释放推流。 | |||||||
| 开始预览。 | |||||||
| 结束预览。 | |||||||
| 开始推流。 | |||||||
| 重新开始推流。 | |||||||
| 重新连接进行推流。 | |||||||
| 结束推流。 | |||||||
| 打开或切换麦克风。 | |||||||
| 停止麦克风。 | |||||||
| 获取当前麦克风设备ID。 | |||||||
| 打开或切换摄像头。 | |||||||
| 停止摄像头。 | |||||||
| 获取当前摄像头设备ID。 | |||||||
| 开始屏幕共享。 | |||||||
| 停止屏幕共享。 | |||||||
| 开启自定义辅流。 | |||||||
| 停止自定义辅流。 | |||||||
| 静音/解除静音(不停止推流,只是停止播放)。 | |||||||
| 关闭/打开画面(不停止推流,只是停止显示)。 | |||||||
| 获取上一次上报的推流统计信息 | |||||||
| 获取当前推流Url。 | |||||||
| 获取当前频道ID。 | |||||||
| 获取当前用户ID。 | |||||||
| 更新旁路转推混流布局。 | |||||||
| 获得当前分辨率。 | |||||||
| 更新分辨率。 | |||||||
| 获取当前帧率。 | |||||||
| 更新帧率。 | |||||||
| 获取当前推流的 MediaStream。 | |||||||
| 获取直播trace ID。 | |||||||
| 设置屏幕流宽/高/码率/帧率。 | |||||||
详情
- 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; 默认摄像头设备 ID * 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();
- updateScreenVideoProfile:设置屏幕流宽/高/码率/帧率 - /** * 设置屏幕流宽/高/码率/帧率(受浏览器限制,宽高实际不生效) * @param width 宽度 * @param height 高度 * @param rate 码率 * @param fps 帧率 * @return {Promise} */ await pusher.updateScreenVideoProfile(width,height,rate,fps);
AlivcLiveTranscodingConfig
属性列表
| 属性 | 描述 | ||||||
| width | 数值,旁路显示宽度 | ||||||
| height | 数值,旁路显示高度 | ||||||
| backgroundColor | 数值,例如以 16 进值 0x000000 | ||||||
| cropMode | AlivcLiveTranscodingCropModeEnum 
 | ||||||
| mixStreams | AlivcLiveMixStream[],混流详细布局列表 | ||||||
AlivcLiveMixStream
属性列表
| 属性 | 描述 | ||||||
| userId | 字符串,混流用户ID | ||||||
| x | 数值,混流开始x方向像素值 | ||||||
| y | 数值,混流开始y方向像素值 | ||||||
| width | 数值,混流开始宽度像素值 | ||||||
| height | 数值,混流开始高度像素值 | ||||||
| zOrder | 数值,数字越大层级越靠上 | ||||||
| sourceType | 数值,视频流类型 
 | ||||||
AlivcLivePusher.info
| 事件 | 描述 | ||||||
| bye | 离会通知,可能被挤占,也可能被踢出等。 | ||||||
| pushstatistics | 直播推流统计数据回调,每2秒回调一次。 | ||||||
使用示例:
pusher.info.on('bye', (_code, reason) => {
  // console.log(`您已离会,原因: ${reason}`);
});
pusher.info.on('pushstatistics', _stat => {
  // console.log(_stat);
});AlivcLivePusher.error
| 事件 | 描述 | ||||||
| system | 系统错误。 | ||||||
| sdk | sdk内部错误。 | ||||||
使用示例:
pusher.error.on('system', error => {
  // console.log(error);
});
pusher.error.on('sdk', error => {
  // console.log(error);
});AlivcLivePusher.network
| 事件 | 描述 | ||||||
| connectionlost | 连接断开。 | ||||||
| networkrecovery | 网络恢复。 | ||||||
| reconnectstart | 重连开始。 | ||||||
| reconnectfail | 重连失败。 | ||||||
| reconnectsucceed | 重连成功。 | ||||||
使用示例:
pusher.network.on('connectionlost', () => {
  // console.log('网络异常,连接已断开');
});拉流相关接口
AlivcLivePlayer
接口列表
| API | 描述 | ||||||
| 开始播放音视频流。 | |||||||
| 在另一个video节点播放音视频流。 | |||||||
| 停止播放视频流。 | |||||||
| 暂停播放音频流。 | |||||||
| 暂停播放视频流。 | |||||||
| 恢复播放音频流。 | |||||||
| 恢复播放视频流。 | |||||||
| 释放拉流。 | |||||||
详情
- 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
| 事件 | 描述 | ||||||
| canplay | canplay事件。 | ||||||
| userleft | 远端用户离会。 | ||||||
| statistics | 播放统计信息。 | ||||||
| update | 远端流更新 | ||||||
使用示例:
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);
});