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

本文教大家基于环信 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,为用户带来更流畅的通话体验!

参考文档:

相关推荐
一树论1 分钟前
浏览器插件开发经验分享二:如何处理日期控件
前端·javascript
小璞1 分钟前
六、React 并发模式:让应用"感觉"更快的架构智慧
前端·react.js·架构
Yanni4Night2 分钟前
LogTape:零依赖的现代JavaScript日志解决方案
前端·javascript
疯狂踩坑人2 分钟前
Node写MCP入门教程
前端·agent·mcp
重铸码农荣光3 分钟前
一文吃透 ES6 Symbol:JavaScript 里的「独一无二」标识符
前端·javascript
申阳3 分钟前
Day 15:01. 基于 Tauri 2.0 开发后台管理系统-Tauri 2.0 初探
前端·后端·程序员
想吃电饭锅3 分钟前
前端大厦建立在并不牢固的地基,浅谈JavaScript未来
前端
重铸码农荣光4 分钟前
一文吃透 JS 事件机制:从监听原理到实战技巧
前端
2503_9284115610 分钟前
11.25 Vue内置组件
前端·javascript·vue.js
我有一个object36 分钟前
uniapp上传文件报错:targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!
前端·javascript·vue.js·uniapp