# 实现音视频通话

  • 学习本章节前,前务必阅读完准备工作创建第一个小程序章节

  • 通篇将SDK文件引入定义为"CR"

  • 快速创建并进入房间,开始音视频通话;代码部分均为 js 代码,详细代码请参考SDK包里的demo。

# 基本步骤

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

# 1. 初始化SDK

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

    const sdkErr = CR.Init(); //初始化SDK,返回状态码
    if (sdkErr === 0) {
        console.log('初始化成功');
        // 可以继续设置服务器及登录操作
    } else {
        console.log(`初始化失败,错误码:${sdkErr}}`);
    }

相关API请参考:

# 2. 登录服务器

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

  • 调用接口:
    //设置服务器地址,如果使用云屋的云服务时填sdk.cloudroom.com
    //使用私有化部署的服务器时要填部署的服务器地址;此处以云屋的云服务为例。
    CR.SetServerAddr('sdk.cloudroom.com');

    //登录接口,推荐使用Token鉴权机制登录,参考CR.LoginByToken
    CR.Login(AppID, md5(AppSecret), nickName, UID);
  • 回调通知:
//登录成功
CRVideo_LoginSuccess.callback = (userID,cookie) => {
   //登录成功,开始创建房间,见 第3步
}

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

//登录掉线
CRVideo_LineOff.callback = sdkErr => {

}

相关API请参考:

# 3. 创建房间

  • 调用接口:
//创建房间
CR.CreateMeeting()
  • 回调通知:
//创建房间成功
CR.CreateMeetingSuccess.callback = (meetObj,cookie) => {
    //创建成功,可以进入房间
}
//创建房间失败
CR.CreateMeetingFail.callback = (sdkErr,cookie) => {
    //创建失败,可以弹出错误提示,不能再执行 进入房间
}

相关API请参考:

# 4. 进入房间

用创建成功的房间信息(房间ID)进入房间,其他用户也是利用此房间信息进入该房间。

  • 调用接口:
//进入房间
CR.EnterMeeting2(meetID, UID, nickName, cookie);
  • 回调通知:
//进入房间完成响应
CR.EnterMeetingRslt.callback = (sdkErr, cookie) => {
    if(sdkErr === 0){
        console.log("进入房间成功,可以继续下面第5步……");
    }else{
        console.log(`进入房间失败,错误码:${sdkErr}`);
    }
}
//监控房间掉线
CR.MeetingDropped.callback = () => {
    //可重新进入会议
}

相关API请参考:

# 5. 打开麦克风/摄像头/房间声音

紧接第4步,进入房间成功后,可以进行跳转页面操作,导入推流拉流组件,以便本地、远端显示自己的视频图像
CRVideoPusher 是本地视频、麦克风推流组件
CRAudioPlayer 是会议内音频拉流组件,会议内成员的麦克风声音通过该组件输出

  • json代码
    {
        "usingComponents": {
            "CRVideoPusher": "../../utils/CRSDK/components/CRVideoPusher/CRVideoPusher",    //声明音视频推流组件,需定位到对应目录
            "CRAudioPlayer": "../../utils/CRSDK/components/CRAudioPlayer/CRAudioPlayer",    //声明音频拉流组件,需定位到对应目录
        }
    }
  • wxml代码
<view style='width: 300rpx;height: 100rpx'>
    <!-- 组件宽高会根据父元素宽高继承 -->
    <!-- 音视频推流组件 userInfo传入成员信息,config传入配置信息,debug是否开启调式,详细请参考组件文档 -->
    <CRVideoPusher userInfo='{{myUserInfo}}' config='{{CRVideoPusher}}' wx:if='{{myUserInfo}}' debug='{{true}}'></CRVideoPusher>
</view>

<!-- 音频拉流组件 -->
<CRAudioPlayer config='{{CRAudioPlayer}}' debug='{{false}}' wx:if='{{CRAudioPlayer}}'></CRAudioPlayer>
  • javascript代码
    //音视频推流组件
    const CRVideoPusher = {
        orientation: 'vertical', // vertical,horizontal,
        aspect: '3:4', // 宽高比,可选值有 3:4, 9:16
        beauty: 0, // 美颜,取值范围 0-9 ,0 表示关闭
        whiteness: 0, // 美白,取值范围 0-9 ,0 表示关闭
        devicePosition: 'front', // 前置或后置,值为front, back, 此属性不支持动态修改,如需切换摄像头请调用api
        muted: false, //默认静音,此属性不支持动态修改,如需开关麦克风请调用api
        enableCamera: true, //默认打开摄像头,此属性不支持动态修改,如需开关摄像头请调用api
        minBitrate: 200, //	最小码率
        maxBitrate: 800, // 最大码率
    }
    this.setData({CRVideoPusher}); //将配置渲染到页面,后续会传入SDK组件

    const myUID = 'wx_10086'   //已知自己的UID
    const allMembers = CR.GetAllMembers(); // 查询到会议内所有会议成员

    let myUserInfo = allMembers.find(item => item.userID === myUID);  //在所有成员里查找到自己的成员信息
    myUserInfo = CR.GetMemberInfo(myUID); // 也可以通过GetMemberInfo获取到自己的成员信息

    this.setData({myUserInfo}); //将 myUserInfo 渲染为到页面,即可打开麦克风、摄像头设备

    //-----------------分割线-------------

    //音频拉流组件
    const CRAudioPlayer = {
        soundMode: 'speaker', // 声音输出方式,有效值为 speaker(扬声器)、ear(听筒)
        autoPauseIfNavigate: false, // 当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放
        autoPauseIfOpenNative: false, // 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
    }
    this.setData({CRAudioPlayer}); //将配置渲染到页面,后续会传入SDK组件

相关API请参考:

# 6. 观看他人视频

成功进入房间后,查询他人的成员信息并setData到SDK组件观看他人视频图像

  • json代码
    {
        "usingComponents": {
            "CRVideoPlayer": "../../utils/CRSDK/components/CRVideoPlayer/CRVideoPlayer" //声明视频拉流组件,需定位到对应目录
        }
    }
    //视频播放组件默认配置,通过修改data,组件实施更新
    const CRVideoPlayer = {
        orientation: 'vertical', // 画面方向,可选值有 vertical,horizontal	
        objectFit: 'fillCrop', // 填充模式,可选值有 contain,fillCrop	
        autoPauseIfNavigate: true, // 当跳转到其它小程序页面时,是否自动暂停本页面的实时音视频播放
        autoPauseIfOpenNative: true, // 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
    }
    this.setData({CRVideoPlayer});  //配置

    const UID = 'wx_10086'   //已知他人的UID
    const otherUserInfo = CR.GetMemberInfo(UID); // 可以通过GetMemberInfo获取到自己的成员信息

    this.setData({otherUserInfo}); //将 myUserInfo 渲染为到页面,即可打开麦克风、摄像头设备

  • wxml代码
<view style='width: 300rpx;height: 100rpx'>
    <!-- 组件宽高会根据父元素宽高继承 -->
    <!-- 视频拉流组件 userInfo传入成员信息,config传入配置信息,debug是否开启调式,详细请参考组件文档 -->
    <CRVideoPlayer userInfo='{{otherUserInfo}}' config='{{CRVideoPlayer}}' wx:if='{{otherUserInfo}}' debug='{{true}}'></CRVideoPlayer>
</view>

# 7. 退出房间

//退出房间
CR.ExitMeeting()

相关API请参考:

# 8. 注销登录

//注销本次登录
CR.Logout()

相关API请参考:

# 9. 反初始化,退出SDK

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

//反初始化
CR.UnInit();

相关API请参考: