实现通话

本文档为您展示通过 插件 实现多方视频会话 的相关步骤；帮助您在视频双录的场景下实现 创建频道，全景录像，频道管理。

1.前提条件

请确认您已完成以下操作：

• 已获取 App Key。

AppKey 作为同个环境的分域依据，同一个域的终端才能实现互通，AppKey 由 Juphoon 视频平台提供。

• 集成插件。

2.初始化

插件的唤起，根据所需要的多方 模块初始化插件，后续调用 webPlugin 接口进行业务操作

调起插件

创建 WebPlugin 实例，初始化 RoomPlugin 插件。一台设备上只能同时运行一个插件，一个插件只能同时连接要给 Web。当”第二个“网页试图连接插件时，将会收到 OnEventNotify 警告通知。

<script type="text/javascript">
    var webPlugin = new WebPlugin()
    webPlugin.init('Juphoon.RoomPlugin:')
        .then(function () {
            alert('连接上插件')
        })
        ['catch'](function (e) {
        alert('检测失败，请重新检测或下载安装插件。')
    });
</script>

插件初始化

因初始化是一个耗时操作所以 webPlugin.init 接口返回了一个 Promise 对象。用户可以在 Promise 中设置对应的处理方法。

插件 所有可用的接口以及回调事件由全局变量 webPlugin 导出。Web 页面应当只关心页面的交互，音视频渲染交由插件负责。

插件有默认使用的 AppKey，如果出现分域的情况，需在 webPlugin.Init 时设置 Appkey 以初始化插件。

var webPlugin = new WebPlugin();
/**
  * @desc 初始化
  * @param {string} appkey - (可选)不填则使用内部appkey
  * @param {string} channel - 渠道标识，控制插件内特殊的渠道标识，如双录插件（JuphoonDualRecord）
  */
webPlugin.initPluginParam.LogConsole = true/false; // 是否需要控制台日志打印。 true需要；false不需要
webPlugin.initPluginParam.LogLocalFile = true/false; // 是否需要本地文件日志打印。 true需要；false不需要
webPlugin.initPluginParam.RpcLoss = true/false; // RPC抗信令丢包。 true开启；false不开启
var appkey = "服务端部署配置的appKey";
webPlugin.Init(appkey, "渠道标识");

初始化结果通知

var webPlugin = new WebPlugin();
/**
  * @desc 初始化结果通知
  * @param {boolean} result - 是否成功
  * @param {Number} httpServerPort - http服务端口
  */
webPlugin.OnInitResult = function (result, httpServerPort) {
  console.log('OnInitResult', result, httpServerPort);
};

获取插件版本号

获取插件本版号可以不需要插件初始化，只需要连接 websocket 即可。

var webPlugin = new WebPlugin();
webPlugin.GetVersion();

获取插件版本号结果通知：

var webPlugin = new WebPlugin();
webPlugin.OnGetVersionResult = function (version) {
   //version
   console.log('OnGetVersionResult',version);
};

获取插件属性

获取插件属性

var webPlugin = new WebPlugin();
/**
  * @desc 获取插件属性
  */
webPlugin.GetProperties();

获取插件属性回调

var webPlugin = new WebPlugin();

/**
  * @desc 获取插件属性
  * @param {String} content - 属性
  */
webPlugin.OnGetPropertiesResult = function (content) {
  console.log('OnGetPropertiesResult', content);
};

插件属性改变通知

var webPlugin = new WebPlugin();

/**
  * @desc 获取插件属性改变通知
  * @param {String} content - 属性
  */
webPlugin.OnPropertiesChangeNotify = function () {
  console.log('OnPropertiesChangeNotify');
};

设置 AppKey

插件有默认使用的 AppKey，如果出现分域的情况，需要在登录操作前通过调用 webPlugin.setAppkey 方法设置 Appkey。

var webPlugin = new WebPlugin();

/**
  * @desc 设置AppKey
  * @param {string} appkey - appkey
  */
webPlugin.SetAppKey(appKey);

注意：在运行前，请联系 Juphoon 市场售前工程师获取 Appkey。

3.登录

用户登录

var webPlugin = new WebPlugin();

