Web SDK 概要介绍

主要方法

API	描述
init	初始化SDK，配置serviceID、serviceKey，提供后续的进房能力
join	进入一个音视频通话房间
leave	退出当前音视频通话房间
preview	预览本端音视频，完成音视频的采集功能，生成音视频流
publish	发布本端音视频，把本端音视频流推送到远端服务器
unpublish	发布本端音视频，停止本端音视频推流
subscribe	订阅远端音视频流，拉去远端音视频流，并进行本地播放
unsubscribe	取消订阅远端音视频流，停止拉流，停止播放
muteLocal	调整本端音视频状态，取消/恢复 音视频推流
muteRemote	调整订阅远端音视频状态，取消/恢复 音视频拉流
selectLayer	动态切换订阅的层级，满足不同分辨率、码率的需求
setDevice	动态切换采集的设备
audioReport	启动音频数据监控，通过audioReport事件，定期返回所有流的音频数据
videoReport	启动视频数据监控，通过videoReport事件，定期返回所有流的视频数据
setRole	动态切换本端角色，不同角色，在房间里拥有的能力不同
recordLocal	本地录制，录制本端流，生成webm格式视频文件
recordRemote	本地录制，录制远端流，生成webm格式视频文件
printLocal	截屏本地流画面，返回base64格式的图片url
printRemote	截屏远端流画面，返回base64格式的图片url

主要回调

Event	描述
joined	进房成功
camera	媒体设备预览成功
sreen	屏幕共享预览成功
published	发布成功事件，调用 publish 后，触发此事件
subscribed	订阅成功事件，调用 subscribe 后，触发此事件
permission	权限申请事件，调用 askForPermission 后，触发此事件

接入流程

以下为简单接入流程，详细接入可参考 Demo

1. 静态引入依赖

<script type="text/javascript" src="./static/crypto-js.js"></script> // 第三库，必须
<script type="text/javascript" src="./static/base64.js"></script> // 第三库，必须
<script type="text/javascript" src="./static/adapter.js"></script> // 第三库，必须
<script type="text/javascript" src="./static/sign.js"></script> // 第三库，必须
<script type="text/javascript" src="./static/sdk.js"></script> // sdk文件，必须， 在widnow上暴露hirtcwebsdk对象
<script type="text/javascript" src="./static/saver.js"></script> // 第三库，非必须。使用本地录制功能需要

2. 初始化SDK、加入房间

• 调用 init，初始化SDK，传入必要参数，如serviceID，serviceKey。
• 调用 join，进入房间，并处理进房成功事件（ joined ）：返回房间用户、远端发布的音视频流

hirtcwebsdk.init({
  serviceID,
  serviceKey,
});
hirtcwebsdk.adddListener('joined', userList => {
  userList.forEach(user = > {
    const { userID, streams } = user;
    console.log(userID, streams);
  });
});
hirtcwebsdk.join(roomId, userId, name);

3. 订阅远端音视频流

• 根据 joined 事件、streamAdded 事件返回的音视频流，调用 subscribe 接口
• 监听 subscribed 事件，表示订阅成功，开始播放音频、视频

hirtcwebsdk.adddListener('subscribed', (subscribeID, publishID) => {
  console.log(`订阅成功：${subscribeID}, ${publishID}`);
});
hirtcwebsdk.subscribe(videoElement, pubUserID, publishID);

4. 发布本端音视频流

• 申请设备权限，获取设备列表
• 预览设备，完成采集，生成音视频流
• 发布音视频流
• 监听回调，标识发布成功

hirtcwebsdk.adddListener('permission', (audio, video, found, agree) => {
  if (agree) {
    hirtcwebsdk.getDevices();
  }
});
hirtcwebsdk.adddListener('deviceList', (info) => {
  console.log(`设备信息: ${info}`);
  hirtcwebsdk.preview(hirtcwebsdk.StreamType.Camera);
});
hirtcwebsdk.addListener('camera', function (open, openAudio, openVideo) {
  if (open) {
    console.log('预览成功');
    hirtcwebsdk.publish(hirtcwebsdk.StreamType.Camera);
  }
});
hirtcwebsdk.adddListener('published', (publishID, streamType) => {
  console.log(`发布成功：${publishID}, ${streamType}`);
});

hirtcwebsdk.askForPermission(true, true);

动态分辨率

SDK通过分层发布，按需订阅的方式，实现动态分辨率的效果

1. 发布端

• SDK默认配置三层视频流按需发布，对应： 流畅（180p）, 标清（360p）, 高清（720p），
• 可通过 init 接口传入cameraLayers配置项，覆盖默认层级
• 调用 publish 时，会使用cameraLayers进行发布

hirtcwebsdk.init({
  // 以下是默认的三层流参数
  cameraLayers: [ 
    { width: 320, height: 180, frameRate: 20, targetBw: 160000, layerIndex: 0 },
    { width: 640, height: 360, frameRate: 20, targetBw: 500000, layerIndex: 1 },
    { width: 1280, height: 720, frameRate: 20, targetBw: 1100000, layerIndex: 2 },
  ],
});

hirtcwebsdk.publish(hirtcwebsdk.StreamType.Camera);

2. 订阅端

• 视频流信息携带层级数据，订阅端可按需订阅对应层级，subscribe 可传入layerIndex信息
• 订阅成功后，可通过 selectLayer 动态切换订阅层级

hirtcwebsdk.subscribe(videoElement, pubUserID, publishID, layerIndex);
// ...
// ......
// subscribed事件后
hirtcwebsdk.selectLayer(subscribeID, layerIndex); // 动态切换订阅层级

支持的平台

操作系统	浏览器类型	浏览器最低版本要求	订阅（拉流）	发布（推流）	屏幕分享
Windows	桌面版 Chrome 浏览器	69+	支持	支持	支持 Chrome72+ 版本
	桌面版 Edge 浏览器	80+	支持	支持	支持
Mac OS	桌面版 Safari 浏览器	支持	支持	支持	支持 Safari13+ 版本
	桌面版 Chrome 浏览器	69+	支持	支持	支持 Chrome72+ 版本
Android	微信内嵌浏览器	无明确信息	支持	支持	不支持
iOS 12.1.4+	移动版 Safari 浏览器	无明确信息	支持	不支持	不支持
iOS 14.3+	移动版 Safari 浏览器	无明确信息	支持	支持	不支持

URL 域名协议限制

由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。

应用场景	协议	订阅（拉流）	发布（推流）	屏幕分享	备注
生产环境	HTTPS协议	支持	支持	支持	推荐
生产环境	HTTP协议	支持	不支持	不支持	-
本地开发环境	http://localhost	支持	支持	支持	推荐
本地开发环境	http://127.0.0.1	支持	支持	支持	-
本地开发环境	http://[本机IP]	支持	不支持	不支持	-
本地开发环境	file:///	支持	支持	支持	-

若在iframe中使用，需要配置allow属性，授权媒体设备、屏幕共享的权限

<iframe allow="camera; microphone; display-capture;"></iframe>