实现 1 对 1 通话(V1)
更新时间: 2024/08/23 10:16:57
本文介绍如何通过 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 安装呼叫组件
-
安装 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。
- 初始化呼叫组件。
示例代码
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。
-
安装 npm。
操作步骤请参考 npm 官方文档。
-
安装呼叫组件 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
})
此文档是否对你有帮助?