实现 1 对 1 通话(V2)
更新时间: 2024/08/23 10:16:57
本文介绍通过如何 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 安装呼叫组件
-
安装 npm。
操作步骤请参考 npm 官方文档。
-
安装呼叫组件 SDK 包。
bash
npm 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 初始化
- 引入呼叫组件和 IM SDK。
- 初始化 IM SDK。
- 初始化呼叫组件。
如果使用的 @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。
-
安装 npm。
操作步骤请参考 npm 官方文档。
-
安装呼叫组件 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
})