H5-SDK

# 实现音视频通话

  • 快速创建并进入房间，开始音视频通话；代码部分均为 js 代码，详细代码请参考 SDK包 目录下 Demo 源代码。

  • 请先准备准备工作中的相关内容：1.下载SDK， 2.准备运行环境，以及连接相关的麦克风摄像头并确认设备工作正常。

基本步骤如下：

  1. 初始化SDK
  2. 登录连接视频服务器
  3. 创建房间
  4. 进入房间
  5. 打开麦克风/摄像头
  6. 观看他人视频
  7. 退出房间
  8. 注销登录
  9. 反初始化，退出SDK

1. 初始化SDK

初始化是整个SDK的使用基础，通常在程序启动的时候进行初始化(CRVideo_Init)，退出后进行反初始化(CRVideo_Uninit)，整个程序的生命周期中只进行一次初始化和反初始化。

// 初始化接口为Promise接口，请注意调用方式如下：
CRVideo_Init(initObj).then(res => {
    // 初始化成功的回调，继续设置服务器地址及登录等操作，见 第2步...
}, err => {
    // 初始化失败的回调，会返回对应的错误码
});

相关API请参考:

2. 登录连接视频服务器

设置视频服务器地址，然后使用appID和md5加密后的appSecret登录。(获取App ID及App Secret)

  • 调用接口：
// 设置服务器地址，使用云屋的云服务时填 sdk.cloudroom.com;使用私有化部署的服务器时要填部署的服务器地址:端口；此处以云屋的云服务为例。
CRVideo_SetServerAddr("sdk.cloudroom.com");  // 云屋云服务器
// CRVideo_SetServerAddr("10.8.8.220:2726");  // 私有化部署服务器

//登录鉴权
CRVideo_Login(appID, md5(appSecret), nickName, UID, userAuthCode, cookie);  // 使用appID+appSecret鉴权
// CRVideo_UpdateToken(Token, nickName, UID, userAuthCode, cookie); // 使用token鉴权
  • 回调通知，
// 登录成功
CRVideo_LoginSuccess.callback = function(UID,cookie){
    // 登录成功，开始创建房间，见第3步
}

// 登录失败
CRVideo_LoginFail.callback = function(sdkErr,cookie){
    // 登录出错，可以弹出错误提示，或调用登录接口再次重试登录
}

// 登录掉线
CRVideo_LineOff.callback=function(sdkErr){
    // 系统掉线，可尝试重新登录，或弹出提示
    // token失效时，若没有及时更新token，系统将会强制掉线
}

相关API请参考:

3. 创建房间

创建一个没有密码的，固定的房间

  • 调用接口：
//创建房间
CRVideo_CreateMeeting()
  • 回调通知，
//创建房间成功
CRVideo_CreateMeetingSuccess.callback=function(meetObj,cookie){
    //创建房间成功，可以进入房间
}
//创建房间失败
CRVideo_CreateMeetingFail.callback = function(sdkErr,cookie){
    //创建房间失败，可以弹出错误提示
}

相关API请参考:

4. 进入房间

用创建成功的房间信息（房间ID）进入房间，其他用户也是利用此房间信息进入该房间。

  • 调用接口：
//进入房间
CRVideo_EnterMeeting3(meetID, cookie);
  • 回调通知，
//进入房间完成响应
CRVideo_EnterMeetingRslt.callback = function(sdkErr) {
    if(sdkErr === 0) {
         console.log("进入房间成功，可以继续下面第5步……");
    } else {
        console.log("进入房间失败，错误码："+ sdkErr);
    }
}
//监控房间掉线
CRVideo_MeetingDropped.callback = function() {
    // 从房间中掉线，需要再次进入房间或退回进入房间前的状态
}

相关API请参考:

5. 打开麦克风/摄像头

接第4步，进入房间成功后，打开自己的麦克风和摄像头，以便本地、远端显示自己的视频图像

// 打开房间内某个成员的麦克风（可以是自己）
CRVideo_OpenMic(UID)

// 打开房间内某个成员的摄像头（可以是自己）
CRVideo_OpenVideo(UID)

// 创建成员视频UI显示组件，并订阅某个成员的视频画面（可以是自己）
var myVideoUI = CRVideo_CreatVideoObj();  // 调用接口，创建视频ui组件
document.body.appendChild(myVideoUI.handler()) // 获取组件中的DOM并显示在页面上
myVideoUI.setVideo(UID);    // 将用户的视频画面挂载在UI组件上，传入某个成员（自己）的UID

相关API请参考：

6. 观看他人视频

成功进入房间后，根据他人登录id ，设置并观看他人视频图像

  • 接口调用：
// 创建成员视频UI显示组件，并订阅某个成员的视频画面
var otherVideoUI = CRVideo_CreatVideoObj();  // 调用接口，创建视频ui组件
document.body.appendChild(otherVideoUI.handler()) // 获取组件中的DOM并显示在页面上
otherVideoUI.setVideo(UID);    // 将成员的视频画面挂载在UI组件上，传入他人的UID。UID可通过接口 CRVideo_GetAllMembers 获取

相关API请参考：

7.退出房间

// 退出房间
CRVideo_ExitMeeting()

// 销毁房间，房间也可以不销毁，以便一直存在，可以随时再次进入
CRVideo_DestroyMeeting()

相关API请参考:

8. 注销登录

// 注销本次登录
CRVideo_Logout()

相关API请参考:

9.反初始化，退出SDK

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

// 反初始化
CRVideo_Uninit();

相关API请参考:

← 设置视频属性 →