实现音视频通话

更新时间: 2024/09/18 16:26:13

网易云信音视频通话产品的基本功能包括高质量的实时音视频通话。当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程。本文档为您展示音视频通话提供的基本业务流程。

前提条件

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

实现音视频通话

本节主要介绍如何使用 NERTC SDK 实现音视频通话。

1. 引用头文件

在您的工程中对应的文件里添加如下代码引入头文件:

javascriptconst NERtcSDK = require('nertc-electron-sdk').default

2. 初始化

在操作 SDK 接口前,需要完成初始化。

  1. 调用 NERtcEngine() 构造创建一个 NERtcEngine 实例。
  2. 调用 initialize 方法完成初始化。
cpp// 创建 RTC 引擎对象并返回对象。
const nertcEngine = new NERtcSDK.NERtcEngine()
let context = {}
// 设置已开通音视频功能的云信应用的AppKey。
context.app_key = ''
// 设置日志目录的完整路径,采用UTF-8 编码。可选。
context.log_dir_path = ''
// 设置日志级别,默认级别为 kNERtcLogLevelInfo。
context.log_level = log_level
// 指定 SDK 输出日志文件的大小上限,单位为 KB。如果设置为 0,则默认为 20 M。
context.log_file_max_size_KBytes = log_file_max_size_KBytes
// 设置SDK向应用发送回调事件的通知,此处只列举一个
nertcEngine.on('onError', (errorCode, msg) => {
  
})
// 初始化 NERTC SDK 服务。
if (0 !== nertcEngine.initialize(context)) {
  //TODO
}

3. 设置本地视图

初始化成功后,可以设置本地视图,来预览本地图像。您可以在加入房间之前预览,或在加入房间后预览。

  • 加入房间前预览。

    1. 通过 setupLocalVideoCanvasstartVideoPreview 方法,在加入房间前设置本地视图,预览本地图像。
    javascript// 示例
    // 设置本地视频画布
    let canvas = {}
    canvas.view = document.getElementById('localView')
    // 设置视频缩放模式。 TODO
    // canvas.scaling_mode = mode
    this.nertcEngine.setupLocalVideoCanvas(canvas)
    // 开启本地预览
    this.nertcEngine.startVideoPreview()
    
    1. 若要结束预览,或者准备加入房间时,调用 stopVideoPreview 停止预览。
  • 加入房间后预览。

    在成功加入房间后,通过 enableLocalVideo 方法进行视频的采集发送与预览。

    javascript// 示例
    // 设置本地视频画布
    let canvas = {}
    canvas.view = document.getElementById('localView')
    // 设置视频缩放模式。 TODO
    // canvas.scaling_mode = mode
    this.nertcEngine.setupLocalVideoCanvas(canvas)
    // 启动视频流
    this.nertcEngine.enableLocalVideo(true);
    

4. 加入房间

加入房间前,请确保已完成初始化相关事项。

通过 joinChannel 方法加入房间。

cpp// 示例
this.nertcEngine.joinChannel(token, channel_name, uid);

重要参数说明

参数 说明
token 安全认证签名(NERTC Token)。可设置为:
  • null。调试模式下可设置为 null。安全性不高,建议在产品正式上线前在云信控制台中将指定应用的鉴权方式恢复为默认的安全模式。
  • 已获取的NERTC Token。安全模式下必须设置为获取到的 Token 。若未传入正确的 Token 将无法进入房间。

    推荐使用安全模式。

channel_name 房间名称,长度为 1 ~ 64 字节。目前支持以下 89 个字符:a-z, A-Z, 0-9, space, !#$%&()+-:;≤.,>? @[]^_{|}~"。
设置相同房间名称的用户会进入同一个通话房间。
您也可以在加入通道前,通过创建房间接口创建房间。加入房间时,若传入的 {channelName} 未事先创建,则云信服务器内部将为其自动创建一个名为 {channelName} 的通话房间。
uid 用户的唯一标识 id,房间内每个用户的 uid 必须是唯一的。

SDK发起加入房间请求后,服务器会进行响应,开发者可以在初始化时调用 nertcEngine.on 接口监听 onJoinChannel 回调监听加入房间的结果,同时该回调会抛出当前通话房间的 channelId 与加入房间总耗时(毫秒);其中 channelId 即音视频通话的 ID,建议您在业务层保存该数据,以便于后续问题排查。

5. 设置远端视图

互动直播过程中,除了要显示本地的视频画面,通常也要显示参与互动的其他连麦者/主播的远端视频画面。

  1. 通过 nertcEngine.on 以下回调获取相关信息:
  • onUserJoined:监听远端用户加入通话房间的事件,并抛出对方的 uid。当本端加入房间后,也会通过此回调抛出通话房间内已有的其他用户。
  • onUserVideoStart :监听远端用户发布视频流的事件,回调中携带对方的 uid 与发布的视频分辨率。
  1. 在监听到远端用户加入房间或发布视频流后,本方可以通过 setupRemoteVideoCanvas 方法设置远端用户视频画布,用于显示其视频画面。
javascript// 示例
// 设置本地视频画布
let canvas = {}
canvas.view = document.getElementById(remoteUid)
// 设置视频缩放模式。 TODO
// canvas.scaling_mode = mode
this.nertcEngine. setupRemoteVideoCanvas(uid, canvas)
  1. 在监听到远端用户发布视频流后,本方可以通过 subscribeRemoteVideoStream 方法对其发起视频流的订阅,来将对方的视频流渲染到视频画布上。
javascript// 示例
// 订阅指定用户的 kNERtcRemoteVideoStreamTypeHigh(0) 类型的视频流
this.nertcEngine.subscribeRemoteVideoStream(uid, 0, true)

6. 音频流

本地音频的采集发布和远端音频订阅播放默认启动,正常情况下无需开发者主动干预。

7. 退出通话房间

通过 leaveChannel 接口退出通话房间。

javascript // 示例
this.nertcEngine.leaveChannel();

真正退出房间后,开发者可以通过初始化时调用 nertcEngine.on 接口监听 onLeaveChannel 的事件。

8. 销毁实例

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

javascript// 示例
this.nertcEngine.release();
此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 实现音视频通话
  • 1. 引用头文件
  • 2. 初始化
  • 3. 设置本地视图
  • 4. 加入房间
  • 5. 设置远端视图
  • 6. 音频流
  • 7. 退出通话房间
  • 8. 销毁实例