Web CallLib 开发指南

    使用说明

    由于底层引擎技术不同,SDK 从 3.0.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

    3、 A 收到响铃消息 RingingMessage

    4、 B 接受音视频请求 accept

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

    6、 成功建立音视频通话

    SDK 版本

    最新版本:

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

    版本说明:

    1.修改了加入房间方式(A发起邀请后,只有其他用户接受邀请,用户A才能加入房间)

    历史版本:

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

    通话过程的建立

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

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

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

    4、 设置参数

    5、 初始化 CallLib SDK

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

    7、 注册命令监听

    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(必填)
    };
    

    初始化CallLib SDK

    var RongCallLib =RongCallLib.init(config)
    

    注册视频节点监听

     //注册视频节点监听,监控视频流,当有人加入、离开会触发此监听。
     var watcher = function(result){
         // result => {type: 'added', data: ''}
     };
    
     RongCallLib.videoWatch(watcher);
    

    注册命令监听

     RongCallLib.commandWatch(function(command) {
         // command => 消息指令;
     });
    

    设置分辨率

      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_VEDIO
        // CallType.MEDIA_AUDIO
        mediaType: CallType.MEDIA_VEDIO
    };
    RongCallLib.call(params, function(error){
        // do something...
    });
    

    接听通话

    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){
        // do something...
    });
    

    开始屏幕共享

    RongCallLib.startScreenShare();
    

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

    插件使用说明:

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

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

    结束屏幕共享

    RongCallLib.stopScreenShare();
    

    请求白板

    RongCallLib.requestWhiteBoardURL();
    

    消息类型

    InviteMessage

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

    属性名 类型 说明  备注
    callId string 房间 Id string 类型而非 number 类型
    engineType number 引擎类型,默认使用 3
    channelInfo ChannelInfo Channel 对象
    mediaType VoIPMediaType 通话类型
    inviteUserIds array 被邀请人列表
    messageName InviteMessage 消息类型

    HungupMessage

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

    属性名 类型 说明
    caller string 发起人
    messagName string HungupMessage
    reason number 挂断类型

    RingingMessage

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

    属性名 类型 说明
    callId string 发起人 Id
    messageName RingingMessage 消息类型

    AcceptMessage

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

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

    状态码

    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 不可以用