SwiftUI를 활용한 동영상 스트리밍 솔루션

개요

SwiftUI는 앱 개발 분야에서 게임 체인저로 부상하며, 다양한 Apple 플랫폼용 사용자 인터페이스를 현대적이고 직관적인 방식으로 구축하는 방법을 제공합니다. SwiftUI는 강력한 기능을 제공하지만, 라이브 스트리밍 애플리케이션을 위한 견고한 솔루션이 부족하다는 점이 눈에 띕니다. 그러나 SwiftUIRtc 패키지는 SwiftUI에 라이브 스트리밍 기능을 원활하게 통합함으로써 이 간극을 메웁니다. 이 기사에서는 SwiftUIRtc가 SwiftUI의 힘을 활용해 개발자가 매력적인 라이브 스트리밍 애플리케이션을 개발할 수 있도록 지원하는 방법을 탐구합니다.

SwiftUI에서의 라이브 스트리밍 과제

라이브 스트리밍은 실시간 비디오 렌더링, 미디어 동기화, 상호작용 기능 등에서 독특한 과제를 제기합니다. SwiftUI는 강력한 UI 프레임워크이지만, 라이브 스트리밍 구성 요소에 대한 네이티브 지원을 제공하지 않습니다. 개발자들은 SwiftUI 앱에 라이브 스트리밍 기능을 구현하기 위해 UIViewRespresentable을 반복적으로 사용해 복잡한 우회 방법을 구현하거나 제3자 라이브러리를 통합하는 어려운 작업을 자주 직면합니다.

SwiftUI 라이브 스트리밍 솔루션

패키지 SwiftUIRtc는 SwiftUI에서 라이브 스트리밍을 위해 필요한 번거로운 우회 방법을 해결하기 위해 설계되었습니다. 이 패키지는 개발자가 SwiftUI 애플리케이션에 라이브 스트리밍 기능을 쉽게 통합할 수 있도록 작은 도구 세트와 SwiftUI 구성 요소를 제공합니다. SwiftUIRtc를 활용함으로써 개발자는 라이브 스트리밍 통합과 관련된 장애물을 극복하고 사용자에게 우수한 스트리밍 경험을 제공하는 데 집중할 수 있습니다.

이 패키지는 이 솔루션에 가장 적합한 네트워크를 사용하기 위해 내부적으로 Agora Video RTC 엔진을 사용합니다.

SwiftUIRtc의 주요 클래스

SwiftUIRtc 패키지는 설계상 상대적으로 가벼우나, 개발자가 라이브 스트리밍 애플리케이션 작업을 즉시 시작하기 위해 필요한 모든 클래스와 메서드를 제공합니다.

AgoraManager

AgoraManager는 세션 관리 및 연결 처리 등 몇 가지 매우 중요한 역할을 합니다. AgoraManager는 채널에 가입 및 탈퇴한 사용자를 추적하여 개발자가 비디오를 렌더링하는 데 필요한 ID를 알 수 있도록 합니다. 이러한 ID는 Agora RTC 엔진의 델리게이트 메서드를 사용하여 추적되며, 공개 변수 allUsers에 저장됩니다.

채널 가입 및 탈퇴 메서드:

• leaveChannel(leaveChannelBlock:destroyEngine:)

joinChannel(_:token:uid:info:)

실현된 델리게이트 메서드:

• rtcEngine(_:didJoinedOfUid:elapsed:)
• rtcEngine(_:didOfflineOfUid:reason:)

AgoraVideoCanvasView

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

예시

위에서 설명한 두 클래스만 사용하면, 장면 내 모든 사용자를 추적하는 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()
        }
    }
}

위와 같이 ScrollView에 표시될 때, 다양한 비디오 피드는 자동으로 스크롤 가능한 목록 뷰에 표시되며, 채널에 참여하는 사용자 수에 따라 크기가 조정됩니다.

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] = [:]
}

And add a couple of additional delegate methods:

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()
    }

‍

결론

SwiftUIRtc는 SwiftUI 애플리케이션에 라이브 스트리밍 기능을 통합하는 과정을 단순화하고 사용 편의성을 제공합니다. AgoraManager 및 AgoraVideoCanvasView를 활용하면 Agora RTC SDK를 통해 비디오 스트림을 추가할 수 있으며, SwiftUI와 호환되지 않는 클래스를 처리할 필요가 없습니다.

오늘 바로 iOS 애플리케이션에 SwiftUIRtc를 사용하려면 다음 패키지를 추가하세요:

개요

SwiftUI는 다양한 Apple 플랫폼용 사용자 인터페이스를 구축하는 현대적이고 직관적인 방법을 제공하며 앱 개발의 게임 체인저로 부상했습니다. SwiftUI는 강력한 기능을 제공하지만, 라이브 스트리밍 애플리케이션을 위한 견고한 솔루션이 부족합니다. 그러나 SwiftUIRtc 패키지는 SwiftUI에 라이브 스트리밍 기능을 원활하게 통합함으로써 이 간극을 메웁니다. 이 기사에서는 SwiftUIRtc가 SwiftUI의 힘을 활용해 매력적인 라이브 스트리밍 애플리케이션을 개발하는 방법을 탐구합니다.

SwiftUI에서의 라이브 스트리밍 과제

라이브 스트리밍은 실시간 비디오 렌더링, 미디어 동기화, 상호작용 기능 등에서 독특한 과제를 제기합니다. SwiftUI는 강력한 UI 프레임워크이지만 라이브 스트리밍 구성 요소에 대한 네이티브 지원을 제공하지 않습니다. 개발자들은 SwiftUI 앱에 라이브 스트리밍 기능을 구현하기 위해 UIViewRespresentable을 반복적으로 사용해 제3자 라이브러리와 복잡한 우회 방법을 통합하는 어려운 과제에 직면합니다.

SwiftUI 라이브 스트리밍 솔루션

패키지 SwiftUIRtc는 SwiftUI에서 라이브 스트리밍을 위해 필요한 번거로운 우회 방법을 해결하기 위해 설계되었습니다. 이 패키지는 개발자가 SwiftUI 애플리케이션에 라이브 스트리밍 기능을 쉽게 통합할 수 있도록 작은 도구 세트와 SwiftUI 구성 요소를 제공합니다. SwiftUIRtc를 활용함으로써 개발자는 라이브 스트리밍 통합과 관련된 장애물을 극복하고 사용자에게 우수한 스트리밍 경험을 제공하는 데 집중할 수 있습니다.

이 패키지는 이 솔루션에 가장 적합한 네트워크를 사용하기 위해 내부적으로 Agora Video RTC 엔진을 사용합니다.

SwiftUIRtc의 주요 클래스

SwiftUIRtc 패키지는 설계상 상대적으로 가벼우나, 개발자가 라이브 스트리밍 애플리케이션 작업을 즉시 시작하기 위해 필요한 모든 클래스와 메서드를 제공합니다.

AgoraManager

AgoraManager는 세션 관리 및 연결 처리 등 몇 가지 매우 중요한 역할을 합니다. AgoraManager는 채널에 가입 및 탈퇴한 사용자를 추적하여 개발자가 비디오를 렌더링하는 데 필요한 ID를 알 수 있도록 합니다. 이러한 ID는 Agora RTC 엔진의 델리게이트 메서드를 사용하여 추적되며, 공개 변수 allUsers에 저장됩니다.

채널 가입 및 탈퇴 메서드:

• leaveChannel(leaveChannelBlock:destroyEngine:)

joinChannel(_:token:uid:info:)

실현된 델리게이트 메서드:

• rtcEngine(_:didJoinedOfUid:elapsed:)
• rtcEngine(_:didOfflineOfUid:reason:)

AgoraVideoCanvasView

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

예시

위에서 설명한 두 클래스만 사용하면, 장면 내 모든 사용자를 추적하는 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()
        }
    }
}

위와 같이 ScrollView에 표시될 때, 다양한 비디오 피드는 자동으로 스크롤 가능한 목록 뷰에 표시되며, 채널에 참여하는 사용자 수에 따라 크기가 조정됩니다.

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] = [:]
}

And add a couple of additional delegate methods:

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()
    }

‍

결론

SwiftUIRtc는 SwiftUI 애플리케이션에 라이브 스트리밍 기능을 통합하는 과정을 단순화하고 사용 편의성을 제공합니다. AgoraManager 및 AgoraVideoCanvasView를 활용하면 Agora RTC SDK를 통해 비디오 스트림을 추가할 수 있으며, SwiftUI와 호환되지 않는 클래스를 처리할 필요가 없습니다.

오늘 바로 iOS 애플리케이션에 SwiftUIRtc를 사용하려면 다음 패키지를 추가하세요:

https://github.com/AgoraIO-Community/SwiftUIRtc.git‍