/**
  * @desc 登录
  * @param {string} userId - 用户ID
  * @param {string} displayName - 用户昵称
  * @param {string} password - 用户密码
  * @param {string} server - 接入服务器
  * @param {string} certificate - S3 国密证书 Base64 编码内容，没有则填空字符串
  * @param {string} acceptExpiredCertificate - 是否允许过期证书校验通过
  * @param {string} token - token
  * @param {string} tokenType - token类型
  */
webPlugin.Login("userId", "displayName", "password", "server", "certificate", false, "token", "tokenType");

登录结果和登录状态通知

var webPlugin = new WebPlugin();

/**
  * @desc 登录结果通知
  * @param {boolean} result - 是否成功
  * @param {string} reason - 原因
  */
webPlugin.OnLoginResult = function (result, reason) {
  console.log('OnLoginResult', result, reason);
};

/**
  * @desc 登录状态变化通知结果
  * @param {int} newState - 当前登录状态
  * @param {int} oldState - 之前登录状态
  *  - 1: STATE_IDLE, 		 未登录/空闲
  *  - 2: STATE_LOGINING,  登录中/重连中
  *  - 3: STATE_LOGINED, 	 登录成功
  *  - 4: STATE_LOGOUTING, 登出中
  */
webPlugin.OnLoginStateChanged = function(newState, oldState) {
  console.log('OnLoginStateChanged', newState, oldState);
};

4.登出

用户登出操作

var webPlugin = new WebPlugin();

/**
  * @desc 登出
  */
webPlugin.Logout();

登出操作结果通知

var webPlugin = new WebPlugin();

/**
  * @desc 登出结果通知
  * @param {string} reason - 原因
  */
webPlugin.OnLogoutResult = function (reason) {
  console.log('OnLogoutResult', reason);
};

5.获取登录状态

用户获取登录状态

var webPlugin = new WebPlugin();

/**
  * @desc 获取登录状态
  */
webPlugin.GetLoginState();

获取登录状态结果通知

var webPlugin = new WebPlugin();

/**
	* @desc 获取登录状态
	* @param {string} state - 当前登录状态
	*  - Idle      未登录
	*  - Logining  登录中
	*  - Logined   已登录
	*  - Logouting 登出
	*/
webPlugin.OnGetLoginStateResult = function (state) {
  console.log('OnGetLoginStateResult', state);
};

6.销毁

var webPlugin = new WebPlugin();

/**
  * @desc 销毁
  */
webPlugin.Destroy();

7. 实现视频通话

跑通 demo

1. 在 JuphoonSDK RTC 文档中心，选择多方选择项，再运行 exe。

UOS&Kylin 下插件下载完成后，安装相应的deb。

1. 插件安装完成后，打开 \JRoom\目录下的 JRoom.html 网页，就可以拉起插件，运行。

2. 打开网页，调起插件，检测插件是否成功运行。

3. 插件成功运行后，填写正确的账号和服务器地址，点击登录，左侧的状态可以实时反馈用户当前的状态。

4. 用户成功登录，点击加会按钮输入通话房间号，确定参会后，即可体验多方插件的功能。

加入房间

呼叫参数

this.joinParam = {
  // 公共参数
  HeartbeatTime: 20, // 心跳间隔，单位s，初始值-1，默认值20s
  HeartbeatTimeOut: 60, // 心跳超时，单位s，初始值-1，默认值60s，最长10min。
  EnableRemoteRecord: true, // 是否开启远程录制，true开启，false关闭。默认开启
  SecurityType: 0, // 加密方式，0=>不加密;1=>SRTP;2=>SM4。默认不加密
  ExtraInfo: '', // 随路信息
  VideoDefinition: 0, // 清晰度：0自定义、1流畅、2标清、3高清。默认自定义
  SaveFlow: true, // 是否省流 true省流，false不省流
  SvcResolution: '1 180 250 360 600 720 1400', // svc分辨率，默认为 "1 180 250 360 600 720 1400"
  MaxFrameRate: 24, // 最大帧率 1-30, 默认值为 24
  VideoEncodeType: 0, // 视频编码 H264=>0、H265=>1、AV1=>2。默认0
  AudioEncodeType: 0, // 音频编码 OPUS=>0、PCMA=>1、PCMU=>2。默认0
  BusinessId: '', //业务流水号

  // 多方入会特有参数
  SmoothMode: false, // 平滑模式 true开启，false关闭。默认关闭
  EnableScreenShare: false, // 是否默认开启屏幕共享,可选。默认关闭
  RecordFileName: '', // 录制文件名字
  Capacity: 16, // 房间容量 默认16
  Cdn: '', // cdn推流地址
  ViewerJoin: false //是否以观众身份加入房间（无感加入），默认 false， 如果设置 true，加入房间后，其他房间内成员不会收到该成员加入通知，该成员也不支持上传本地音视频流
}

