[iOS/API] Agora로 실시간 음성채팅 구현하기(feat.클럽하우스) - 2

안녕하세요 Foma 입니다!

 

오늘은 저번 글에서 Agora 프로젝트 세팅하는 법에 이어서 구체적으로 음성채팅을 구현하는 법에 대해서

 

다뤄보도록 하겠습니다!

 

(혹시라도 프로젝트 설정법을 안보신 분들은 여기 에서 보고 와주세요!)

---

Preview

 

 

 

---

Pod

 

Podfile에 아래와 같이 AgoraRtc를 추가해주세요! (버전은 바뀔수도 있으니 확인해서 추가해주세요.)

pod ‘AgoraRtcEngine_iOS’, ‘~> 3.1.0’

---

Info.plist

 

마이크 사용 권한을 설정해주세요!

 

	<key>NSMicrophoneUsageDescription</key>
	<string>마이크 좀 쓸게?</string>

---

StoryBoard

 

AgoraViewController

 

먼저 네비게이션 컨트롤러를 Embed 해주시고 이름을 적는 텍스트필드와 입장할 수 있는 버튼을 만들어 놓았습니다. (스폰지밥이 버튼이에요.)

 

 

 

ChannelViewController

 

입장한 방의 화면을 컬렉션뷰 헤더로 레이블을 달아 말하는 사람인지 듣는 사람인지 띄우고

 

셀로 이미지를 띄우도록 하겠습니다.

 

아래엔 방을 나가는 버튼도 만들어주세요.

 

 

 

그리곤 둘 사이를 세그로 연결해주고 identifier를 설정해주세요!

 

 

---

AgoraViewController

 

먼저 이름을 적고 입장할 뷰컨트롤러를 만들어주세요.

 

 

그 다음 텍스트필드와 레이블 버튼을 연결해주세요.

 

class AgoraViewController: UIViewController {
    
    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var fomaLabel: UILabel!
    @IBOutlet weak var channelButton: UIButton!
    ...

 

이름을 저장할 변수를 만들어주세요.

 

var name:String = ""

 

버튼을 원모양으로 만들어 주겠습니다.

 

    func setUI() {
        channelButton.layer.cornerRadius = channelButton.frame.height/2
        channelButton.layer.masksToBounds = true
    }

 

viewDidLoad엔  setUI메소드와 텍스트필드의 delegate를 self로 설정해줍니다.

 

 override func viewDidLoad() {
        super.viewDidLoad()
        setUI()
        nameTextField.delegate = self
    }

 

텍스트가 바뀔때 name을 현재 텍스트필드의 값으로 바꿔줍니다.

 @IBAction func textChanged(_ sender: UITextField) {
        name = sender.text ?? ""
    }

텍스트필드딜리게이트를 extension해주세요.

extension AgoraViewController:UITextFieldDelegate { }

 

화면을 이동하기 전에 ChannelViewController의 이름을 현재 이름으로 바꿔줍니다.

 

 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showChannelViewController" {
            let vc = segue.destination as! ChannelViewController
            vc.name = name
        }
    }

 

스폰지밥모양 버튼을 눌렀을때 performSegue로 ChannelViewController로 이동하게 합니다.

 

 @IBAction func joinChannel(_ sender: Any) {
    
       performSegue(withIdentifier: "showChannelViewController", sender: nil)

    }

---

ChannelViewController

 

이제 본격적으로 채널에 입장하였을 때를 구현하도록 하겠습니다.

 

AgoraRtcKit을 import 해주세요!

import AgoraRtcKit

 

스토리보드에서 leave버튼과 컬렉션뷰를 연결해줍니다.

 

 @IBOutlet weak var leaveButton: UIButton!
 @IBOutlet weak var collection: UICollectionView!

 

아래와 같이 변수들을 설정해주세요!

 

(저는 Fomagran으로 입장했으면 말하는 사람으로 아니라면 듣는 사람으로 설정했습니다,)

 

    //입장할때 입력한 이름을 받을 변수
    var name:String = ""
    //agoraRtcKit
    var agkit: AgoraRtcEngineKit?
    //uid
    var userID: UInt = 0
    //말하고 있는 사람들
    var activeSpeakers: Set<UInt> = []
    //말하고 있는 사람
    var activeSpeaker: UInt?
    //듣고 있는 사람들
    var activeAudience: Set<UInt> = []
    //말하는 사람인지 듣는 사람인지 역할
    lazy var role:AgoraClientRole = name == "Fomagran" ? .broadcaster : .audience

 

본격적으로 Agora를 연결해줍니다.

 

앱아이디는 Agora 대쉬보드로 가셔서 확인하시면 됩니다.

 

 func connectAgora() {

        //앱아이디로 실행
        agkit = AgoraRtcEngineKit.sharedEngine(withAppId: "앱아이디", delegate: self)
        //오디오 가능하게 설정
        agkit?.enableAudio()
        //오디오 볼륨 설정
        agkit?.enableAudioVolumeIndication(1000, smooth: 3, report_vad: true)
        //채널 프로필 설정
        agkit?.setChannelProfile(.liveBroadcasting)
        //현재 역할 설정
        agkit?.setClientRole(role)
    
    }

 

 

채널에 입장하기 위한 메소드를 작성해줍니다.

 

agkit에서 joinChannel( byToken,channelId,info,uid,joinSuccess) 가 파라미터로 있는 메소드를 사용해주세요.

 

