H5 SDK集成指南

为开发者集成音视频会话及相关高级功能提供相关指导,以下均为 js 代码,详细代码请参考网站源码

文档中“会议”和“会话”含义等同。

开始音视频会话

快速创建并进入一个简单的音视频会话;

请先准备[说明]中的相关内容:1.引入开sdk文件, 2.运行环境要求, 3.开发环境配置以及连接相关的麦克风摄像头并确认设备工作正常。

基本步骤如下:

  1. 初始化SDK
  2. 登录连接视频服务器
  3. 创建视频会话
  4. 进入会话
  5. 打开麦克风/摄像头
  6. 有其他人进入会话
  7. 退出会话
  8. 注销登陆

1. 初始化SDK

初始化是整个SDK的使用基础,通常在加载页面后进行初始化(Init2),退出的时候进行反初始化(Uninit),整个程序的生命周期中只进行一次初始化和反初始化。

相关API参考请见 初始化/反初始化

import CR from '../../utils/CR_Miniapp_SDK.min.js';
Page({
    data: {

    },
    onLoad(options) {

    },
    onReady() {
        const init = CR.Init();    //SDK 初始化
        this.CRinit(init);
    },
    onUnload() {
        CR.Uninit();    //SDK 反初始化
    },
    CRinit(init) {
        if (init != 0) {
            console.log('sdk初始化报错,错误转态码: ' + init);
            return;
        }
        console.log('初始化完成');
    }
})

2. 登录连接视频服务器

设置视频服务器地址,使用云屋授权账号和自定义用户编号登录

相关API请参考 服务器地址登录/注销

import CR from '../../utils/CR_Miniapp_SDK.min.js';
const md5 = require('../../utils/md5.js');
Page({
    data: {
        userInfo: {
            userId: null,
            nickName: '',
        },
        serverInfo: {
            serverAddr: null, // 登录服务器地址
            account: null, // 登录帐号
            password: null, // 登录密码
        }
    },
    onLoad() {
        this.data.serverInfo.serverAddr = 'www.cloudroom.com';
        this.data.serverInfo.account = 'demo@cloudroom.com';
        this.data.serverInfo.password = '123456';
    },
    onReady(){
        this.initCrCallback(); //回调函数初始化
        this.loginFunction();  //登录服务器,一般由按钮发起此事件
    },
    //工具类
    tool() {
        return {
            //随机生成指定长度的字符串
            randomNumstr(length) {
                if (typeof (length) != "number") {
                    length = 4;
                }
                var numStr = "";
                for (var i = 0; i < length; i++) {
                    numStr += Math.floor(Math.random() * 10)
                }
                return numStr;
            }
        }
    },
    loginFunction() {
        const nameId = this.tool().randomNumstr(4);    //生成随机ID
        const userName = 'wx' + nameId;
        this.data.userInfo.userId = nameId;
        this.data.userInfo.userName = userName;

        const serverInfo = this.data.serverInfo;

        // 设置服务器地址
        CR.SetServerAddr(serverInfo.serverAddr);
        // 登录服务器,md5需要使用第三方插件
        CR.Login(serverInfo.account, md5(serverInfo.password), userName, nameId, '');

    },
    initCrCallback() {
        // 登录服务器成功
        CR.LoginSuccess.callback = (usrID, cookie) => {
            console.log('登录服务器成功...usrId: ' + usrID);
        }

        // 登录服务器失败
        CR.LoginFail.callback = (sdkErr, errDesc) => {
            console.log('登录服务器失败... code:' + sdkErr + ',desc:' + errDesc);
        }

        // 登出服务器成功
        CR.LogoutSuccess.callback = () => {
            console.log('登出服务器成功...');
        }
    }
})

3. 创建视频会话

输入会议标题,创建一个没有密码的视频会话

相关API请参考 创建/销毁视频会议

