Options
All
  • Public
  • Public/Protected
  • All
Menu

webrtc-conference-sdk - v2.7.5

浏览器兼容性要求

浏览器 支持版本号
chrome 67以上
firefox 63以上
safari 11以上

获取Web Conference SDK 及 Sample 源码

SDK包含以下文件,请确认后再进行开发

├──  Juphoon_Rtc_SDK_for_Web_vx.x.x_CallCenter.tar.gz 
│ ├── SDK 
│ │ └──  
│ ├── Sample 
│ └── Doc

导入 Web Conference SDK

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

import { JuphoonWebRTCConference } from 'JRTCSDK.WEB.js';
/* or */
const JRTCSDK = require('juphoon-sdk.webrtc.conference.debug.js');
const JuphoonWebRTCConference = JRTCSDK.JuphoonWebRTCConference;

初始化SDK

设置环境

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

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

创建Client

通过 JuphoonWebRTCConference.createConferenceClient 接口创建client对象。

const client = JuphoonWebRTCConference.createConferenceClient('appKey', 'token');

登录视频平台

使用 Juphoon 视频的能力前,需要先登录到 Juphoon 视频平台。调用上一步得到的client实例的 login 方法,登录到视频平台。 login 会返回一个 Promise 对象。Promise resolve后client已处于登录状态。如果Promise 状态转为reject表示登录失败。

加入会议

调用 join 接口加入/创建会议

client.join('confNumber', {
// todo 入会参数
})
.then(() => {
// 入会成功
})
.catch((reason) => {
// 入会失败
});

创建本地视频画面

创建本地视频画面需要在加入会议后调用

startCameraVideo接口会打开摄像头和麦克风并返回一个 IRTCStream 对象, 可以通过该对象将画面渲染到页面上。

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

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

startMicrophone接口会打开麦克风并返回一个 IRTCStream 对象, 可以通过该对象渲染音频。

<div id="local-video" style="width: 400px; height: 300px;"></div>
const {IRTCStreamRenderType} = JRTCSDK;

client.startCameraVideo(IRTCStreamRenderType.CONTAIN)
.then(stream => {
stream.start('local-video'); // 将画面渲染到id为 local-video 的 dom元素中
})
.catch(reason => {
// todo
});

client.startMicrophone()
.then(stream => {
stream.start('local-video'); // 将画面渲染到id为 local-video 的 dom元素中
})
.catch(reason => {
// todo
});

创建远端视频画面

创建远端视频画面需要在加入会议后调用

startVideo接口会打开摄像头并返回一个 IRTCStream 对象, 可以通过该对象将画面渲染到页面上。

Autoplay问题

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

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

离开会议

调用 leave 接口离开会议

client.leave();

会议成员事件

事件名 描述 事件对象
ConferenceEventType.CONFERENCE_PARTICIPANT_JOIN 成员加入 {message: {data: {participant: Participant}}}
ConferenceEventType.CONFERENCE_PARTICIPANT_UPDATE 成员状态更新 {message: {data: {participant: Participant; changeParam: ParticipantChangeParam}}}
ConferenceEventType.CONFERENCE_PARTICIPANT_LEFT 成员离开 {message: {participant: Participant}}
const {ConferenceEventType} = JRTCSDK;
client.addEventListener(ConferenceEventType.CONFERENCE_PARTICIPANT_JOIN, (ev) => {
const {message: {participant}} = ev;

// todo
});
client.addEventListener(ConferenceEventType.CONFERENCE_PARTICIPANT_UPDATE, (ev) => {
const {message: {participant, changeParam}} = ev;

// todo
});
client.addEventListener(ConferenceEventType.CONFERENCE_PARTICIPANT_LEFT, (ev) => {
const {message: {participant}} = ev;

// todo
});

邀请sip用户

邀请sip用户需要把 ConferenceJoinParam.video 设置为 false, 然后调用 startMicrophone 接口仅打开麦克风.

在加入会议成功后可以调用 inviteSipUser 邀请sip用户. 传递参数详见 ConferenceSipParam.

client.join('confNumber', {
// todo 入会参数
video: false
})
.then(() => client.inviteSipUser({
calleeNumber: 'xxx',
coreNetwork: 'xxx'
}))
.catch((reason) => {
// todo
});

sip用户的 振铃/接通状态ConferenceEventType.CONFERENCE_PARTICIPANT_UPDATE 事件通知.

通过 ParticipantChangeParam.sipTalkingState 判断sip用户通话状态是否变化, 通过 Participant.sipTalkingState状态当前sip用户处于什么状态.

const {SipTalkingState} = JRTCSDK;
client.addEventListener(ConferenceEventType.CONFERENCE_PARTICIPANT_UPDATE, (ev) => {
const {changeParam, participant} = ev.message.data;

if (changeParam.sipTalkingState) {
switch (participant.sipTalkingState) {
case SipTalkingState.NONE:
// todo
break;
case SipTalkingState.ALERTING:
// todo
break;
case SipTalkingState.TALKING:
// todo
break;
}
}
})