AirPlay selection screen Swift

AVRoutePickerView replaces MPVolumeView for AirPlay

AVRoutePickerView has been introduced in iOS 11 and always users to select playback routes. During WWDC’19 Apple announced that AVRoutePickerView will be in favor for selecting an AirPlay device and will deprecate route button configurations in MPVolumeView! This blogpost will help you update your app to use the AVRoutePickerView.

AirPlay

When playing music or video in an app, developers can add the ability to stream your audio/video to another device with AirPlay. To use this feature, Apple provides MPVolumeView since iOS 2 or AVRoutePickerView since iOS 11.

To select an AirPlay device, the user selects the AirPlay icon provided by either views and the app will prompt a blurred popup view with the available and nearby AirPlay devices:

AirPlay selection screen
AirPlay selection screen

MPVolumeView

MPVolumeView, introduced in iOS 2, can be used to show a volume slider and to select an AirPlay device. The MPVolumeView also provides boolean properties areWirelessRoutesAvailable which return YES if there are available AirPlay devices near, and isWirelessRouteActive which return YES if the user is AirPlay connected.

An implementation of MPVolumeView is rather easy and will usually look like the code example below. The AirPlay button is in a stackView that aligns to the top right corner of our app.

func createAirPlayView() -> MPVolumeView {
    let volumeView = MPVolumeView()
    
    airPlayButton.addSubview(volumeView)

    volumeView.tintColor = UIColor.white
    // We do not want the volume slider function
    volumeView.showsVolumeSlider = false

    // Some constraints...  
  
    return volumeView
}

AVRoutePickerView

Introduced on iOS 11 and is used as the new AirPlay device selector. Unlike MPVolumeView AVRoutePickerView has a delegate, which will notify you when the selection screen is about to present and when it finished presenting. It also offers the activeTintColor property settings, allowing you to customise the color when a user is connected.

The two boolean properties from MPVolumeView, areWirelessRoutesAvailable and isWirelessRouteActive, are unavailable on AVRoutePickerView. Lucky the functionality is not lost. Starting on iOS 13, Apple suggests to use AVRouteDetector.multipleRoutesDetected instead of areWirelessRoutesAvailable and to use AVPlayer.externalPlaybackActive instead of isWirelessRouteActive.

AVRoutePickerView is also enriched with a new boolean in iOS 13: prioritizesVideoDevices! This property will sort video capable output devices on top if set to YES.

An implementation of the AVRoutePickerView is also quite easy and is shown below. The AirPlay button is in a stackView that aligns to the top right corner of our app.

@available(iOS 11.0, *)
open func createAirPlayView() -> AVRoutePickerView {
    let routerPickerView = AVRoutePickerView()
    
    airPlayButton.addSubview(routerPickerView)
    
    routerPickerView.tintColor = .gray
    routerPickerView.activeTintColor = .white

    if #available(iOS 13.0, *) {
        routerPickerView.prioritizesVideoDevices = true
    }
    
    // Some constraints...
    
    return routerPickerView
}

Conclusion

Both views provide you with an easy way to support AirPlay selection and some customisation. Starting in iOS 13 make sure to use the AVRoutePickerView instead of MPVolumeView for AirPlay selection, and do not forget to set the prioritizesVideoDevices on YES or NO depending on your use case!