import CR from '../../utils/CR_Miniapp_SDK.min.js';
const md5 = require('../../utils/md5.js');
Page({
    data: {
        serverInfo: {
            serverAddr: null, // 登录服务器地址
            account: null, // 登录帐号
            password: null, // 登录密码
        }
    },
    onLoad() {
        this.data.serverInfo.serverAddr = 'www.cloudroom.com';
        this.data.serverInfo.account = 'demo@cloudroom.com';
        this.data.serverInfo.password = '123456';
    },
    onReady() {
        this.initCrCallback();//SDK回调函数初始化
        this.createMeeting(); //创建会议,登录后由其他事件调用
    },
    initCrCallback() {
        //创建会议成功
        CR.CreateMeetingSuccess.callback = (meetObj, cookie) => {
            //meetObj 对象包含会议ID、会议密码、会议主题
            console.log(meetObj);
        }

        //创建会议失败
        CR.CreateMeetingFail.callback = (sdkErr, cookie) => {
            console.log('CreateMeetingFail error:' + sdkErr);
        }

        //会议掉线
        CR.LineOff.callback = sdkErr => {
            console.log('LineOff error:' + sdkErr);
        }
    },
    createMeeting(){
        const serverAddr = this.data.serverInfo.serverAddr;
        const account = this.data.serverInfo.account;
        const password = this.data.serverInfo.password;
        CR.CreateMeeting(serverAddr, account, md5(password), "H5_Meeting"); //创建会议接口,参数与登录接口大致相同
    }
})

4. 进入会话

用创建成功的会话信息(会议ID和密码)进入会话,其他用户也是利用此会话信息进入该会话。

相关API请参考 进入/退出/结束会议

import CR from '../../utils/CR_Miniapp_SDK.min.js';
Page({
    data: {
        userInfo: {
            userId: 1001,
            nickName: 'wx1001',
        },
        meetInfo: {
            meetId: '87230652'  //进入的会议ID
        }
    },
    onLoad() {
        CR.SetServerAddr('www.cloudroom.com');    //设置服务器地址
    },
    onReady() {
        this.initCrCallback();//SDK回调函数初始化
        this.enterMeeting(); //创建会议,登录后由其他事件调用
    },
    initCrCallback() {
        //进入会议完成响应
        CR.EnterMeetingRslt.callback = sdkErr => {
            console.log('进入会议的状态码:' + sdkErr);
            if (sdkErr!=0){
                console.log('进入会议失败');
                return;
            }
            console.log('进入会议成功');
        }
    },
    enterMeeting() {
        const userId = this.data.userInfo.userId;
        const nickName = this.data.userInfo.nickName;
        const meetId = this.data.meetInfo.meetId;
        CR.EnterMeeting(meetId, '', userId, nickName,'');  //进入会议,会议号由CreateMeeting回调中取得
    }
})

5. 打开麦克风/摄像头

进入会话成功后,配置并打开自己的麦克风和摄像头

相关API请参考 视频设置开/关摄像头默认视频摄像头

//此案例仅为了演示接口调用,本身不能正常运行
import CR from '../../utils/CR_Miniapp_SDK.min.js';
Page({
    data: {
    },
    onLoad() {
    },
    onReady() {
        CR.OpenVideo(userID); //打开摄像头
        CR.CloseVideo(userID);//关闭摄像头

        CR.OpenMic(userID);   //打开麦克风
        CR.CloseMic(userID);  //关闭麦克风

        CR.SetDefaultVideo(userId); //切换摄像头
    }
})
}

6. 有其他人进入会话

其他人入会的步骤也是上述的[4、5]步,拿到会议信息后进入到他人创建的会议,此步骤的目的是为了实时关注比自己晚进来的人并刷新摄像头画面显示;如果想要获取之前进来的人,可以调用 GetAllMembers 获取会议成员列表.

相关API请参考 有人进入/离开会议通知


/**
*获取所有用户的信息
* @access public
* @return {MemberInfo[]} 返回含多个成员信息
*/    
var meber = CR.GetAllMembers();// 获取所有会员信息

//用户进入会议  相当于第二方监听第三方加入会议
CR.UserEnterMeeting.callback = usrID => {
// 第三方进入的相关操作
}

// 通知某用户离开了会议exitMeeting
CR.UserLeftMeeting.callback = id => {
// 第三方离开的相关操作
}

