@juphoon/webrtc-room-sdk

导入 WebRTC Room SDK

将SDK中的文件放入项目的开发路径下，确保项目可以引用到相关文件。SDK可以通过ES6的 import 关键字, require 或 <script> 标签引入.

// es6
import { JRTCWeb } from 'JRTC_WEBRTC_ROOM_SDK.js';
// require
const JRTCSDK = require('JRTC_WEBRTC_ROOM_SDK.js');
// <script>标签
<script src="xxx/JRTC_WEBRTC_ROOM_SDK.js" type="text/javascript"></script>

初始化SDK

设置环境

使用 JRTCWeb.setConfig 接口设置环境。

可供设置的参数有(具体查看JRTCConfig)

• address: 服务地址
• uploadLog: 是否上传日志

JRTCWeb.setConfig({
  address: '',
  ...
});

创建Client

通过 JRTCWeb.createClient 接口创建 WebRTCRoom 对象。

const client = JRTCWeb.createClient();

加入房间

调用 WebRTCRoom.join 接口加入房间

room.join('userId', 'roomId', 'appKey', 'token')
  .then(() => {
    // 加入房间成功
  })
  .catch((reason) => {
    // 加入房间失败
  });

获取本地音视频流

JRTCWeb.createMediaDeviceStream接口会通过采集媒体设备(摄像头/麦克风)的音视频创建一个音视频流对象(IRTCStream).

IRTCStream对象可通过WebRTCRoom.publish发布本地音视频流, 通过IRTCStream.start将画面渲染到页面上.

渲染模式可指定两种渲染模式:

• IRTCStreamRenderType.CONTAIN, 保持原有尺寸比例, 但部分内容可能被剪切.
• IRTCStreamRenderType.COVER, 保持原有尺寸比例, 内容被缩放.

渲染模式可通过IRTCStream.reset设置, 参数请参考IRTCStreamOptions

<div id="local-video" style="width: 400px; height: 300px;"></div>

const {JRTCWeb} = JCCSDK;

const stream = await JRTCWeb.createMediaDeviceStream();
stream.start('local-video'); //	将画面渲染到id为 local-video 的 dom元素中

发布本地音视频流

创建本地音视频流后可调用WebRTCRoom.publish发布本地音视频流.

成功发布后, 远端用户将收到 participant-published 事件回调.

目前只支持发布一路音视频流, 需要切换发布的音视频流时, 需要调用unpublish将已发布的IRTCStream对象取消发布.

await room.publish(stream);

取消发布本地音视频流

调用WebRTCRoom.unpublish取消发布音视频流, 远端用户将收到 participant-unpublished 事件回调.

await room.unpublish();

订阅远端成员音视频流

目前只有一路远端用户音视频流, 房间中成员的音视频流会在服务器合并, 不支持订阅指定用户的音视频流

加入房间成功后, 即会收到一个特殊用户(虚拟的合流用户)的 participant-published 事件, 该用户的音视频流即是经过服务器合流的画面.

room.addEventListener('participant-published', ({message}) => {
  const {participant} = message.data;

  room.subscribe(participant)
    .then((stream) => stream.start('userId', document));
});

Autoplay问题

当我们获取到了远端的音视频数据并开始播放时，有可能会收到浏览器的自动播放策略限制。 自动播放限制 是指如果以下任何一项未发生则媒体不允许播放：

• 音频被静音或其音量设置为0
• 用户已经与站点进行了交互（通过单击，按键等）
• 如果该网站已被列入白名单；如果浏览器确定用户经常与媒体互动，则可能会自动发生这种情况，也可能通过首选项或其他用户界面功能手动发生这种情况
• 已通过自动播放功能策略向 <iframe> 授予自动播放权限

取消订阅远端成员音视频流

取消订阅远端用户的媒体流, 将会释放远端用户媒体流并从文档中移除绑定的 HTMLVideoElement, HTMLAudioElement 元素, 音视频播放都将停止.

room.unsubscribe();

离开房间

调用 WebRTCRoom.leave 接口离开会议

client.leave();

会议成员事件

事件名	描述	callback类型
connect-state-change	room状态变化	connect-state-change
participant-joined	成员状态更新	participant-joined
participant-left	成员离开	participant-left
participant-published	成员离开	participant-published
participant-unpublished	成员离开	participant-unpublished

room.addEventListener('connect-state-change', (ev) => {
  const {state, oldState} = ev.message;
  //  todo
});