Skip to main content

AirPlay Integration

We have two different solutions to support Airplay, each has its own advantages and disadvantages. To provide you with the most optimal experience, we highly recommend the first solution.

Introduction​

The first solution uses multiple screen support integrated into iOS, and requires the user to scroll down the notification bar and select screen share. Once this action is completed, the developer has full control of the connected screen and all content can be customized to the new screen.

Benefits include:

  • Full control of TV screen and customization
  • Independent volume control
  • Easier to troubleshoot

Limitations​

A disadvantage of using this solution is the slightly unintuitive way of asking the user to start the screen mirroring icon. This can however be mitigated in some ways; for example, only displaying this information on a dialog and using a modified Airplay like button to invoke it.

Integration overview​

This integration requires turning on multiple screen support in the info.plist file. The presence of the “Application Scene Manifest” key in Info.plist opts your app into supporting scenes. The scene delegate, not the app delegate, now owns the window.

By default Application Scene Manifest will contain a single key Application Session Role which in turn will contain another value named default configuration. This should contain the reference to your main storyboard.

To add support for an external screen, you would have to add another value to Application Scene Manifest. The new value should be named External Display Session Role (Legacy). This new item should contain its own default configuration that links to a new storyboard. This will be used for external screens. After the updated configuration your info.plist should look as follows.

image When you run the app and select screen share, the new screen will automatically display the external storyboard on the external screen instead of mirroring the screen.

Controlling the transition

You may manage the transition using the SceneDelegate class. You would have to primarily respond to two callbacks in the class.

func sceneDidBecomeActive(_ scene: UIScene)

func sceneDidDisconnect(_ scene: UIScene)

During both the callbacks, you can check the type of screen that is connecting or disconnecting and respond accordingly.

func sceneDidBecomeActive(_ scene: UIScene){
    guard let windowScene = scene as? UIWindowScene else { return }
    if(windowScene.session.role == .windowExternalDisplay){
        // Do something when external screen just connected
    } 
}

To get the related View Controller of the current windowScene, retrieve the first window and refer to its rootViewController. Once you have the reference you can easily call its public methods or you may set a new rootViewController if desired.

let window = windowScene.windows.first
let controller = window!.rootViewController

if controller is ExternalViewController {
    let externalController = (controller as! ExternalViewController)
    externalController?.startPlayback()
}

Moving a video playing on the main screen to the external screen is a matter of removing the AVPlayerLayer from the last scene and attaching the same AVPlayer to a new AVPlayerLayer on the external screen.

Integration Demo​

You may find the full demo at GitHub - feedfm/Airplay2ndScreen: Example project for using Airplay via screen mirroring

React-native​

If you are using react native you may use a 3rd party library react-native-external-display to get the same notifications and adjust the UI accordingly.