Web CallLib 开发指南

    使用说明

    由于底层引擎技术不同,SDK 从 3.1.0 开始与之前 SDK 版本的实时音视频不能互通。

    为了方便广大开发者,节约开发资源,融云在 GitHub 上提供了音视频通话 Demo 源码,欢迎下载体验。

    开通音视频服务

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

    网络要求

    实时音视频对于网络带宽的要求如下:

    • 带宽:为了获得比较好的视频画质与流畅度,每一路视频的分辨率与带宽的对应关系如下:
      • 288P: 350kbps
      • 480P: 500kbps
      • 720P: 1000kbps
    • 延时:为了保证音视频的实时性,推荐客户端到媒体服务器的 RTT 小于 150ms
    • 丢包:在媒体层面能够抵抗 30% 的随机丢包

    兼容性

    浏览器:Chrome:Chrome 57.0.2978.110 及以上版本

    超文本传输协议

    因浏览器安全要求要求,Web 版本目前只能走加密的 HTTPS 协议

    音视频通话过程简述

    1、 A 向 B 发起音视频请求

    2、 B 收到音视频请求 InviteMessage 直接回复 InviteMessage

    3、 A 收到响铃消息 RingingMessage

    4、 B 接受音视频请求 accept

    5、 A 收到 B 接受音视频请求的消息 AcceptMessage

    6、 成功建立音视频通话

    SDK 版本

    最新版本:

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

    版本说明:

    1.升级了音视频核心引擎,SDK 从 3.1.0 开始与之前 SDK 版本的实时音视频不能互通。

    历史版本:

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

    通话过程的建立

    1、 引入 Web SDK,详见 Web SDK 开发指南

    2、 引入 Web CallLib SDK,将文件下载到项目中,修改 src 的相对路径

    3、 初始化 Web SDK,连接服务器,详见 Web SDK 开发指南

    4、 设置参数

    5、 初始化 CallLib SDK

    6、 注册视频节点监听,监控视频流,用户加入、离开时会触发此监听。

    7、 注册命令监听 用户监听 inviteMessage 等消息

    8、 发起通话请求

    9、 对端接受通话请求,整个通话建立

    设置参数

    分辨率(宽*高) 帧率  码率(min) 码率(max)
    320*240 15 50 300
    640*480(默认) 15(默认) 50(默认) 600(默认)
    1280*720 15 50 2000
    var config = {
        // 发起音视频超时时间, 默认 15000 毫秒
        timeout: 15000,
        // 视频分辨率, 默认 640*480(可选)
        width: 640,
        height: 480,
        // 视频码率, 默认 600*450(可选)
        maxRate: 600,
        minRate: 50,
        // 视频帧率, 默认 15(可选)
        frameRate: 15,
        //本身用户的Id(必填)
        currentUserId:userId,
        //检测RongIMLib
        RongIMLib:RongIMLib
    };
    

    初始化CallLib SDK

    var RongCallLib =RongCallLib.init(config)
    

    注册视频节点监听

     //注册视频节点监听,监控视频流,当有人加入、离开会触发此监听。
     var watcher = function(result){
         // result 详情请查看 result 对象的描述
     };
     RongCallLib.videoWatch(watcher);
    

    当 result.type 类型为 added removed leave 时

    result 对象数据结构如下

    名称 说明
    type 视频类型 added 为添加, removed 为移除, leave 为离开
    data 视频流
    talkType 聊天类型 0 无视频有音频 1 有视频有音频 2 有视频无音频 3 无视频无音频
    isLocal 是否是本地的视频 true 本地视频 false 远端视频
    userId 用户Id

    当 result.type 的类型为 onStartScreenShareComplete,result 对象数据结构如下:

    名称 说明
    type onStartScreenShareComplete
    isSuccess 开始屏幕共享是否成功 true 为成功 false 为失败
    code isSuccess 为false 有此状态码 1 为不支持屏幕共享 2 需要安装插件

    当result.type 的类型为 onStopScreenShareComplete,result 对象数据结构如下:

    名称 说明
    type onStartScreenShareComplete
    isSuccess 结束屏幕共享 true 为成功 false 为失败

    当 result.type 的类型为 onWhiteBoardURL,result 对象数据结构如下:

    名称 说明
    type onWhiteBoardURL
    url 白板地址

    注册命令监听

     RongCallLib.commandWatch(function(message) {
         // message 请查看消息类型
     });
    

    设置分辨率

      //此接口在接通音视频之前做更改分辨率操作
      var RongCallCommon.CallVideoProfile = 20 //代表240p
      var RongCallCommon.CallVideoProfile = 40 //代表480p
      var RongCallCommon.CallVideoProfile = 50 //代表720p
      RongCallLib.setVideoProfile(RongCallCommon.CallVideoProfile)
    

    发起通话

    var CallType = RongIMLib.VoIPMediaType;
    
    var params = {
        // 会话类型,请参考: http://rongcloud.cn/docs/web_api_demo.html#conversation_type
        conversationType: conversationType,
        // 会话目标 Id,群 Id 或者 userId。
        targetId: targetId,
        // 被邀请人 Id , 多人视频填写多个 userId 最多支持 7 人, 一对一和 targetId 值一致。
        inviteUserIds: inviteUserIds,
        // 音视频类型
        // CallType.MEDIA_VIDEO
        // CallType.MEDIA_AUDIO
        mediaType: CallType.MEDIA_VIDEO
    };
    RongCallLib.call(params, function(error){
    
    });
    

    接听通话

    var params = {
            conversationType: conversationType,
            targetId: targetId,
            mediaType: mediaType
        };
    RongCallLib.accept(params);
    

    挂断通话

    var params = {
            conversationType: conversationType,
            targetId: targetId,
        };
    RongCallLib.hungup(params, function(error, summary) {
            console.log(summary);
        });
    

    拒绝通话

    var params = {
            conversationType: conversationType,
            targetId: targetId,
        };
    RongCallLib.reject(params);
    

    视频转音频

    RongCallLib.videoToAudio();
    

    音频转视频

    RongCallLib.audioToVideo();
    

    通话静音

    RongCallLib.mute();
    

    取消静音

    RongCallLib.unmute();
    

    邀请群聊人员加入音视频

    var CallType = RongIMLib.VoIPMediaType;
    
    var params = {
        // 会话类型,请参考: http://rongcloud.cn/docs/web_api_demo.html#conversation_type
        conversationType: conversationType,
        // 会话目标 Id,群 Id 或者 userId。
        targetId: targetId,
        // 被邀请人 Id , 多人视频填写多个 userId, 一对一和 targetId 值一致。
        inviteUserIds: inviteUserIds,
        // 音频类型
        // CallType.MEDIA_VEDIO
        // CallType.MEDIA_AUDIO
        mediaType: CallType.MEDIA_VEDIO
    };
    RongCallLib.invite(params, function(error){
        console.log(error)
    });
    

    开始屏幕共享

    RongCallLib.startScreenShare();
    

    注:屏幕共享功能,需要在浏览器中安装屏幕共享插件后才能使用,下载插件

    插件使用说明:

    下载插件后需要上传到自己的应用服务器,为应用提供下载地址,因为需要在插件的 manifest.json 的 matches 对象中配置域名。配置示例如下:

    "content_scripts": [ {
       "matches": [
           "http://localhost:*/*",
           "https://rtc.ronghub.com/*"
             ]
    }],
    

    结束屏幕共享

    RongCallLib.stopScreenShare();
    

    请求白板

    RongCallLib.requestWhiteBoardURL();
    

    消息

    InviteMessage

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

    属性名 类型 说明 
    callId string 会议 Id
    channelInfo ChannelInfo 会议描述
    mediaType number 通话类型
    inviteUserIds array 邀请人列表
    messageName string 消息类型

    RingingMessage

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

    属性名 类型 说明
    callId string 会议 Id
    messageName RingingMessage 消息类型
    callId string 会议id

    AcceptMessage

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

    属性名 类型 说明
    callId string 会议 Id
    mediaType string 通话类型 1 为音频 2为视频
    messageName AcceptMessage 消息类型

    HungupMessage

    主叫或被叫终止通话后对方会收到 HungupMessage 类型消息。

    属性名 类型 说明
    callId string 会议id
    messagName string HungupMessage
    reason number 错误码详情

    SummaryMessage

    总结消息,音视频结束会收 SummaryMessage 类型消息.用于对音视频的总结,可以在此获取到通话时间等设置。

    名称 类型 说明 
    caller string 发起者Id
    duration number 通话时长
    mediaType number 通话类型 1 为音频 2 为视频
    memberIdList array 会场人员
    startTime number 会议开始的时间
    inviter string 会议发起者id
    status string 收到sunmmary 的原因

    MediaModifyMessage

    视频转音频,音频转视频可以收到 MediaModify_message

    名称 类型 说明 
    callId string 会议Id
    mediaType number 通话类型 1 为音频 2 为视频
    messageName string MediaModifyMessage

    MemberModifyMessage

    群成员变更时,会收到 MemberModifyMessage 类型消息。

    属性名 类型 说明 
    callId string 会议Id
    caller string 会话发起者
    inviteUserIds array 被邀请人列表
    mediaType number 通话类型 1 为音频 2 为视频
    messageName string MemberModifyMessage
    inviteUserIds array 被邀请人列表
    observerUserIds array 观察者列表(无音频无视频加入会议)

    状态码

    HungupMessage 中 reason 字段和 SummaryMessage 中 status 字段

    状态码的描述:

    reason 状态码 说明
    CANCEL1 1 己方取消已发出的通话请求
    REJECT2 2 己方拒绝收到的通话请求
    HANGUP 3 3 己方挂断
    BUSYLINE4 4 己方忙碌
    NO_RESPONSE5 5 己方未接听
    ENGINE_UN_SUPPORTED6 6 己方不支持当前引擎
    NETWORK_ERROR7 7 己方网络出错
    OTHER_CLIENT_HANDLED8 8 其他设备已处理
    REMOTE_CANCEL11 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 CallLib 不可以用