Skip to content
비디오 스트리밍을 위한 SwiftUI 솔루션 featured
← Back to Blog

비디오 스트리밍을 위한 SwiftUI 솔루션

By Max Cobb In 개발자

개요

SwiftUI는 다양한 Apple 플랫폼용 사용자 인터페이스를 구축할 수 있는 현대적이고 직관적인 방법을 제공하여 앱 개발의 판도를 바꾸는 도구로 부상했습니다. SwiftUI는 엄청난 기능을 제공하지만 라이브 스트리밍 애플리케이션을 위한 확실한 솔루션은 현저히 부족합니다. 그러나 SwiftUIRtc 패키지는 SwiftUI에 라이브 스트리밍 기능을 완벽하게 통합하여 이러한 격차를 메워줍니다. 이 글에서는 SwiftUIRtc를 통해 개발자가 SwiftUI의 강력한 기능을 사용하여 매력적인 라이브 스트리밍 애플리케이션을 제작할 수 있는 방법을 살펴봅니다.

SwiftUI에서 라이브 스트리밍의 어려움

라이브 스트리밍은 실시간 비디오 렌더링, 미디어 동기화, 인터랙티브 기능 측면에서 특유의 문제를 안고 있습니다. SwiftUI는 강력한 UI 프레임워크이지만 라이브 스트리밍 컴포넌트에 대한 기본 지원이 부족합니다. 개발자는 종종 SwiftUI 앱에서 라이브 스트리밍 기능을 구현하기 위해 타사 라이브러리와 UIViewRespresentable  를 사용한 복잡한 해결 방법을 반복적으로 사용하여 통합해야 하는 어려운 작업에 직면합니다.

SwiftUI 라이브 스트리밍 솔루션

SwiftUIRtc 패키지는 SwiftUI에서 실시간 스트리밍에 사용되는 불편한 방법을 해결하기 위해 설계되었습니다. 이 패키지는 개발자가 라이브 스트리밍 기능을 SwiftUI 애플리케이션에 손쉽게 통합할 수 있는 작은 도구 세트와 SwiftUI 구성 요소를 제공합니다. 개발자는 SwiftUIRtc 를 활용하여 라이브 스트리밍 통합과 관련된 장애물을 극복하고 사용자에게 탁월한 스트리밍 경험을 제공하는 데 집중할 수 있습니다.

이 패키지는 내부적으로 아고라 비디오 RTC 엔진을 사용하여 이 솔루션에 최상의 네트워크가 사용되도록 보장합니다. 

SwiftUIRtc의 주요 클래스

SwiftUIRtc 패키지는 설계상 비교적 가볍지만, 한정된 클래스와 메서드는 개발자가 라이브 스트리밍 애플리케이션으로 바로 작업을 시작하는 데 필요한 모든 것을 제공합니다.

AgoraManager

AgoraManager 는 세션 관리 및 연결 처리 등 몇 가지 매우 중요한 업무를 담당합니다. AgoraManager 는 채널에 join하고 leave하는 사용자를 추적하여 개발자가 동영상을 렌더링하는 데 필요한 ID를 알 수 있도록 합니다. 이러한 ID는 Agora RTC 엔진의 위임 메서드를 사용하여 추적되며, 이 메서드는 게시된 변수인 allUsers 에 저장됩니다.

채널 join 및 leave 메서드:

위임 메서드를 구현했습니다:

AgoraVideoCanvasView

AgoraVideoCanvasView 는 Agora RTC 세션에서 원격 또는 로컬 비디오를 표시하기 위한 뷰를 제공하는 UIViewRepresentable 구조체입니다. AgoraManager 를 통해 엔진에 액세스하여 원하는 ID만 제공하면 로컬 및 원격 비디오 스트림을 표시하는 AgoraVideoCanvasView 를 사용할 수 있습니다.

예제

위에서 설명한 두 클래스만 사용하면 장면의 모든 사용자를 추적하는 AgoraManager와 allUsers 프로퍼티에 나열된 각 사용자에 대한 AgoraVideoCanvasView를 다음과 같이 쉽게 추가할 수 있습니다:

