Displaying Live Photos Using PhotoKit and SwiftUI

I wasn’t aware that you could display live photos until recently. The first thought was to search for some documentation, and surprisingly, it is documented well. This post summarises my experience displaying live photos using PhotoKit and SwiftUI.

PhotoKit contains a class called PHLivePhoto. You can use this to reference Live Photos—a picture that includes motion and sound from the moments just before and after its capture. Then, use PHLivePhotoView() to display Live Photos in your app.

Apple has an article on Displaying Live Photos. It helps you provide the same interactive playback of Live Photos as the iOS Photos app.

For example, you’ll create a sample app that uses PHPickerViewController() to get the live photo from the user’s library and display it into the PHLivePhotoView().

Let’s get started!

PHPickerViewController and UIViewControllerRepresentable

In SwiftUI, you cannot use a view controller directly. So, you’ll wrap PHPickerViewController() into one. This representable will take an array of PHLivePhoto as a binding variable to update the parent SwiftUI view accordingly.

struct LivePhotosPicker: UIViewControllerRepresentable {
  @Binding var livePhotos: [PHLivePhoto]
  
  func makeUIViewController(context: Context) -> PHPickerViewController {
    var configuration = PHPickerConfiguration()
    configuration.filter = .livePhotos
    configuration.selectionLimit = 0
    
    let pickerViewController = PHPickerViewController(configuration: configuration)
    pickerViewController.delegate = context.coordinator
    return pickerViewController
  }
  
  func updateUIViewController(_ uiViewController: PHPickerViewController, context: Context) {}
 }

PHPickerViewController() requires you to pass it a PHPickerConfiguration() instance. You can configure it in various ways. For this post, you’ll only display the Live Photos in the sample app, so let’s filter out only the Live Photos:

 configuration.filter = .livePhotos

Then, you can set the selection limit. The default value is 1, and 0 means unlimited selection. After creating the instance of PHPickerViewController() and passing the required configuration, you need to set the delegate. The delegate provides us with a method that gives an array of users’ selected assets from their library.

For this, create a Coordinator class:

struct LivePhotosPicker: UIViewControllerRepresentable {
  @Environment(\.presentationMode) var presentationMode
  
  /* 
  The above code goes here.
  */

  func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }
  
  class Coordinator: NSObject, UINavigationControllerDelegate, PHPickerViewControllerDelegate {
    let parent: LivePhotosPicker
    
    init(_ parent: LivePhotosPicker) {
      self.parent = parent
    }
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
      let itemProviders = results.map(\.itemProvider)
      
      for item in itemProviders {
        if item.canLoadObject(ofClass: PHLivePhoto.self) {
          item.loadObject(ofClass: PHLivePhoto.self) { photo, error in
            if let photo = photo as? PHLivePhoto {
              self.parent.livePhotos.append(photo)
              
            }
          }
        }
      }
      
      parent.presentationMode.wrappedValue.dismiss()
    }
  }
}