至此,一个简单的音视频会话就建立起来了。

7.退出会话

在未注销的情况下可反复的进入退出同一个会议。

相关API请参考 进入/退出/结束会议

/**
* 离开会话
* 他人离开会话的回调事件UserLeftMeeting
* @access public
*/    
ExitMeeting()

/* 
* 某用户离开了会议
* @callback UserLeftMeeting
* @param {string} userId - 离开会议的用户ID
*/
UserLeftMeeting.callback = userId => {

}

8. 注销登陆

可重复的登录和注销。

相关API请参考 进入/退出/结束会议登录/注销初始化/反初始化

/** 
*注销本次登陆
*/
Logout()

9.反初始化,退出SDK

执行反初始化后SDK功能不再可用。

相关API请参考 初始化/反初始化

/** 
*反初始化
*/
Uninit();

添加音视频会话功能

添加会议内的高级功能

音视频控制

进入会话后实现设备的加载、选择、设置

  1. 开关麦克风
  2. 监控麦克风状态变化

1.开关麦克风

通过传入参数来控制开关的对象,如果是本地机器上的麦克风,需要传入自己的ID,如果要远程开关他人麦克风,则传入对方的ID
/**
* 打开某用户的麦克风
* 打开某用户的麦克风时,先会进入到AOPENING状态,等服务器处理后才会进入AOPEN状态,此时说话才能被采集到;
* @param {string} userID - 用户的ID
* @access public
*/
OpenMic(userid);
/**
* 关闭某用户的麦克风
* 关麦自己的麦克风操作是立即生效的,本地会立即停止采集;
* @access public
* @param {string} userID - 登录成功后分配的userID
*/
CloseMic(userid);

云端录制

实现摄像头和屏幕录制,并可上传到服务器

  1. 开始云端录制
  2. 更新云端录制内容
  3. 停止云端录制
  4. 获取云端录制状态

1.开始云端录制

//开始云端录制
StartSvrMixer(mutiMixerCfgs, mutiMixerContents,mutiMixerOutputs);

SvrRecordStateChanged.callback = (state, err) => {
    //云端录制状态变化通知
}

SvrRecVideosChanged.callback = jsonContents => {
    //云端录制内容变化通知
}

2.更新云端录制内容

//更新云端录制内容
UpdateSvrMixerContent(jsonContents)

3.停止云端录制

//停止录制
StopSvrMixer();

4.获取云端录制状态

GetSvrMixerState();

聊天

实现会话内文本聊天,如果需要更加丰富的聊天内容,可自己传输文本格式,并进行相关解析

/**
* 发送IM消息
* 响应事件SendIMmsgRlst
* @access public
* @param {string} text - 发送的文本消息
* @param {string} UserID - 目标用户,如果用户ID为空,消息发送给会议内所有用户 
* @param {string} cookie - 自定义用户数据
* @returns {string} - 任务id 
*/  
const SendIMmsgID = SendIMmsg(text,UserID,cookie)
/**
* SDK通知收到IM消息
* @callback NotifyIMmsg
* @param {string} fromUserID - 消息来源
* @param {string} text - 消息内容
* @param {number} sendTime - 消息发送时间戳,从1970开始算起
*/
NotifyIMmsg.callback = (fromUserID,text,sendTime) => {

}

参会成员管理

获取会话内人员及相关信息,得到成员的userID后可以对其进行相关的远程音视频操作

/**
* 获取所有用户的信息  //获取所有参会人
* @access public
* @return {MemberInfo[]} 返回含多个成员信息
*/    
const GetAllMembers = GetAllMembers()
/**
* 获取指定用户的信息 //获取某个参会人的信息
* @access public
* @param {string} userID - 用户ID
* @return {MemberInfo} info - 返回用户userID的成员信息
*/    
const GetMemberInfo = GetMemberInfo(userID)

队列管理

利用队列功能,实现用户分配。使用队列时通常会有两种角色,坐席和客户,队列模块把排队的客户分配给某个服务队列的坐席。

