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

注意事项

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

准备工作

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

• 开发环境要求 Node 14.16.0 及以上版本。

• 在 网易云信控制台 创建应用，并获取了对应的 App Key。详细操作请参考 创建应用。

• 在网易云信控制台开通以下产品或功能，开通服务的操作流程请参考 开通服务。

  • IM 即时通讯
  • 信令
  • 音视频通话 2.0
  • 音视频通话 2.0 产品的话单功能

集成组件（含 UI）

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

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

第一步：安装呼叫组件

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
   

第二步：初始化

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 账号 ID accId
           debug: true,
       }}
       position={{
           x: 500,
           y: 10,
       }}
       >
       <App />
       </CallViewProvider>
   ) : null
   }
   

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

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

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

第四步：实现 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）

第一步：安装呼叫组件

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

1. 安装 npm。

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

2. 安装呼叫组件 SDK 包。

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

第二步：初始化

JavaScript// 结合 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
})