import SwiftUIRtc
import AgoraRtcKit

struct ScrollingVideoCallView: View {
    @ObservedObject var agoraManager = AgoraManager(appId: <#AppId#>, role: .broadcaster)
    var channelId: String = "test"
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Array(agoraManager.allUsers), id: \.self) { uid in
                    AgoraVideoCanvasView(manager: agoraManager, uid: uid)
                        .aspectRatio(contentMode: .fit).cornerRadius(10)
                }
            }.padding(20)
        }.onAppear {
            agoraManager.joinChannel(channelId, token: <#Agora Temp Token#>)
        }.onDisappear {
            agoraManager.leaveChannel()
        }
    }
}

위와 같이 스크롤뷰에 표시되면 다양한 동영상 피드가 스크롤 목록 보기에 자동으로 표시되며, 채널에 참여하는 사용자 수에 따라 확장됩니다.

SwiftUIRtc 확장하기

AgoraManager와 AgoraVideoCanvasView의 모든 메서드는 open 으로 표시되어 있으며 라이브러리는 오픈 소스입니다. 즉, 이러한 각 클래스는 서브클래스로 확장하여 SwiftUI 애플리케이션의 정확한 요구 사항에 맞는 기능을 추가할 수 있습니다. 

예를 들어 들어오는 스트림의 품질을 기록해야 하는 경우 다음과 같이 AgoraManager를 서브클래스화할 수 있습니다:

public class CallQualityManager: AgoraManager {
    /// A dictionary mapping user IDs to call quality statistics.
    @Published public var callQualities: [UInt: String] = [:]
}

그리고 몇 가지 추가적인 위임 메서드를 추가하세요:

extension CallQualityManager {
    public func rtcEngine(_ engine: AgoraRtcEngineKit, remoteVideoStats stats: AgoraRtcRemoteVideoStats) {
        self.callQualities[stats.uid] = """
        Received Bitrate = \(stats.receivedBitrate)
        Frame = \(stats.width)x\(stats.height), \(stats.receivedFrameRate)fps
        Frame Loss Rate = \(stats.frameLossRate)
        Packet Loss Rate = \(stats.packetLossRate)
        """
    }

    public func rtcEngine(_ engine: AgoraRtcEngineKit, localVideoStats stats: AgoraRtcLocalVideoStats, sourceType: AgoraVideoSourceType) {
        self.callQualities[self.localUserId] = """
        Captured Frame = \(stats.captureFrameWidth)x\(stats.captureFrameHeight), \(stats.captureFrameRate)fps
        Encoded Frame = \(stats.encodedFrameWidth)x\(stats.encodedFrameHeight), \(stats.encoderOutputFrameRate)fps
        Sent Data = \(stats.sentFrameRate)fps, bitrate: \(stats.sentBitrate)
        Packet Loss Rate = \(stats.txPacketLossRate)
        """
    }
}

이러한 통화 품질 데이터를 표시하려면 위 ScrollingVideoCallView 를 간단히 변경하여 각 AgoraVideoCanvasView 에 오버레이를 추가하면 됩니다: 

AgoraVideoCanvasView(manager: agoraManager, uid: uid)
    .aspectRatio(contentMode: .fit).cornerRadius(10)
    .overlay(alignment: .topLeading) {
        Text(agoraManager.callQualities[uid] ?? "no data").padding()
    }
SwiftUI Video Streaming screenshot

결론

SwiftUIRtc는 라이브 스트리밍 기능을 SwiftUI 애플리케이션에 통합하는 프로세스에 단순성과 사용 편의성을 제공합니다. AgoraManager와 AgoraVideoCanvasView를 활용하면 SwiftUI가 아닌 클래스를 처리할 필요 없이 Agora RTC SDK를 통해 비디오 스트림을 추가할 수 있습니다.

지금 바로 패키지를 추가하여 iOS 애플리케이션에 SwiftUIRtc를 사용하세요:

https://github.com/AgoraIO-Community/SwiftUIRtc.git
Blog Cta
Blog Cta mobile