本文介绍通过如何 NERtcCallKit 呼叫组件（V2）实现 1 对 1 通话。

注意事项

• 呼叫组件默认使用调试模式。应用正式上线前，请在控制台中将指定应用的鉴权方式改回安全模式。安全模式下需要使用 Token 加入房间，详细说明请参见Token 鉴权。
• 针对组件中的回调信息，开发者要做好相应回调数据的上报及存储，以便于后期上线之后排查问题。

@xkit-yx/call-kit 自 V3.0.0 版本开始，基于 V10 SDK 版本，请根据 V10 SDK 初始化 完成 SDK 的初始化与登录后，将 nim 实例传给呼叫组件，即可跑通新版呼叫组件。Demo 请参考 1 对 1 通话。

开发环境

环境要求	说明
node 版本	v14.16.0 及以上版本

准备工作

• 已在控制台创建应用，并获取了对应的 App Key。详细操作请参见创建应用。

• 已开通 IM 即时通讯、音视频通话 2.0 及信令产品。开通服务的操作流程请参见开通服务。

• 已在网易云信控制台开通音视频通话 2.0 产品的话单功能。详细操作请参见开通话单。

集成呼叫组件（含 UI）

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

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

步骤1 安装呼叫组件

1. 安装 npm。

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

2. 安装呼叫组件 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
   

步骤2 初始化

1. 引入呼叫组件和 IM SDK。
2. 初始化 IM SDK。
3. 初始化呼叫组件。

如果使用的 @xkit-yx/call-kit 是 V3.0.0 之前的版本、且 @xkit-yx/call-kit-react-ui 是 V0.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 是 V3.0.0 及之后的版本、且 @xkit-yx/call-kit-react-ui 是 V0.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
}

步骤3 （可选）设置预览的分辨率

在步骤2 初始化 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
      }
      }}

步骤4 实现 1 对 1 呼叫（点对点呼叫）

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

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。

1. 安装 npm。

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

2. 安装呼叫组件 SDK 包。

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

初始化

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

// 结合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 是 V3.0.0 及之后的版本，则需要通过初始化 V10 的 IM SDK 来进行呼叫组件的初始化，示例代码如下：

import 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
})