队列功能介绍请参考 队列管理组件

  1. 初始化队列,获取队列数据
  2. 坐席队列操作
  3. 坐席请求用户
  4. 系统自动给坐席分配用户
  5. 客户排队操作

1.初始化队列,获取队列数据

在登录成功后初始化队列数据
/**
* 初始化用户队列功能数据。//可在登录成功后初始化队列数据
* 操作完成回调InitQueueDatRslt,初始化成功后才可获取队列队列相关信息。
* @access public
*/
InitQueueDat()
/**
* 队列初始化操作结果
* @callback InitQueueDatRslt
* @param {number} sdkErr - 操作结果代码,定义见cr/error
*/
InitQueueDatRslt.callback = (sdkErr) => {

}

2.坐席队列操作

坐席角色开始和停止服务队列,以及操作后队列状态的变化
/**
* 开始服务某个队列(可以多次调用,开启对多个队列的服务) //开始服务队列
* 操作回调StartServiceRslt
* 开启成功后:
* a. 如果没有开启免打挽,那么系统会自动分配客户:AutoAssignUser(user);
* b. 如果开启免打挽,系统就不会分配客户,如需服务客户可调用:reqAssignUser。
* @access public
* @param {string} queID  - 队列ID
* @param {string} cookie - 自定义数据 (在回调时,回传给调用者)
*/
StartService(queID,cookie)
/**
* 停止服务某个队列 //停止服务队列
* 操作完成回调StopServiceRslt
* @access public
* @param {string} queID  - queID 队列ID
* @param {string} cookie - cookie自定义数据 (在回调时,回传给调用者)
*/
StopService(queID,cookie)
/* 开始服务队列操作结果
* @callback StartServiceRslt
* @param {number} queID  - 服务的队列ID
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {string} cookie - 自定义用户数
*/
StartServiceRslt.callback = (queID,sdkErr,cookie) => {

}
/**
* 停止服务队列操作结果
* @callback StopServiceRslt
* @param {number} queID  - 服务的队列ID
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {string} cookie - 自定义用户数
*/
StopServiceRslt.callback = (queID,sdkErr,cookie) => {

}
/**
* 队列状态变化通知
* @callback QueueStatusChanged
* @param {QueStatus} queStatus  -队列状态
*/
QueueStatusChanged.callback = (queStatus) => {

}

3.坐席请求用户

在设置DND免打扰状下态,系统不再自动分配,需要手动申请用户
/**
* 设置免打扰状态。
* 操作成功则回调SetDNDStatusSuccess,失败则回调SetDNDStatusFail。
* @access public
* @param {number} DNDStatus - 0代表关闭免打扰, 其它值代表开启免打扰,含义自由定义
* @param {string} cookie -  自定义数据 (在回调时,回传给调用者)
*/
SetDNDStatus(DNDStatus,cookie)
/**
* 请求分配一个客户
* 当关闭免打扰时,系统将自动分配客户,无需调用此函数;
* 当开启免打扰时,系统不再自动分配客户,座席如需服务客户可使用此函数分配;
* @access public
* @param {string} cookie - 自定义数据 (在回调时,回传给调用者)
*/
ReqAssignUser(cookie)
/**
* 请求分配客户操作结果
* @callback ReqAssignUserRslt
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {QueUser} user  - 队列用户信息
* @param {string} cookie - 自定义用户数
*/
ReqAssignUserRslt.callback = (sdkErr,user,cookie) => {

}

4.系统自动给坐席分配用户

系统自动分配的用户在坐席还未选择接受或拒绝时,系统可以撤回分配
/* 系统自动安排客户
* @callback AutoAssignUser
* @param {QueUser} user - 队列用户信息
* 如果想停止系统的自动分配,请通setDNDStatus设置免打扰功能
*/
AutoAssignUser.callback = function(user){

}
/**
* 响应分配客户操作结果
* @callback ResponseAssignUserRslt
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {string} cookie - 自定义用户数
*/
ResponseAssignUserRslt.callback = (sdkErr,cookie) => {

}
/**
* 系统取消已经安排的客户
* @callback CancelAssignUser
* @param {string} queID - 服务的队列
* @param {string} userid - 用户id
*/
CancelAssignUser.callback = (queID,userid) => {

}

