实现单聊通话 - 音视频呼叫（呼叫组件）

开发者中心

音视频呼叫（呼叫组件）

集成开发

实现单聊通话

更新时间： 2025/10/22 18:12:24

本文介绍如何通过网易云信 NERTCCallkit 呼叫组件（V2）实现单聊（1 对 1）通话。

注意事项

针对组件中的回调信息，开发者要做好相应回调数据的上报及存储，以便于后期上线之后排查问题。
@xkit-yx/call-kit 自 3.0.0 版本开始，基于 NIM SDK 10.x.x+ 版本，请根据完成 NIM SDK 的初始化与登录后，将 nim 实例传给呼叫组件，即可跑通新版呼叫组件。单聊通话 Demo 请参考 GitHub 项目示例项目源码。

基本概念

account/accId：IM 账号 ID，用于登录 IM。注册 IM 账号时，IM 服务器会返回对应的账号 ID和密钥（Token），应用客户端需要负责保存账号和 IM Token 的映射关系。
Token：呼叫组件中涉及的 Token 包括 IM Token，用于登录 IM 时进行 IM 账号鉴权。应用服务器调用 IM 服务器的注册账号 API，获取的 IM Token。

准备工作

根据本文操作前，请确保您已经完成了以下设置：

开发环境要求 Node 14.16.0 及以上版本。
在网易云信控制台创建应用，并获取了对应的 App Key。详细操作请参考创建应用。
在网易云信控制台开通以下产品或功能，开通服务的操作流程请参考开通服务。
- IM 即时通讯
- 信令
- 音视频通话 2.0
- 音视频通话 2.0 产品的话单功能

集成组件（含 UI）

呼叫组件提供了含 UI 的 React 组件，方便用户快速接入。

UI 组件包括了注册和呼叫两大模块。

第一步：安装呼叫组件

安装 npm。

操作步骤请参考 npm 官方文档。

安装呼叫组件 SDK 包。

bashnpm install @xkit-yx/call-kit-react-ui @xkit-yx/call-kit
// or
yarn add @xkit-yx/call-kit-react-ui @xkit-yx/call-kit

第二步：初始化

引入呼叫组件和 IM SDK。
初始化 IM SDK。

初始化呼叫组件。

如果使用的 @xkit-yx/call-kit 是 3.0.0 之前的版本、且 @xkit-yx/call-kit-react-ui 是 0.6.0 之前的版本，则需要通过初始化 V9 的 IM SDK 来进行呼叫组件的初始化，示例代码如下：

TSX// 引入呼叫组件和 IM SDK。
import React, { useState, useEffect } from 'react'
import { CallViewProvider } from '@xkit-yx/call-kit-react-ui'
import NIM from 'xxxx' // im sdk path

// ...

export default () => {
const [nim, setNim] = useState()

useEffect(() => {
// 用户初始化 im 逻辑
    const im = NIM.getInstance({
    appKey: 'xxxx', // im appkey
    token: 'xxxx', // im token
    account: 'xxxx', // im account
    onconnect: () => {
        setNim(im)
    },
    })
    return () => {
    im.disconnect()
    }
}, [])

return nim ? (
    // 初始化，呼叫 UI 组件 Provider
    <CallViewProvider
    neCallConfig={{
        nim,
        appkey: 'xxxx', // 应用 appKey
    }}
    position={{
        x: 500,
        y: 10,
    }}
    >
    <App />
    </CallViewProvider>
) : null
}

如果使用的 @xkit-yx/call-kit 是 3.0.0 及之后的版本、且 @xkit-yx/call-kit-react-ui 是 0.6.0 及之后的版本，则需要通过初始化 V10 的 IM SDK 来进行呼叫组件的初始化，示例代码如下：

TSXimport React, { useEffect, useMemo } from 'react'
import { CallViewProvider, CallViewProviderRef } from '@xkit-yx/call-kit-react-ui'
import '@xkit-yx/call-kit-react-ui/es/style'
import V2NIM from 'nim-web-sdk-ng'

const appkey = '' // 请填写您的 appkey
const account = '' // 请填写您的 account
const token = '' // 请填写您的 token

