Web RTCLib 开发指南

    开通音视频服务

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

    网络要求

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

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

    浏览器支持

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

    超文本传输协议

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

    音视频通话过程简述

    1、A 输入房间号加入会议

    2、B 输入房间号加入会议

    3、成功建立音视频通话

    SDK 版本

    最新版本:

    <script src="http(s)://cdn.ronghub.com/RongRTCLib_Web_1.6.3.js"></script>

    配置文件

    var global_config = {
            TOKEN_URL : //服务端获取token的地址,需要开发人员自己去调用融云后端api自己去实现。
            WS_NAV_URL : 'https://rtc.ronghub.com/nav/websocketlist',//获取websocketlist列表
            DOWNLOAD_SHARE_PLUGIN_URL:'https://rtc.ronghub.com/plugin/chrome-addon.zip',
            IS_SHOW_WB : true,
            appId:appKey
    }
    

    SDK 集成

    1、 引入 adapter.js

    2、 引入 RongRTCLib.js

    3、 App Key 和 uId

    uId App Key 
    客户端自定义的用户唯一标识 分配的 App Key (通过开发者后台获取)

    4、 获取 RTCToken

    RTCToken 称为用户令牌,App Key 是您的 App 的唯一标识,RTCToken 则是您 App 上的每一个用户的身份授权象征。您可以通过提交 userId 等信息来获得一个该用户对应的 RTCToken,并使用这个 Token 作为该用户的唯一身份凭证与其他用户进行通信。

    RTCToken 的主要作用是身份授权和安全,因此不能通过客户端直接访问融云服务器获取,必须通过 Server API 从融云服务器获取 RTCToken 返回给您的 App,并在之后连接时使用。详细请参考 Server 开发指南

    支持 get 和 post 方式

     function getToken(tokenUrl, uId, appKey, callback) {
            $.ajax({
                url: tokenUrl,
                type: "POST",
                data: 'uid=' + uid + '&appid=' + appid,
                async: true,
                success: function (data) {
                    callback(data);
                },
                error: function (er) {
                    console.log("请求token失败!");
                }
            });
        }
    

    5、 SDK 初始化

    var  wsNavUrl = https://rtc.ronghub.com/nav/websocketlist
    var rongRTCEngine =new RongRTCEngine(wsNavUrl)
    var rongRTCEngineEventHandle = new RongRTCEngineEventHandle();
    

    基础功能

    构造函数初始化

    new BlinkEngine(wsNavUrl)

    参数名称 参数类型  参数描述
    wsNavUrl String 导航地址
    var  rongRTCEngine = new RongRTCEngine(wsNavUrl)
    

    获取 SDK 版本号

    返回结果类型 返回结果描述 
    String SDK 版本号
    rongRTCEngine.getSDKVersion()
    

    注册回调事件类

    rongRTCEngine.setRongRTCEngineHandle(rongRTCEngineEventHandle)
    
    参数名称 参数类型 参数描述 
    rongRTCEngineEventHandle RongRTCEngineEventHandle 对象 回调事件类

    设置视频参数

    rongRTCEngine.setVideoParameters(config)
    

    config 对象描述:

    属性名 类型 说明
    VIDEO_PROFILE JSON width、height、frameRate,默认为{width:640,height:489,frameRate:15}
    VIDEO_MAX_RATE Number 最大码率,默认为600
    VIDEO_MIN_RATE Number 最小码率,默认值为50
    USER_TYPE String 用户类型,默认是普通类型
    IS_CLOSE_VIDEO Boolean 是否开关视频,默认开启

    加入会议

    rongRTCEngine.joinChannel(channelId, userId, token)
    
    参数名称 参数类型 参数描述 
    channelId String 会议 ID
    userId String 用户 ID
    token String Token

    离开会议

    rongRTCEngine.leaveChannel()
    

    获取本地视频流

    rongRTCEngine.getLocalStream()
    
    返回结果类型 返回结果描述 
    MediaStream 对象 本地视频流

    获取远端视频流

    rongRTCEngine.getRemoteStream(userId)
    
    参数名称 参数类型 参数描述 
    userId String 用户ID

    创建本地视频视图

    rongRTCEngine.createLocalVideoView()
    
    返回结果类型 返回结果描述 
    video 标签对象 本地视频视图

    创建远端视频视图

    rongRTCEngine.createLocalVideoView(userId)
    
    参数名称 参数类型 参数描述 
    userId String 用户 ID

    关闭/打开麦克风

    rongRTCEngine.muteMicrophone(isMute)
    
    参数名称 参数类型 参数描述 
    isMute Boolean true 关闭、false 打开

    关闭/打开本地摄像头

    rongRTCEngine.closeLocalVideo(isCameraClose)
    
    参数名称 参数类型 参数描述 
    isCameraClose Boolean true 关闭、false 打开

    关闭/打开远端声音

    rongRTCEngine.closeRemoteAudio(isAudioClose)
    
    参数名称 参数类型 参数描述 
    isAudioClose Boolean true 关闭、false 打开

    关闭本地媒体流

    rongRTCEngine.closeLocalStream()
    

    请求白板

    rongRTCEngine.requestWhiteBoardURL()
    

    查询白板

    rongRTCEngine.queryWhiteBoard()
    

    开启屏幕共享

    rongRTCEngine.startScreenShare()
    

    结束屏幕共享

    rongRTCEngine.stopScreenShare()
    

    回调事件注册

    通过 RongRTCEngineEventHandle 接口注册事件,详细如下

    自己加入会议

    rongRTCEngineEventHandle.on('onJoinComplete', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    isJoined Boolean true 加入成功、false 加入失败

    自己退出会议

    rongRTCEngineEventHandle.on('onLeaveComplete', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    isLeft Boolean true 退出成功、false 退出失败

    用户加入会议

    rongRTCEngineEventHandle.on('onaddstream', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    userId String 用户 ID
    userType Number 用户类型,1 普通用户、2 观察者、3 主持人
    talkType Number 会话类型,0 没有开启、1 开启

    用户退出会议

    rongRTCEngineEventHandle.on('onUserLeft', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    userId String 用户 ID
    userType Number 用户类型,1 普通用户、2 观察者、3 主持人
    talkType Number 会话类型,0 没有开启、1 开启
    改变音视频
    rongRTCEngineEventHandle.on('onTurnTalkType', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    userId String 用户 ID
    type Number 视频类型,1 摄像头、2 麦克风、3 麦克风+摄像头
    open Number 打开/关闭,1 开启、2:关闭

    连接状态

    rongRTCEngineEventHandle.on('onConnectionStateChanged', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    connectionState String 链接
    DISCONNECTED String 断开链接

    请求白板页面结果

    rongRTCEngineEventHandle.on('onWhiteBoardURL', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    isSuccess Boolean true 请求成功、false 请求失败
    url 白板 HTTPURL 观察者类型不能创建,如果当前会议没有白板,url 返回为空

    查询当前会议是否存白板

    rongRTCEngineEventHandle.on('onWhiteBoardQuery', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    isSuccess Boolean true 查询成功、false 查询失败
    url 白板 HTTPURL 白板 HTTPURL(如果当前会议没有白板,url 返回为空)

    上传本地视频流的丢包

    rongRTCEngineEventHandle.on('onNetworkSentLost', function(data) {});
    
    属性名称 类型 描述 
    data JSON packetSendLossRate、丢包率

    是否开启屏幕共享

    rongRTCEngineEventHandle.on('onStartScreenShareComplete', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述
    isSucces Boolean true 成功开启、false 开启失败
    code Number 当开启失败时的错误码,1 浏览器不支持、2 未安装插件

    成功结束屏幕共享

    rongRTCEngineEventHandle.on('onStopScreenShareComplete', function(data) {});
    

    data 对象描述:

    属性名称 类型 描述 
    isSucces Boolean true 结束开启、false 结束失败