iOS, 最新消息

SwiftUI 與 RTSP 串流播放

Posted on by 朱克剛
swiftui_rtsp

想要在 App 中播放 RTSP 串流影像最難的地方就是 RTSP 解碼，像我這種不是影像格式專家就一點辦法都沒有，好佳哉借助個大名鼎鼎的 VLCKit 函數庫就完成播放需要的程式碼了。

使用 CocoaPods 安裝 MobileVLCKit 框架，其 Podfile 內容如下：

platform :ios, '9.0'
target 'MyRTSP' do
  use_frameworks!
  pod 'MobileVLCKit'
end

SwiftUI 專案中新增一個 Header File（ .h 檔），內容如下：

#import <MobileVLCKit/MobileVLCKit.h>

然後在專案的 Build Settings 中設定這個 .h 檔，如下：

截圖 2022-11-24 14.01.30

與 Pod 連接好後，現在我們需要在 SwiftUI 中使用 UIKit 的 UIView 物件來播放串流影像，所以先自定義一個結構。

struct RTSPView: UIViewRepresentable {
    @State var mediaPlayer: VLCMediaPlayer!
    @State var url: URL?
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        mediaPlayer.drawable = view
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        if let url {
            let media = VLCMedia(url: url)
            mediaPlayer.media = media
        }
    }
    
    typealias UIViewType = UIView
}

最後播放 RTSP 影像的主程式如下，兩個按鈕：一個播放一個停止。

let str = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"

struct ContentView: View {
    private let mediaPlayer = VLCMediaPlayer()
    
    var body: some View {
        VStack {
            HStack {
                Button("Play") {
                    mediaPlayer.play()
                }
                
                Button("Stop") {
                    mediaPlayer.stop()
                }
            }
            .buttonStyle(.bordered)
            
            RTSPView(mediaPlayer: mediaPlayer, url: URL(string: str))
        }
    }
}

朱克剛
朱克剛

發表迴響