输入关键词搜索,支持 AI 答疑

客户端实现

更新时间: 2024/08/02 11:26:48

网易云信音视频通话 2.0 产品为您提供开源的的多人视频通话示例项目,您可以参考示例项目和本文档快速实现多人视频通话的主要流程步骤,体验 NERTC SDK 的一对一实时音视频通话的效果。

前提条件

请确保您已完成以下操作:

注意事项

集成开发阶段,建议在控制台中将指定应用的鉴权方式设置为调试模式,此时无需传入 Token 即可加入房间。但是出于安全性考虑,应用正式上线前,请在控制台中将指定应用的鉴权方式改回安全模式。

实现多人视频通话

1 初始化 SDK

  1. (可选)设置音视频参数和属性。

    在初始化之前,您可以根据不同场景下的用户喜好与需求,设置音视频的基本属性。音频可设置采样率、码率和编码模式等,视频可设置分辨率、帧率、码率的档位,裁剪模式等参数。

  2. 初始化 SDK。

    执行 createClient 方法创建 client 实例。

    // 设置音视频参数和属性
    let quality = 'speech_low_quality'
    localStream.setAudioProfile(quality)
    
    //示例
    //创建client实例
    rtc.client = WebRTC2.createClient({
        appkey: 'xxx', //您的 appkey
        debug: true, //是否开启调试日志
    });
    

2 开始视频通话

  1. 加入房间。

    完成初始化后,调用 client.join 方法加入房间。SDK发起加入房间请求后,服务器会进行响应,开发者可以通过 NERtcCallback 的 onJoinChannel 回调监听加入房间的结果。

    您也可以通过信令实现通话中的邀请机制。

  2. 设置本地视图。

    初始化成功后,可以设置设置本地视图,预览本地图像。加入房间后,可以执行 publish 方法发布自己的多媒体流至流媒体,供其他用户订阅。

    1. 调用 enableLocalVideo 方法启用视频模块。
    2. 调用 setupLocalVideoCanvas 方法设置本地视图。
  3. 设置远端视图。

    视频通话中,如果需要看到其他用户,需要手动为其设置远端用户视图。

    1. 通过以下回调获取相关信息:

      • peer-online:监听远端用户加入通话房间的事件,并抛出对方的 uid。当本端加入房间后,也会通过此回调抛出通话房间内已有的其他用户。
      • stream-added:监听远端用户发布视频流的事件,回调中携带对方的 uid 与发布的视频分辨率。
    2. 在监听到远端用户发布视频流后,本方可以通过 subscribe 方法对其发起视频流的订阅,来将对方的视频流渲染到视频画布上。

    3. 订阅成功后,可进一步在 stream-subscribed 回调中播放远端视频流。

    // 加入房间
    NERtcEx.getInstance().joinChannel(token,channelName,uid);
    
    //初始化本地流并且发布
    function initLocalStream() {
        //创建本端stream实例,销毁前无需重复创建
        rtc.localStream = WebRTC2.createStream({
        uid: uid,                      // 本端的uid
        audio: true,                   // 是否从麦克风采集音频
        microphoneId: microphoneId,    // 麦克风设备 deviceId,通过 getMicrophones() 获取
        video: true,                   // 是否从摄像头采集视频
        cameraId: cameraId             // 摄像头设备 deviceId,通过 getCameras() 获取
        })
    
        //启动本地音视频流,销毁前无需重复初始化
        rtc.localStream.init().then(()=>{
        console.warn('音视频初始化完成,播放本地视频')
        //用于播放视频的div元素
        let div = document.getElementById('local-container')
        //开始播放本地视频流
        rtc.localStream.play(div)
        //设置播放的视频容器大小    
        rtc.localStream.setLocalRenderMode({
            width: 180,
            height: 150,
            cut: true    // 是否裁剪
        })
    
        // 将本地音视频流发布至云信服务器,加入房间前不用执行此方法。
        rtc.client.publish(rtc.localStream).then(()=>{
            console.warn('本地 publish 成功')
        })
        })
    }
    
    // 监听远端用户进入频道
    void onUserJoined(long uid);
    
    //设置远端用户视频画布
    public abstract int setupRemoteVideoCanvas(com.netease.lava.api.IVideoRender render, long uid);
    
    // 监听远端用户视频流发布
    void onUserVideoStart(long uid, int maxProfile);
    
    // 阅此远端用户的视频流
    public abstract int subscribeRemoteVideoStream(long uid,
                                                NERtcRemoteVideoStreamType                                                  streamType,
                                                boolean subscribe);
    

3 (可选)附加功能

  1. 通话中质量监测

    NERTC SDK 支持将关键的音视频状况、网络状况、设备状态的相关指标实时回调给 APP 应用层,应用层可以将收到的数据进行展示或统计。多人视频通话 Demo 中支持实时查看当前上下行网络状态、通话质量等信息。

    您可以关注 network-quality 等回调,并在应用层向用户展示本地用户的上下行网络质量相关的统计数据。

  2. 第三方美颜

    NERTC SDK 提供了采集数据回调的 API 方法,帮助您轻松接入第三方专业美颜滤镜厂商,以完善业务场景。NERTC SDK 提供 setVideoCallback 接口用于设置相机采集数据的回调,APP 在美颜后将数据通过 NERtcVideoCallback 返回给 SDK,SDK 对美颜后的数据进行预览以及编码发送。

4 结束视频通话

  1. 退出房间。

    根据场景需要,如结束通话、关闭 App 或 App 切换至后台时,调用 leave 离开当前视频通话房间。

  2. 销毁实例。

    当确定 App 短期内不再使用音视频通话实例时,可以通过 destroy() 接口释放对应的对象资源。

    // 退出通话房间
    //用户无需做一些清除动作,sdk会自动做清除逻辑
    rtc.client.leave()
    // 销毁实例
    rtc.client.destroy()
    
此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 注意事项
  • 实现多人视频通话
  • 1 初始化 SDK
  • 2 开始视频通话
  • 3 (可选)附加功能
  • 4 结束视频通话