视音频通信

产品文档

视音频通信

帮助中心 > 产品文档 > 视音频通信 > H5 JRTC SDK快速集成

JRTC简介

JRTC的基本功能包含创建实例、加入房间、本地发布、订阅远端和离开房间等。当您成功创建实例,您可以进行本地预览视频功能,进行简单的预览和测试。

前提条件

在执行Demo步骤之前,您需要从控制台获取鉴权信息,具体操作请参见生成Token。 您需要下载示例代码,详情请参见SDK下载

操作步骤

1.使用scripty引入SDK,  demo中SDK存放于public文件夹下。

<script src="./jrtc.min.js"></script>

2.初始化SDK。

const JWebrtc = jrtc.init({ appId })

rt说明 appId 为应用ID,从控制台获取

4.加入房间。进入房间成功, 会返回一个ROOM对象: JRTCRoom。

JWebrtc.enterRoom({ 
 appId, // 应用ID,从控制台获取
 token, // 用户生成token,生成方式参见XXXX取
 userId, // 用户ID
 nonce, // 令牌随机码,用户生成
 timestamp, // 令牌过期时间,用户生成
 userRoomId, // 房间ID
 nickName, // 昵称
 subscribeType, // 大房间模式下,音频订阅模式:1.固定订阅 2.普通订阅。 默认为 1 useVp8 // 是否开启vp8运行环境,布尔值,默认false
}).then((res) => {
 // 成功加入会议
}).catch((err) => {
 // 加入会议失败,打印错误日志,可以查看失败原因 
 console.log(err);
});

5.发布或取消发布音、视频流。

  • 发布音频流。通过getAudioTrack方法获取音频轨道后,使用publishAudioStream方法可以发布音频流。
JWebrtc.getAudioTrack() // 该方法返回 audioTrack
 .then((track) => {
 JRTCRoom.publishAudioStream(track).then(
 ({ track, streamId }) => {
 // 音频流发布成功
 }
 );
 })
 .catch((err) => {
 // 音频流发布失败, 打印错误日志,可以查看失败原因 
 console.log(err);
 });
  • 发布视频流。通过getVideoTrack方法获取视频轨道后,使用publishVideoStream方法可以发布视频流。
JWebrtc.getVideoTrack() // 该方法返回 videoTrack
 .then((track) => {
 JRTCRoom.publishVideoStream(track).then(
 ({ track, streamId }) => {
 // 视频流发布成功
 }
 );
 })
 .catch((err) => {
 console.log(err); //视频发布失败
 });
  • 取消发布音、视频流。
JRTCRoom.unPublishStream(streamId); // streamId - 流ID

6.发布StreamPublished回调或StreamUnpublished回调。

  • 发布StreamPublished回调。当有用户发布新的音、视频流时,在SDK里会触发StreamPublished回调,通过订阅这个回调,能够得到房间里已经发布新流的用户。
JRTCRoom.on("StreamPublished", (streamInfos) => {
 // 当有新流发布时,可获取streamInfos
 console.log(streamInfos)
});

streamInfos 信息如下表所示:

参数 说明
userId 用户Id
nickName 昵称
kind 流类型
streamName 流名称
  • 发布StreamUnpublished回调。当有用户取消音频或视频发布时,会触发这个回调。
JRTCRoom.on("StreamUnpublished", (peerInfo) => {
 // 返回取消发布的流信息
 console.log(peerInfo);
});

peerInfo 信息如下表所示:

参数 说明
userId 用户Id
nickName 昵称
kind 流类型

说明 StreamPublished、StreamUnpublished回调只有加入房间以后才会触发。

7.订阅或取消订阅流。

  • 订阅流。通过subscribeStreams方法可以订阅流,订阅成功如果产生新的消费者,需手动监听streamSubscribed。
JRTCRoom.subscribeStreams(streamIds); // 订阅流,streamIds - 流ID Array

手动监听 streamSubscribed,返回peerInfo。

JRTCRoom.on("StreamSubscribed", ({ peerInfo }) => {
 console.log("StreamSubscribed", peerInfo);
})

peerInfo 信息如下表所示:

参数 说明
userId 用户Id
nickName 昵称
audioTrack 音频轨道
videoTrack 视频轨道
  • 取消订阅。通过unSubscribeStreams方法可以取消订阅流。
JRTCRoom.unSubscribeStreams(streamIds); // 取消订阅流,streamIds - 流ID Array

8.退出房间。

JWebrtc.exitRoom()
 .then(() => {
 // 退出房间成功
 JWebrtc.disconnectAll(); // 断开通信连接,销毁房间
 JWebrtc = null; // 全局变量 JWebrtc 设置为null
 })
更新时间:2021-09-24 18:30:15
文档反馈 docs feedback