Web CallLib 开发指南

    开发环境要求

    操作系统 Chrome Edge(Win10) Safari Firefox Opera
    Windows 7 或更高版本 52.0.2743.116 25.10586.0.0 -- 52.0.1(32 位) 43.0.2442.1144
    OS X v10.10 或更高版本 56.0.2924.87 -- 10.0.3 (12602.4.8) 52.0.1 39.0.2256.43

    开通音视频服务

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

    注意事项

    1、 需要准备两台电脑进行测试
    2、 仅支持 一对一 音视频通话
    3、 Demo 演示

    主叫: http://web.hitalk.im/demo/voip.html
    被叫: http://web.hitalk.im/demo/voip.html?userId=receiver

    音视频通话过程简述

    1、 A 发给 B 音视频请求
    2、 A 收到响铃消息 RingingMessage
    3、 B 收到音视频请求消息 InviteMessage
    4、 B 同意接通音视频 joinCall
    5、 A 收到同意接收音视频请求的消息 AcceptMessage
    6、 音视频连接成功

    初始化

    1、 安装 WebAgent(必须)

    2、 引入 Web SDK(2.2.0 以上版本),详见 Web SDK 开发指南

    3、 初始化 Web SDK,连接服务器,详见 Web SDK API 示例

    4、 监听新消息(此处仅列出音视频通话相关消息类型)

      RongIMClient.setOnReceiveMessageListener({
        onReceived: function(message) {
            switch (message.messageType) {
              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;
              //other conversationTypes
            }
        }
      });
    

    5、 引入 Web CallLib

    <script src="http(s)://cdn.ronghub.com/RongCallLib-2.2.0.min.js"></script>
    

    6、 初始化 Web CallLib

    var options = {
      container : "container-id",   //主视频容器 id
      childScreenCls : "className"   //小窗口容器 css 样式
    };
    
    // 初始化 WebCallLib
    RongIMLib.RongCallLib.init(options);
    

    发起通话

    注意:发起通话前,双方必须成功链接融云服务器并已开始监听新消息

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

    接听通话

    WebIM.joinCall(mediaType,{
       onSuccess:function(){
         console.log("joinCall Successfully");
       },
       onError:function(err){
           console.log("joinCall err",err);
       }
    });
    

    挂断通话

    1、挂断视频通话

    WebIM.hungupCall(converType,targetId,mediaType);
    

    音视频通话互转

    WebIM.changeMediaType(converType,targetId,mediaType,{
        onSuccess:function(){
          // => changeMediaType successfully
        },
        onError:function(err){
          // => error
        }
    });
    

    通话静音

    WebIM.mute({
        onSuccess:function(){
          // => successfully
        },
        onError:function(err){
          // => error
        }
    });
    

    取消静音

    WebIM. unmute({
        onSuccess:function(){
          // => successfully
        },
        onError:function(err){
          // => error
        }
    });
    

    消息类型

    InviteMessage

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

    属性名 类型 说明  备注
    callId string 房间 Id string 类型而非 number 类型
    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,每次音视频连接对应一个唯一的 Key

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

    Status

    Status 状态码 说明
    CANCEL 1 主叫取消已发出的通话请求
    REJECT 2 主叫拒绝收到的通话请求
    HANGUP 3 主叫挂断
    BUSYLINE 4 主叫忙碌
    NO_RESPONSE 5 主叫未接听
    ENGINE_UN_SUPPORTED 6 主叫不支持当前引擎
    NETWORK_ERROR 7 主叫网络出错
    REMOTE_CANCEL 11 被叫取消已发出的通话请求
    REMOTE_REJECT 12 被叫拒绝收到的通话请求
    REMOTE_HANGUP 13 通话过程被叫挂断
    REMOTE_BUSYLINE 14 被叫忙碌
    REMOTE_NO_RESPONSE 15 被叫未接听
    REMOTE_ENGINE_UN_SUPPORTED 16 被叫不支持当前引擎
    REMOTE_NETWORK_ERROR 17 被叫网络错误
    VOIP_NOT_AVALIABLE 18 VoIP 不可用