本文介绍通过 NERTCCallkit 呼叫组件（V1）实现 1 对 1 通话的方法。

注意事项

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

开发环境

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

准备工作

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

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

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

集成呼叫组件（含 UI）

V1.6.0 版本开始，呼叫组件提供了含 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. 初始化呼叫组件。

示例代码

tsximport 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,
        currentUserInfo: { accId: 'xxx' }, // 当前用户的IM 账号accId
        debug: true,
      }}
      position={{
        x: 500,
        y: 10,
      }}
    >
      <App />
    </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）

安装呼叫组件

V1.6.0 版本开始，呼叫组件支持通过 npm 获取并安装 SDK。

1. 安装 npm。

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

2. 安装呼叫组件 SDK 包。

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

初始化

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

let neCall: NECall
const nim = NIM.getInstance({
  appKey: 'xxxx', // im appkey
  token: 'xxxx', // im token
  account: 'xxxx', // im account
  onconnect: () => {
    // 初始化呼叫组件
    neCall = new NECall({
      nim, // im 实例用户需要先初始化, 对应到 NIM.getInstance 返回的 nim 
      appKey, // 应用的 appKey，RTC 平台的 appKey
      currentUserInfo: { accId: 'xxx', uid: 'xxx' }, // 当前用户的信息，accId 为 im 的 id, 跟上面的 account 需要一致，uid 为加入RTC的 id。accId 必填； uid 可选：不填系统将自动生成
    })
  },
  ondisconnect: () => {
    neCall?.destroy()
  },
})

主叫侧

javascript// 发起呼叫
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, calleeId)
// 取消呼叫
neCall.hangup()

被叫侧

javascript// 订阅邀请事件
let callerId 
neCall.on('onReceiveInvited', (value) => {
  // 用户可以触发视图，比如弹起邀请页面
  callerId = value.callerInfo.accId
})
// 设置视图
const localView = document.getElementById('localView')
const remoteView = document.getElementById('remoteView')
neCall.setLocalView(localView)
neCall.setRemoteView(remoteView, callerId)
// 接受邀请，需要先设置视图
neCall.accept()
// 取消呼叫
neCall.hangup()

主叫与被叫通话中

javascript// 订阅会话建立事件
neCall.on('onCallConnected', (value) => {
  
})
// 切换会话类型
neCall.switchCallType('2') // 入参为 callType
// 监听会话切换
neCall.on('onSwitchCallType', (value) => {})
// 开关本地视频
neCall.enableLocalVideo(true)
// 开关本地音频
neCall.enableLocalAudio(false)
// 挂断当前通话
neCall.hangup()

其他

javascript// 订阅会话结束事件
neCall.on('onCallEnd', (value) => {
  const reason = value.reason
  // 0：正常流程 | 1：token请求失败 | 2：呼叫超时 | 3：用户占线 | 4：nertc 初始化失败 | 5：加入 rtc 房间失败 | 6：cancel 取消参数错误 | 7：发起呼叫失败 | 8：对方rtc失败 | 9：其他端接受邀请 | 10：其他端拒绝邀请 | 11：通话中rtc 异常
})
//本端发送话事件
neCall.on('onMessageSent', (value) => {
  //当通话因为 取消、拒绝、超时或占线 结束时，组件会主动发送一条话单消息给对端，可以在此事件中更新本端的UI
})