SwiftUI - MJPEG 视频流不更新视图中的图像

Question

鉴于以下StreamView()：

struct StreamView: View {
    @StateObject var stream = MJPEGStream()

    var body: some View {
        MpegView(mjpegStream: self.stream)
            .background(.red)
            .frame(width: 200, height: 200)
    }
}

struct StreamView_Previews: PreviewProvider {
    static var previews: some View {
        StreamView()
    }
}

我有以下实现ObservableObject的MpegView()：

class MJPEGStream: ObservableObject {
    @Published var stream = MJPEGStreamLib()
    
    init() {
        self.stream.play(url: URL(string: "http://192.168.1.120/mjpeg/1")!)
    }
}

struct MpegView: View {
    @ObservedObject var mjpegStream: MJPEGStream
    
    var body: some View {
        Image(uiImage: self.mjpegStream.stream.image)
            .resizable()
    }
}

基本上，以下类将 var image = UIImage() 的实例替换为 MJPEG 流的更新图像：

class MJPEGStreamLib: NSObject, URLSessionDataDelegate {
    enum StreamStatus {
        case stop
        case loading
        case play
    }
    
    var receivedData: NSMutableData?
    var dataTask: URLSessionDataTask?
    var session: Foundation.URLSession!
    var status: StreamStatus = .stop
    
    var authenticationHandler: ((URLAuthenticationChallenge) -> (URLSession.AuthChallengeDisposition, URLCredential?))?
    var didStartLoading: (() -> Void)?
    var didFinishLoading: (() -> Void)?

    var contentURL: URL?
    var image = UIImage()
    
    override init() {
        super.init()
        self.session = URLSession(configuration: URLSessionConfiguration.default, delegate: self, delegateQueue: nil)
    }
    
    convenience init(contentURL: URL) {
        self.init()
        self.contentURL = contentURL
        self.play()
    }
    
    deinit {
        self.dataTask?.cancel()
    }
    
    // Play function with url parameter
    func play(url: URL) {
        // Checking the status for it is already playing or not
        if self.status == .play || self.status == .loading {
            self.stop()
        }
        
        self.contentURL = url
        self.play()
    }
    
    // Play function without URL paremeter
    func play() {
        guard let url = self.contentURL, self.status == .stop else {
            return
        }
        
        self.status = .loading
        DispatchQueue.main.async {
            self.didStartLoading?()
        }
        
        self.receivedData = NSMutableData()
        
        let request = URLRequest(url: url)
        self.dataTask = self.session.dataTask(with: request)
        self.dataTask?.resume()
    }
    
    // Stop the stream function
    func stop() {
        self.status = .stop
        self.dataTask?.cancel()
    }
    
    // NSURLSessionDataDelegate
    func urlSession(_ session: URLSession, dataTask: URLSessionDataTask, didReceive response: URLResponse, completionHandler: @escaping (URLSession.ResponseDisposition) -> Void) {
        // Controlling the imageData is not nil
        if let imageData = self.receivedData, imageData.length > 0,
            let receivedImage = UIImage(data: imageData as Data) {
            if self.status == .loading {
                self.status = .play
                DispatchQueue.main.async {
                    self.didFinishLoading?()
                }
            }
            
            // Set the imageview as received stream
            DispatchQueue.main.async {
                self.image = receivedImage
            }
        }
        
        self.receivedData = NSMutableData()
        completionHandler(.allow)
    }
    
    func urlSession(_ session: URLSession, dataTask: URLSessionDataTask, didReceive data: Data) {
        self.receivedData?.append(data)
    }
    
    // NSURLSessionTaskDelegate
    func urlSession(_ session: URLSession, task: URLSessionTask, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        var credential: URLCredential?
        var disposition: URLSession.AuthChallengeDisposition = .performDefaultHandling
        
        // Getting the authentication if stream asks it
        if challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust {
            if let trust = challenge.protectionSpace.serverTrust {
                credential = URLCredential(trust: trust)
                disposition = .useCredential
            }
        } else if let onAuthentication = self.authenticationHandler {
            (disposition, credential) = onAuthentication(challenge)
        }
        
        completionHandler(disposition, credential)
    }
}

然后在我的主要ContentView() 中，我只有：

struct ContentView: View {
    var body: some View {
        StreamView()
    }
}

问题在于MpegView() 中的Image 没有使用从流中接收到的帧进行更新。我不确定这是我对类库还是 @Published 或 @StateObject 属性的实现。

注意：我可以确认流可以通过网络浏览器运行，并且如果我调试 receivedImage 是什么，它是来自流视频的实际帧。

Answer 1

在MJPEGStream 中观察到的属性stream 的值是一个指针，指向MJPEGStreamLib 对象。

该属性更改的唯一时间，以及您的 ObservableObject 将导致 MpegView 被更新的唯一时间是当您首次为指针分配值时 - 当首次创建 MpegView 时。之后，指向对象的指针 永远不会改变，即使它指向的对象正在快速生成图像。所以你的视图永远不会更新。

如果您希望您的 Swift 视图在 MJPEGStreamLib 对象中的图像更改时更新，那么您需要将 MJPEGStreamLib 设为 ObservableObject 并将其 image 属性标记为 @Published。

Answer 2

MJPEGStreamLib 包含静态图像变量，因此图像视图不会更新。您需要使用@State 或@Published 之类的属性包装器来绑定变量。还是不行请在这里评论。我会帮你的