const IndexPage = () => {
const [isLogin, setIsLogin] = React.useState(false)
const callViewProviderRef = React.createRef<CallViewProviderRef>()

const nim = useMemo(() => {
    return V2NIM.getInstance({
    appkey,
    account,
    token,
    apiVersion: 'v2',
    debugLevel: 'debug',
    })
}, [])

useEffect(() => {
    if (nim) {
    // 当 App 完成渲染后，登录 IM
    nim.V2NIMLoginService.login(account, token, {
        retryCount: 5,
    }).then(() => {
        setIsLogin(true)
    })
    }

    // 当 App 卸载时，登出 IM
    return () => {
    if (nim) {
        nim.V2NIMLoginService.logout().then(() => {
        setIsLogin(false)
        })
    }
    }
}, [nim])

return nim && isLogin ? (
    <CallViewProvider
    ref={callViewProviderRef}
    neCallConfig={{
        nim,
        appkey, // 应用
        debug: true,
    }}
    position={{
        x: 500,
        y: 10,
    }}
    >
    <button onClick={() => {
        callViewProviderRef.current?.call({
        accId: '', // 被叫 im 账号
        callType: '2', // 1: 音频通话 2: 视频通话
        })
    }}>发起呼叫</button>
    </CallViewProvider>
) : null
}

第三步：（可选）设置预览的分辨率

在第二步初始化 neCallConfig 中设置 RTC 视频属性，例如设置视频分辨率，具体配置参数请参考设置视频属性。默认预览分辨率为 640*480。

      neCallConfig={{
        nim,
        appkey: 'xxxx', // 应用 appKey
              rtcConfig: {
        videoResolution: VIDEO_QUALITY.VIDEO_QUALITY_720p, // 具体配置参数参考 https://doc.yunxin.163.com/nertc/docs/zUxMDQzOTM?platform=web
      }
      }}

第四步：实现单聊呼叫（点对点呼叫）

主叫调用如下代码发起呼叫。被叫会展示被叫页面，单击接听按钮进行视频通话。通话完成后单击挂断即可。

TSXimport { useCall } from '@xkit-yx/call-kit-react-ui'

// ...

export default () => {
  const { call } = useCall()
  const handleClick = () => {
    call({
      accId: 'userId',
      type: '2',   //呼叫类型，1 表示语音通话，2 表示视频通话
    })
  }
  return <button onClick={handleClick}>发起呼叫</button>
}

集成组件（无 UI）

第一步：安装呼叫组件

呼叫组件支持通过 npm 获取并安装 SDK。

安装 npm。

操作步骤请参考 npm 官方文档。

安装呼叫组件 SDK 包。

bashnpm install @xkit-yx/call-kit
// or
yarn add @xkit-yx/call-kit

第二步：初始化

如果使用的 @xkit-yx/call-kit 是 3.0.0 之前的版本，则需要通过初始化 V9 的 IM SDK 来进行呼叫组件的初始化，示例代码如下：

JavaScript// 结合 im 的初始化
import NIM from 'xxxx' // im sdk path
import { NECall } from '@xkit-yx/call-kit'

const neCall = NECall.getInstance()
const nim = NIM.getInstance({
  appKey: 'xxxx', // im appkey
  token: 'xxxx', // im token
  account: 'xxxx', // im account
  onconnect: () => {
    // 初始化呼叫组件
    neCall.setup({
      nim, // im 实例用户需要先初始化, 对应到 NIM.getInstance 返回的 nim
      appkey: 'xxx', // 应用的 appKey，RTC 平台的 appKey
      rtcConfig: {
        videoResolution: VIDEO_QUALITY.VIDEO_QUALITY_720p,
        videoFrameRate: VIDEO_FRAME_RATE.CHAT_VIDEO_FRAME_RATE_NORMAL,
        audioQuality: 'speech_low_quality',
      }, // rtcConfig 用来设置 RTC 可选。相关参数参照 可以参考 [RTC 官方文档](https://doc.yunxin.163.com/docs/jcyOTA0ODM/zUxMDQzOTM?platformId=50082)
    })
  },
  ondisconnect: () => {
    neCall?.destroy()
  },
})

如果使用的 @xkit-yx/call-kit 是 3.0.0 及之后的版本，则需要通过初始化 V10 的 IM SDK 来进行呼叫组件的初始化，示例代码如下：

JavaScriptimport V2NIM from 'nim-web-sdk-ng' // im sdk path
import { NECall } from '@xkit-yx/call-kit'

const appkey = '' // 请填写您的 appkey
const account = '' // 请填写您的 account
const token = '' // 请填写您的 token

// 初始化 V10 sdk
const nim = V2NIM.getInstance({
  appkey,
  account,
  token,
  apiVersion: 'v2',
  debugLevel: 'debug',
})

