浏览器 | 支持版本号 |
---|---|
chrome | 67以上 |
firefox | 63以上 |
safari | 11以上 |
SDK包含以下文件,请确认后再进行开发
├── Juphoon_Rtc_SDK_for_Web_vx.x.x_CallCenter.tar.gz
│ ├── SDK
│ │ └──
│ ├── Sample
│ └── Doc
将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;
使用 JuphoonWebRTCConference.setConfig 接口设置环境。
JuphoonWebRTCConference.setConfig({
address: '',
...
});
通过 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 对象, 可以通过该对象将画面渲染到页面上。
渲染模式可指定两种渲染模式:
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 对象, 可以通过该对象将画面渲染到页面上。
当我们获取到了远端的音视频数据并开始播放时,有可能会受到浏览器的自动播放策略限制。 自动播放限制 是指如果以下任何一项未发生则媒体不允许播放:
<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用户需要把 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;
}
}
})