Logo
首页
产品中心
解决方案
关于我们
新闻报道
文档中心
clear
实时音视频
arrow
WEB SDK
arrow
概要介绍
概要介绍
arrow
API文档
房间相关
媒体流管理
设备相关
回调通知
其他
arrow
SDK 下载
SDK 下载

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> // 第三库,非必须。使用本地录制功能需要
  1. 初始化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);
  1. 订阅远端音视频流
  • 根据 joined 事件、streamAdded 事件返回的音视频流,调用 subscribe 接口
  • 监听 subscribed 事件,表示订阅成功,开始播放音频、视频
hirtcwebsdk.adddListener('subscribed', (subscribeID, publishID) => {
  console.log(`订阅成功:${subscribeID}, ${publishID}`);
});
hirtcwebsdk.subscribe(videoElement, pubUserID, publishID);
  1. 发布本端音视频流
  • 申请设备权限,获取设备列表
  • 预览设备,完成采集,生成音视频流
  • 发布音视频流
  • 监听回调,标识发布成功
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);
  1. 订阅端
  • 视频流信息携带层级数据,订阅端可按需订阅对应层级,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>
扫码添加企业微信了解更多
咨询电话
0532-88984409
服务条款 | 隐私协议 聚好看科技股份有限公司版权所有
鲁ICP备16046081号 鲁ICP备2021027295号-6 鲁ICP备2021027295号-4 鲁公网安备37021202000326号 鲁公网安备37021202001528
copyright 2020-2024 Juhaokan Technology Co., Ltd.All Rights Reserved