5.客户排队操作

客户选择一个队列进行排队,每次只能排一个队列
/**
* 客户开始排队
* 操作完成回调StartQueuingRslt
* @access public
* @param {string} queID  - queID 队列ID
* @param {string} cookie - cookie自定义数据 (在回调时,回传给调用者)
*/
StartQueuing(queID,cookie)
/**
* 客户停止排队
* 操作完成回调StopQueuingRslt
* @access public
* @param {string} cookie - cookie自定义数据 (在回调时,回传给调用者)
*/
StopQueuing(cookie)
/**
* 开始排队操作结果
* @callback StartQueuingRslt
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {string} cookie - 自定义用户数据
*/
StartQueuingRslt.callback = (sdkErr,cookie) => {

}
/**
* 停止排队操作结果
* @callback CRVideo.CbProxy~StopQueuingRslt
* @param {number} sdkErr - 操作结果代码,定义见cr/error
* @param {string} cookie - 自定义用户数
*/
StopQueuingRslt.callback = (sdkErr,cookie) => {

}
/**
* 队列状态变化通知
* @callback QueueStatusChanged
* @param {QueStatus} queStatus  -队列状态
*/
QueueStatusChanged.callback = queStatus => {

}
/**
* 排队信息变化通知
* @callback QueuingInfoChanged
* @param {QueInfo} queuingInfo - 队列信息
*/
QueuingInfoChanged.callback = queuingInfo => {

}

呼叫他人

实现用户到用户的呼叫,以此来实现会话信息的分发以及相关信息的传递

  1. 主叫
  2. 被叫

1.主叫

呼叫发起方
/**
* 发起呼叫,邀请用户参加视频会话。
* 操作成功则回调CallSuccess,失败则回调CallFail。
* 呼叫时,对方迟迟不响应,30秒后系统自动结束呼叫。
* @access public
* @param {string} calledUserID -  被叫用户的账户ID
* @param {MeetInfoObj} meetObj - 会议信息
* @param {string} usrExtDat - 自定义扩展参数
* @param {string} cookie - 自定义数据(在回调时,回传给调用者)
* @returns {string} 返回本次呼叫标识码(呼叫ID)
*/    
Call(calledUserID,meetObj,usrExtDat,cookie)
/**
* 挂断正在进行的视频呼叫或视频通话
* 操作成功则回调HangupCallSuccess,失败则回调HangupCallFail。
* @access public
* @param {string} callID  - 呼叫ID
* @param {string} usrExtDat - 自定义扩展参数
* @param {string} cookie - 自定义数据 (在回调时,回传给调用者)
*/    
HungupCall(callID,usrExtDat,cookie)
/**
* 呼叫他人操作成功响应
* @callback CallSuccess
* @param {string} callID - 呼叫全局标识 
* @param {string} cookie - 自定义用户数据
*/
CallSuccess.callback = (callID,callback) => {

}
/**
* 呼叫他人操作失败响应
* @callback CRVideo.CbProxy~CallFail
* @param {string} callID - 呼叫全局标识 
* @param {number} sdkErr - 操作失败代码,定义见cr/error
* @param {string} cookie - 自定义用户数据
*/
CallFail.callback = (callID,sdkErr,cookie) => {

}
/**
* SDK通知自己视频呼叫被对方接受
* @callback NotifyCallAccepted
* @param {string} callID - 呼叫全局标识 
* @param {MeetInfoObj} meetObj - 会议信息
* @param {string} usrExtDat - 自定义扩展参数
*/
NotifyCallAccepted.callback = (callID,meetObj,usrExtDat) => {

}

/**
* SDK通知自己呼叫被对方拒绝
* @callback NotifyCallRejected
* @param {string} callID - 呼叫全局标识 
* @param {number} sdkErr - 呼叫被对方拒绝的原因代码,定义见cr/error
* @param {string} usrExtDat - 自定义扩展参数
*/
NotifyCallRejected.callback = (callID,sdkErr,usrExtDat) => {

}

