Web CallLib 开发指南

    开通方式

    音视频服务开通,请参考音视频开通方式说明。

    引用方法

    1、 WebAgent 是音视频通话本地服务,必须安装。

    2、 引入 Web SDK 核心库 RongIMLib.js 只有引入 2.2.0 及以上版本才可以使用音视频功能,引用地址参看 Web SDK 开发指南

    3、 引入 Web 音视频插件 http://cdn.ronghub.com/RongCallLib-2.2.0.min.js

    初始化 SDK

    1、必须在 RongIMClient.init(appkey, [dataAccessProvider]) 后初始化音视频插件。

    2、音视频插件初始化 RongIMLib.RongCallLib.init(options)

    3、需要准备两台电脑进行测试。

    // 初始化 WebSDK
    
    RongIMClient.init("z3f0yqkui8v24");
    
    // 设置视频图像容器 css 样式
    
    // options.container: 主视频容器 id
    
    // options.childScreenCls:小窗口视频图像容器 css 样式
    
    var options = {container:"container-id",childScreenCls:"css-name"};
    
    // 初始化 Web 端声音插件
    
    RongIMLib.RongCallLib.init(options);
    

    接收消息

    使用 Web SDK 接收消息监听,在消息监听中增加消息类型中的类型即可,示例代码如下:

      RongIMClient.setOnReceiveMessageListener({
        onReceived: function(message) {
            switch (message.messageType) {
              case RongIMClient.MessageType.TextMessage:
                // 普通文本消息
              break;          
              case RongIMClient.MessageType.InviteMessage:
                // 收到音视频通话邀请
              break;
              case RongIMClient.MessageType.SummaryMessage:
                // 结束语音通话后收到
              break;
              case RongIMClient.MessageType.RingingMessage:
                // 响铃消息
              break;
              case RongIMClient.MessageType.AcceptMessage:
                  // 同意接听音视频通话消息
              break;
              case RongIMClient.MessageType.MediaModifyMessage:
                // 视频转音频消息
              break;
            }
        }
      });
    

    发起通话

    1、发起视频通话

    /**
     * 发起视频通话
     * @param {number} converType     会话类型
     * @param {string} targetId       目标 Id
     * @param {array}  invertUserIds  被邀请人(暂时支持 2 人视频聊天)
     * @param {number} mediaType      回话类型
     * @param {string} extra          附加信息
     */
    
    var converType = RongIMLib.ConversationType.PRIVATE;
    
    var targetId = "targetId";
    
    var invertUserIds = ["invertUserIds"];
    
    var mediaType = RongIMLib.VoIPMediaType.MEDIA_VEDIO;
    
    var extra = "";
    
    RongIMClient.getInstance().startCall(converType,targetId,invertUserIds,mediaType,extra,{
      onSuccess:function(){
         // => startCall successfully
      },
      onError:function(err){
         // => startCall error
      }
    });
    

    2、发起音频通话

    /**
     * 发起音频通话
     * @param {number} converType     会话类型
     * @param {string} targetId       目标 Id
     * @param {array}  invertUserIds  暂时支持 2 人视频聊天
     * @param {number} mediaType      回话类型
     * @param {string} extra          附加信息
     */
    
    var converType = RongIMLib.ConversationType.PRIVATE;
    
    var targetId = "targetId";
    
    var invertUserIds = ["invertUserIds"];
    
    var mediaType = RongIMLib.VoIPMediaType.MEDIA_AUDIO;
    
    var extra = "";
    
    RongIMClient.getInstance().startCall(converType,targetId,invertUserIds,mediaType,extra,{
      onSuccess:function(){
         // => startCall successfully
      },
      onError:function(err){
         // => startCall error
      }
    });
    

    接听通话

    1、接听视频通话

    RongIMClient.getInstance().joinCall(RongIMLib.VoIPMediaType.MEDIA_VEDIO,{
       onSuccess:function(){
         console.log("joinCall Successfully");
       },
       onError:function(err){
           console.log("joinCall err",err);
       }
    });
    

    2、接听音频通话

    RongIMClient.getInstance().joinCall(RongIMLib.VoIPMediaType.MEDIA_AUDIO,{
       onSuccess:function(){
         console.log("joinCall Successfully");
       },
       onError:function(err){
           console.log("joinCall err",err);
       }
    });
    

    挂断通话

    1、挂断视频通话

    RongIMClient.getInstance().hungupCall(RongIMLib.ConversationType.PRIVATE,targetId,RongIMLib.VoIPMediaType.MEDIA_VEDIO);
    

    2、挂断音频通话

    RongIMClient.getInstance().hungupCall(RongIMLib.ConversationType.PRIVATE,targetId,RongIMLib.VoIPMediaType.MEDIA_AUDIO);
    

    视频通话转语音通话

    RongIMClient.getInstance().changeMediaType(RongIMLib.ConversationType.PRIVATE,targetId,RongIMLib.VoIPMediaType.MEDIA_VEDIO,{
          onSuccess:function(){
            // => changeMediaType successfully
          },
          onError:function(err){
            // => error
          }
      });
    

    通话静音

    RongIMClient.getInstance().changeMediaType(RongIMLib.ConversationType.PRIVATE,targetId,RongIMLib.VoIPMediaType.MEDIA_AUDIO,{
        onSuccess:function(){
          // => successfully
        },
        onError:function(err){
          // => error
        }
    });
    

    消息类型

    InviteMessage

    收到通话邀请会收到 InviteMessage 类型消息,此时可进行已方响铃,显示接听、挂断按钮等。

    属性名 类型 说明
    callId string 房间 Id
    engineType number 引擎类型,默认使用 1
    channelInfo ChannelInfo Channel 对象
    mediaType VoIPMediaType 通话类型
    inviteUserIds array 被邀请人列表
    extra string 附加信息

    SummaryMessage

    己方或对方终止通话后都会收到 SummaryMessage 类型消息,此时可根据消息属性显示通话结束后的小灰条消息(通话时长等)。

    属性名 类型 说明
    caller string 发起人
    inviter string 被邀请人
    mediaType VoIPMediaType 通话类型
    memberIdList array 成员列表
    startTime number 通话开始时间
    duration number 通话时长(s)
    status ErrorCode 通话状态

    RingingMessage

    己方发起通话邀请成功后会收到 RingingMessage 类型消息,此时可进行响铃(等待对方接听铃声)。

    属性名 类型 说明
    callId string 发起人 Id

    AcceptMessage

    己方发送通话邀请,对方接听后会收到 AcceptMessage 类型消息,此时可以进行关闭响铃、隐藏、显示操作按钮等。

    属性名 类型 说明
    callId string 发起人 Id
    mediaType VoIPMediaType 通话类型

    MediaModifyMessage

    己方或对方由视频通话切换为音频通话后会收到 MediaModifyMessage 类型消息,此时可以隐藏、显示操作按钮等。

    属性名 类型 说明
    callId string 发起人 Id
    mediaType VoIPMediaType 通话类型

    枚举、对象

    通话类型

    属性名 类型 说明
    MEDIA_AUDIO string 通道 Id
    MEDIA_VEDIO string 通道 Key

    ChannelInfo

    属性名 类型 说明
    Id string 通道 Id
    Key string 通道 Key