示例代码：

var webPlugin = new WebPlugin();
//设置加入房间参数
webPlugin.joinParam.EnableRemoteRecord = true;
// 根据需要设置其他加入房间参数
function joinRoom() {
	webPlugin.Join("房间号");
}

加入房间成功或者失败将会通过 OnCallStateChangeNotify 回调上报

var webPlugin = new WebPlugin();

/**
  * @desc 通话状态
  * @param {string} type - 类型
  *  - Joining：  加入房间中
  *  - Talking:   加入房间成功
  *  - Term:      离开房间
  * @param {string} reason - 原因
  * @param {string} fromUserId - 对方用户id
  */
webPlugin.OnCallStateChangeNotify = function(type, reason, fromUserId, callId) {
  console.log('OnCallStateChangeNotify', type, reason, fromUserId, callId);
};

邀请

var webPlugin = new WebPlugin();

/**
  * @desc Invite
  * @param {string} UserId - 座席用户ID
  * @param {string} RecordFileName -  自定义文件名
  * @param {Number} videoEncodeType - 视频编码 H264=>0、H265=>1、AV1=>2
  * @constructor
  */
webPlugin.invite(id, 'RecordFileName', 0);

离开房间

当业务办理结束，参会成员可以离开频道，主动和被动的挂断事件与来电、接通一样，都通过 OnCallStateChangeNotify 回调上报。

示例代码：

var webPlugin = new WebPlugin();

/**
  * @desc 离开房间
  */
webPugin.End();

通话状态通知

成员加入房间成功后，触发通话状态改变为 Talking 通知；

成员结束通话，触发通话状态改变为 Term 通知；

通知均由 webPlugin.OnCallStateChangeNotify 回调进行上报

var webPlugin = new WebPlugin();

/**
  * @desc 通话状态
  * @param {string} type - 类型
  *  - Joining： 加入房间中
  *  - Talking:  通话中
  *  - Term:     挂断
  * @param {string} reason - 原因
  * @param {string} fromUserId - 对方id
  */
webPlugin.OnCallStateChangeNotify = function(type, reason, fromUserId, callId) {
  console.log('OnCallStateChangeNotify', type, reason, fromUserId, callId);
  switch (type) {
    case 'Joining':   
      toolbarChangeState(TOOLBAR_STATE.JOINING);
      break;
    case 'Talking':   
      toolbarChangeState(TOOLBAR_STATE.TALKING);
      break;
    case 'Term':   
      toolbarChangeState(TOOLBAR_STATE.TERM);
      break;
  }
};

成员增加、变化、离开上报

该通知会在加入通话成功后生效，到离开通话后停止生效。上报内容如下：

{Number} state
       - 1 成员加入
       - 2 成员更新
       - 3 成员离开
{String} participant 成员信息json
{String} changeParam 成员属性变化，当state=2时有效

注意：成员的加入和离开不会上报自己，自己的离开和加入通过OnCallStateChangeNotify上报，可查看4.7.5。

var webPlugin = new WebPlugin();
webPlugin.OnMemberUpdate = function(state, participant, changeParam) {
  console.log('OnMemberUpdate', state, participant, changeParam);
};

解散房间

调用解散房间，会通过 OnCallStateChangeNotify 回调上报

var webPlugin = new WebPlugin();

/**
  * @desc 解散房间
  */
webPugin.Stop();