IOS技術分享| 互動連麥場景實現

前言

互動連麥的場景，演示瞭如何經過雲服務，並配合 anyRTC RTC SDK、anyRTC RTM SDK，快速實現連麥社交的場景。

方案選擇：

• RTC實時互動
• 客戶端推流到CDN
• 服務端推流到CDN

場景實現

1、視頻互動連麥

效果預覽

App Store 體驗

視頻互動連麥

源碼下載

點擊跳轉 Github

2、音頻互動連麥

效果預覽

App Store 體驗

音頻互動連麥

源碼下載

點擊跳轉 Github

開發環境

• 開發工具：Xcode12 真機運行
• 開發語言：Swift
• 實現：連麥互動，包含推拉流、連麥、聊天等。

核心代碼

實例化 SDK 對象

   func initializeEngine() {
        // init ARtcEngineKit
        rtcKit = ARtcEngineKit.sharedEngine(withAppId: UserDefaults.string(forKey: .appid)!, delegate: self)
        rtcKit.setChannelProfile(.liveBroadcasting)
        rtcKit.enableVideo()
        
        if infoVideoModel.isBroadcaster {
            rtcKit.setClientRole(.broadcaster)
            
            let videoCanvas = ARtcVideoCanvas()
            videoCanvas.view = broadcasterVideo.renderView
            rtcKit.setupLocalVideo(videoCanvas)
            view.insertSubview(broadcasterVideo, at: 0)
            videoArr.append(broadcasterVideo)
            
            // setUp videoConfig
            let videoConfig = ARVideoEncoderConfiguration()
            videoConfig.dimensions = getVideoDimensions(index: infoVideoModel.dimensions)
            videoConfig.bitrate = 500
            videoConfig.frameRate = 15
            rtcKit.setVideoEncoderConfiguration(videoConfig)
        }
        
        // init ARtmKit
        rtmEngine = ARtmKit.init(appId: UserDefaults.string(forKey: .appid)!, delegate: self)
        rtmEngine.login(byToken: infoVideoModel.rtmToken, user: UserDefaults.string(forKey: .uid) ?? "0") { (errorCode) in
            
        }
    }
​
​
複製代碼

RTC實時互動

   //------------ RTC 實時互動 ------------------
    func joinChannel() {
        let uid = UserDefaults.string(forKey: .uid)
        rtcKit.joinChannel(byToken: infoVideoModel.rtcToken, channelId: infoVideoModel.roomId!, uid: uid) { (channel, uid, elapsed) in
            // join sucess
        }
    }
    
    func leaveChannel() {
        rtcKit.leaveChannel { (stats) in
            print("leaveChannel")
        }
    }
​
複製代碼

客戶端推流到CDN

   //------------ 客戶端推流到 CDN ------------------
    func initializeStreamingKit() {
        streamKit = ARStreamingKit()
        streamKit?.setRtcEngine(rtcKit)
        streamKit?.setMode(.vidMix)
​
        let transCodingUser = ARLiveTranscodingUser()
        transCodingUser.uid = "0"
        transCodingUser.rect = broadcasterVideo.frame
        liveTranscoding.transcodingUsers = [transCodingUser]
        streamKit?.setLiveTranscoding(liveTranscoding)
        streamKit?.pushStream(infoVideoModel.pushUrl ?? "")
    }
複製代碼

服務端推流到CDN

  //------------ 服務端推流到 CDN ------------------
    func initializeAddPublishStreamUrl() {
        let transCodingUser = ARLiveTranscodingUser()
        transCodingUser.uid = UserDefaults.string(forKey: .uid) ?? "0"
        transCodingUser.rect = broadcasterVideo.frame
        liveTranscoding.transcodingUsers = [transCodingUser]
        rtcKit.setLiveTranscoding(liveTranscoding)
        
        rtcKit.addPublishStreamUrl(infoVideoModel.pushUrl ?? "", transcodingEnabled: true)
    }
複製代碼

媒體播放器組件

   //------------ 播放器 -- 遊客 ------------------
    func initializeMediaPlayer() {
        broadcasterVideo.frame = view.bounds
        view.insertSubview(broadcasterVideo, at: 0)
        broadcasterVideo.placeholderView.isHidden = false
        
        mediaPlayer = ARMediaPlayer(delegate: self)
        mediaPlayer?.setView(broadcasterVideo.renderView)
        mediaPlayer?.open(infoVideoModel.pullRtmpUrl!, startPos: 0)
        mediaPlayer?.play()
        videoLayout()
    }
複製代碼

SDK 集成方式

方式一：官網獲取

docs.anyrtc.io/download

方式二：CocoaPods 獲取

platform :ios, '9.0'
use_frameworks!
​
target 'Your App' do
    #anyRTC 音視頻庫
    pod 'ARtcKit_iOS', '~> 4.2.2.2'
    #anyRTC 實時消息庫
    pod 'ARtmKit_iOS', '~> 1.0.1.6'
end
複製代碼

結束語

連麥項目中還存在一些bug和待完善的功能點。僅供參考。有不足之處歡迎你們指出issues。 最後再貼一下 Github開源下載地址 。

視頻連麥互動 Github

語音連麥互動 Github