그리고 참가한 유저의 역할에 따라 듣는 사람과 말하는 사람을 넣어준뒤 컬렉션 뷰를 리로드 해주겠습니다.

 

 func joinChannel() {

        agkit?.joinChannel(
            byToken: "임시 토큰 값", channelId: "채널 아이디",
            info: nil, uid:userID,
            joinSuccess: { (_, uid, elapsed) in
                self.userID = uid
                if self.role == .audience {
                    self.activeAudience.insert(uid)
                } else {
                    self.activeSpeakers.insert(uid)
                }
                self.collection.reloadData()
            }
        )
        
    }

 

 

임시토큰값을 받는 방법은  밑에 아고라 콘솔창으로 이동한 뒤

 

Dashboard

 

프로젝트의 오른쪽 끝에 연필모양을 눌러서 Edit을 해줍니다.

 

 

아래로 내려서 Features에 Temp token for audio/video call에 Generate temp token을 눌러주세요!

 

 

여기서 원하는 채널이름을 적고 아래 Generate Temp Token을 눌러줍니다.

 

 

그러면 아래와 같이 임시 토큰이 나오게 되는데 이것은 24시간동안만 사용할 수 있습니다.

 

저장한 뒤 위 joinChannel에 byToken 파라미터 값으로 넣어주세요!

 

 

leaveChannel을 할때는 아래와 같이 설정해주세요.

 

  @IBAction func leaveChannel(_ sender: Any) {
        self.agkit?.createRtcChannel("MoA")?.leave()
        self.agkit?.leaveChannel()
        AgoraRtcEngineKit.destroy()
        self.navigationController?.popViewController(animated: true)
    }

---

AgoraRtcEngineDelegate

 

아고라 딜리게이트는 아래와 같이 설정해줍니다.

extension ChannelViewController: AgoraRtcEngineDelegate {
    
    //Agora안에 듣는 사람이나 말하는 사람 정보가 바뀌었을때
    func rtcEngine(
        _ engine: AgoraRtcEngineKit,
        remoteAudioStateChangedOfUid uid: UInt, state: AgoraAudioRemoteState,
        reason: AgoraAudioRemoteStateReason, elapsed: Int
    ) {
        switch state {
        //말하기를 시작할때
        case .decoding, .starting:
            //듣는 사람에서 뺴주고
            self.activeAudience.remove(uid)
            //말하는 사람들에 넣어준다.
            self.activeSpeakers.insert(uid)
            //멈췄을때
        case .stopped, .failed:
            //말하는 사람에서 삭제한다.
            self.activeSpeakers.remove(uid)
        default:
            return
        }
        self.collection.reloadData()
    }

    //현재 말하는 사람 설정
    func rtcEngine(_ engine: AgoraRtcEngineKit, activeSpeaker speakerUid: UInt) {
        //현재 말하는 사람으로 설정해준다.
        self.activeSpeaker = speakerUid
        self.collection.reloadData()
    }
    
}

 

---

ChannelSectionHeader

 

컬렉션뷰 헤더를 만들고 스토리보드와 연결해주세요.

 

class ChannelSectionHeader: UICollectionReusableView {
    @IBOutlet weak var headerLabel:UILabel!
}

---

UserCollectionViewCell

 

컬렉션뷰셀을 아래와 같이 설정해주세요.

 

저는 말하는 사람이면 스폰지밥으로 아니면 뚱이 이미지로 했습니다.

 

class UserCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var profile: UIImageView!
    
    func setUI(isSpeaker:Bool) {
        profile.layer.cornerRadius = profile.frame.height/2
        profile.image = isSpeaker ? UIImage(named: "스폰지밥.png") : UIImage(named: "뚱이.jpeg")
    }
    
}

---

UICollectionViewDataSource

 

아래와 같이 컬렉션뷰 데이터소스를 설정해주세요.

 

extension ChannelViewController:UICollectionViewDataSource {
    
    //듣는 사람과 말하는 사람 섹션 2개를 만들어줌.
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        2
    }
    
    //section 0번쨰를 말하는 사람, 1번쨰를 듣는 사람으로 설정해줌.
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return section == 0 ? activeSpeakers.count : activeAudience.count
    }
    
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collection.dequeueReusableCell(withReuseIdentifier: "UserCollectionViewCell", for: indexPath) as! UserCollectionViewCell
        
        if indexPath.section == 0 {
            cell.setUI(isMaster:true)
        }else{
            cell.setUI(isMaster:false)
        }
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        
        let sectionHeader = collection.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "ChannelSectionHeader", for: indexPath) as! ChannelSectionHeader
        
        sectionHeader.headerLabel.text = indexPath.section == 0 ? "Speakers" : "Audience"
        
        return sectionHeader
        
    }
}

---

실행화면

 

시뮬레이터에서는 foma로 입장하고 제 핸드폰에서는 Fomagran으로 입장했습니다.

 

휴대폰에서 말을 하게 되면 실제로 맥에서 소리가 들립니다!! 

 

(소리를 담을 수 없게 돼서 안타깝네요....ㅜ)

 

 

 

---

오늘은 이렇게 실시간 음성채팅 하는 법에 대해서 알아보았는데요.

 

다음엔 더 구체적으로 채널을 어떻게 들어가고 정보를 불러오는지에 대해서 다뤄보도록 하겠습니다!

 

혹시라도 궁금하신 점이 있다면 언제든 댓글로 알려주세요!

---

Reference

 

How to Add Live Video Streaming in Your iOS App with Agora