实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程

本文教大家基于环信 CallKit 快速实现音视频实时通话能力。

环信CallKit组件是环信即时通讯 IM 和声网实时音视频 RTC 深度整合开发的实时音视频通话框架,实现了一对一及群组音视频通话功能。只需简单集成,即可快速获得稳定流畅的高品质音视频通话能力。环信音视频通话 CallKit 可用于在线互动课堂、视频客服中心、远程会诊系统或视频相亲等场景。目前支持Android、iOS、Web端。

本文以Android端集成为例:

推荐开发环境

Android SDK: API Level 24 及以上

  • Android Studio: 推荐最新版本
  • Kotlin: 2.0.21
  • JDK: 17
  • Gradle 版本: 8.13

前提条件

1.已经注册环信管理后台账号 2.已集成环信即时通讯 IM SDK 创建应用,获取应用的 App Key,格式为 orgname#appname。 创建用户,获取用户 ID 和 IM token。 创建群组,获取群组 ID。将用户加入群组。 开通音视频服务。为了保障流畅的用户体验,开通服务后,你需等待 15 分钟才能跑通示例项目。

集成步骤

步骤一 添加依赖 在 app(module) 目录的 build.gradle.kts 文件中添加以下依赖: (注:需要使用4.16.0及以上版本)

kotlin 复制代码
dependencies {
    ...
    implementation("io.hyphenate:chat-call-kit:4.16.0")
}

步骤二 初始化 CallKit

在应用启动时(建议在Application里)初始化 CallKit: 注:CallKit是使用IM做信令的,需要先初始化IM SDK

kotlin 复制代码
//初始化环信IM SDK
       val options = ChatOptions().apply {
            this.appKey = appkey
            autoLogin = false
        }
        ChatClient.getInstance().init(this, options)
        //开启debug模式
        ChatClient.getInstance().setDebugMode(true)

        // 初始化CallKit
        val config = CallKitConfig()
        CallKitClient.init(this, config)

步骤三 配置监听器 CallKit提供 CallKitListener监听通话过程,可以在初始化时设置监听器处理通话相关的回调:

kotlin 复制代码
//CallKit监听器
private val callKitListener = object : CallKitListener {
        
        // 通话结束
        override fun onEndCallWithReason(reason: CallEndReason, callInfo: CallInfo?) {
            runOnUiThread {
                when (reason) {
                    CallEndReason.CallEndReasonHangup -> {
                        showToast("通话已挂断")
                    }
                    CallEndReason.CallEndReasonCancel -> {
                        showToast("通话已取消")
                    }
                    CallEndReason.CallEndReasonRemoteRefuse -> {
                        showToast("对方拒绝通话")
                    }
                    CallEndReason.CallEndReasonRemoteNoResponse -> {
                        showToast("对方无响应")
                    }
                    // ... 其他结束原因
                }
            }
        }
        
        // 通话错误
        override fun onCallError(
            errorType: CallKitClient.CallErrorType,
            errorCode: Int,
            description: String?
        ) {
            runOnUiThread {
                showToast("通话错误: $description")
            }

步骤四 登录IM

调用接口,登录环信IM(注:登录的环信id需提前注册)

kotlin 复制代码
ChatClient.getInstance().loginWithToken(username, token, object : ChatCallback {
        override fun onSuccess() {
            runOnUiThread {
                showToast("登录成功")
            }
        }

        override fun onError(code: Int, error: String?) {
            runOnUiThread {
                showToast("登录失败: $error")
            }
        }
    })

步骤五 发起通话

  • 发起一对一语音通话
kotlin 复制代码
CallKitClient.startSingleCall(
            CallType.SINGLE_VOICE_CALL, 
            环信id, 
         ext  //可传null
)
  • 发起一对一视频通话
kotlin 复制代码
CallKitClient.startSingleCall(
        CallType.SINGLE_VIDEO_CALL,
        环信id,
        ext  // 可传 null
    )

步骤六 接听电话

当接收到通话邀请时,CallKit 会自动触发 onReceivedCall 回调: (注:被叫用户可选择接听、拒绝或挂断通话)

  • 弹出通话邀请界面
  • 播放来电铃声
  • 显示通话邀请通知(当 App 在后台时)

恭喜你完成环信 CallKit 的快速集成!

接下来您可以基于业务需求,进一步拓展进阶功能。环信 SDK 已为这些功能提供成熟接口,你只需参考官方 Demo 中的示例代码,即可快速落地。期待你的产品借助环信 CallKit,为用户带来更流畅的通话体验!

参考文档:

相关推荐
光影少年3 分钟前
reeact虚拟DOM、Diff算法原理、key的作用与为什么不能用index
前端·react.js·掘金·金石计划
用户059540174468 分钟前
大模型记忆存储踩坑实录:LangChain 的 ConversationBufferMemory 让我排查了 6 小时
前端·css
是上好佳佳佳呀15 分钟前
【前端(十二)】JavaScript 函数与对象笔记
前端·javascript·笔记
你真的快乐吗30 分钟前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼
前端·vue.js·typescript
Rkgua36 分钟前
ESModule和Commonjs模块的区别
前端·javascript
江南十四行36 分钟前
ReAct Agent 基本理论与项目实战(二)
前端·react.js·前端框架
用户6000718191042 分钟前
【翻译】React 如何乱序流式输出 UI,却仍保持最终顺序
前端
江南十四行1 小时前
AI Agent应用类型及Function Calling开发实战(三)
服务器·前端·javascript
GISer_Jing1 小时前
AI原生全栈架构理论体系:从分布式范式演进到全链路工程化理论基石
前端·人工智能·学习·ai编程
GISer_Jing1 小时前
从“切图仔”到“增长架构师”:AI时代营销前端的范式革命
前端·人工智能·ai编程