2.被叫

被呼叫方
/**
* SDK通知自己被呼叫
* @callback NotifyCallIn
* @param {string} callID - 呼叫全局标识 
* @param {MeetInfoObj} meetObj - 会议信息
* @param {string} callerID - 呼叫人员的标识ID
* @param {string} usrExtDat - 自定义扩展参数
*/
NotifyCallIn.callback = (callID,meetObj,callerID,usrExtDat) => {

}

透明传输

独立于会话的传输功能,对SDK透明,发送对象必须要先成功登录

  1. 发送命令、文本、文件
  2. 收到命令、数据、文件

1.发送命令、文本

小数据走命令接口,大数据走文本接口,命令的发送不可以被取消,也没有进度通知
/**
* 发送小块数据(一次性发送不会有进度通知,发送结果事件SendCmdRlst,SendCmd不能被CancelSend)
* @access public
* @param {string} targetUserId  - 目标用户ID
* @param {string} data - 发送的数据
* @returns {string} 分配的任务ID
*/  
var sendCmdID = SendCmd(targetUserId,data);

/**
* 发送大块数据(分块发送,进度通知事件SendProgress,发送结果事件SendBufferRlst,取消发送CancelSend)
* @access public
* @param {string} targetUserId  - 目标用户ID
* @param {string} data - 发送的数据
* @returns {string} 分配的任务ID
*/  
var sendBufferID = SendBuffer(targetUserId,data)
/**
* 取消数据发送
* 操作完成则回调CancelSendRlst。
* @access public
* @param {string} taskID - 任务ID
*/
CancelSend(taskID)
/**
* 发送数据时,SDK通知发送进度
* @callback SendProgress
* @param {string} taskID - 发送任务id
* @param {number} sendedLen  - 已发送的数据长度
* @param {number} totalLen   - 需要发送的总长度
* @param {string} cookie - 自定义用户数据
*/
SendProgress.callback = (taskID,sendedLen,totalLen,cookie) => {

}
/**
* 发送数据时,SDK通知发送结果
* @callback SendCmdRlst
* @param {string} taskID - 发送任务id
* @param {number} sdkErr - 操作失败代码,定义见cr/error
* @param {string} cookie - 自定义用户数据
*/
SendCmdRlst.callback = (taskID,sdkErr,cookie) => {

}
/**
* 发送数据时,SDK通知发送结果
* @callback SendBufferRlst
* @param {string} taskID - 发送任务id
* @param {number} sdkErr - 操作失败代码,定义见cr/error
* @param {string} cookie - 自定义用户数据
*/
SendBufferRlst.callback = (taskID,sdkErr,cookie) => {

}
/**
* 取消发送响应
* @callback CancelSendRlst
* @param {string} taskID - 发送任务id
* @param {number} sdkErr - 操作失败代码,定义见cr/error
* @param {string} cookie - 自定义用户数据
*/
CancelSendRlst.callback = (taskID,sdkErr,cookie) => {

}

2.收到命令、数据

收到别人发送数据的通知
/**
* SDK通知收到小块数据
* @callback NotifyCmdData
* @param {string} sourceUserId - 数据来源
* @param {string} data - 数据
*/
NotifyCmdData.callback = (sourceUserId,data) => {

}
/**
* SDK通知收到大块数据
* @callback NotifyBufferData
* @param {string} sourceUserId - 数据来源
* @param {string} data - 数据
*/
NotifyBufferData.callback = (sourceUserId,data) => {

}
/**
* SDK通知收到文件数据(收到的文件生成在系统临时目录下,请尽快移走对应文件)
* @callback NotifyFileData
* @param {string} sourceUserId - 数据来源
* @param {string} tmpFile - 临时文件,不需要时,请移除或删除对应文件
* @param {string} orgFileName  - 源始文件名 
*/
NotifyFileData.callback = (sourceUserId,tmpFile,orgFileName) => {

}
© Carter all right reserved,powered by Gitbook文件修订时间: 2019-08-08 14:15:49

results matching ""

    No results matching ""