// 登录 IM
await nim.V2NIMLoginService.login(account, token)

// 初始化呼叫组件
const neCall = NECall.getInstance()
neCall.setup({
  nim, // im 实例用户需要先初始化, 对应到 NIM.getInstance 返回的 nim
  appkey, // 应用的 appKey，RTC 平台的 appKey
  rtcConfig: {
    videoResolution: VIDEO_QUALITY.VIDEO_QUALITY_720p,
    videoFrameRate: VIDEO_FRAME_RATE.CHAT_VIDEO_FRAME_RATE_NORMAL,
    audioQuality: 'speech_low_quality',
  }, // rtcConfig 用来设置 RTC 可选。相关参数参照 可以参考 [RTC 官方文档](https://doc.yunxin.163.com/docs/jcyOTA0ODM/zUxMDQzOTM?platformId=50082)
})

第三步：发起呼叫

在发起呼叫前请先完成初始化。

JavaScript// 发起呼叫
import { NECall } from '@xkit-yx/call-kit'
const neCall = NECall.getInstance()
const calleeId = 'xxx' // 被叫的 im id
// neCall 为初始化 new NECall 返回的实例
neCall.call({
  accId: calleeId, // 被叫 im 的 ID
  callType: '1', //呼叫类型，1 表示语音通话，2 表示视频通话
})
// 设置视图
const localView = document.getElementById('localView')
const remoteView = document.getElementById('remoteView')
neCall.setLocalView(localView)
neCall.setRemoteView(remoteView)
// 取消呼叫
neCall.hangup()

第四步：接受或挂断呼叫

在呼叫前请先完成初始化。

JavaScript// 订阅邀请事件
import { NECall } from '@xkit-yx/call-kit'
const neCall = NECall.getInstance()
neCall.on('onReceiveInvited', (value) => {
  // 用户可以触发视图，例如弹起邀请页面
})
// 设置视图
const localView = document.getElementById('localView')
const remoteView = document.getElementById('remoteView')
neCall.setLocalView(localView)
neCall.setRemoteView(remoteView)
// 接受邀请，需要先设置视图
neCall.accept()
// 取消呼叫
neCall.hangup()

主叫与被叫通话中

在通话前请先完成初始化。

JavaScript// 订阅会话建立事件
import { NECall } from '@xkit-yx/call-kit'
const neCall = NECall.getInstance()
neCall.on('onCallConnected', (value) => {
  // rtc 建立通知
})
// 切换会话类型
neCall.switchCallType('2') // 入参为 callType
// 监听会话切换
neCall.on('onCallTypeChange', (value) => {})
// 开关本地视频
neCall.enableLocalVideo(true)
// 开关本地音频
neCall.muteLocalAudio(false)
// 挂断当前通话
neCall.hangup()

其他

在操作其他动作前请先完成初始化。

JavaScriptimport { NECall } from '@xkit-yx/call-kit'
const neCall = NECall.getInstance()
neCall.on('onCallEnd', (value) => {
  // 通话结束通知
  const reason = value.reasonCode
 /** 结束原因: 0 正常（兼容老版本） 1 token 错误 2 超时响应 3 呼叫占线 4 rtc 初始化失败 5 加入 rtc 失败 6 取消参数错误 7 呼叫失败   8 用户被踢出 9 rtcUid 错误为空 10 本地 rtc 房间断开 11 本地主动取消呼叫   12 另一段收到取消呼叫通知 13 本地主动拒绝呼叫 14 另一端收到被叫拒绝通知   15 本地主动挂断      16 另一段收到挂断通知   17 多端登录下其他端已经拒绝 18 多端登录下其他端已经接听 19 另一端用户非正常断开 rtc 房间 20 另一段用户正常离开 rtc 房间 21 接听失败 */
})
//本端发送话事件
neCall.on('onRecordSend', (value) => {
  //当通话因为 取消、拒绝、超时或占线 结束时，组件会主动发送一条话单消息给对端，可以在此事件中更新本端的 UI
})

此文档是否对你有帮助？

有帮助

去反馈

注意事项
基本概念
准备工作
集成组件（含 UI）
第一步：安装呼叫组件
第二步：初始化
第三步：（可选）设置预览的分辨率
第四步：实现单聊呼叫（点对点呼叫）
集成组件（无 UI）
第一步：安装呼叫组件
第二步：初始化
第三步：发起呼叫
第四步：接受或挂断呼叫
主叫与被叫通话中
其他