iOS AirPlay Second Screen Tutorial

Question

I am looking at adding AirPlay capabilities to one of my ViewControllers. The View Controller just shows a UIWebView. What I want to do is add a button that will mirror this content to an Apple TV. I know system-wide mirroring can be done, but it doesn't fill up the entire screen, has black bars all around. I have been searching online, but most everything I have found is way back from iOS 5 and out of date. Could someone point me in the direction of a tutorial or drop-in library that would help out? I just need it to mirror the content of just one view to be full-screen on Apple TV.

So far, here is what I have done, but I believe it only creates the second Window, without putting anything on it.

In the AppDelegate, I create a property for it:

@property (nonatomic, retain) UIWindow *secondWindow;

In didFinish method of AppDelegate I run:

 NSNotificationCenter *center = [NSNotificationCenter defaultCenter];

    [center addObserver:self selector:@selector(handleScreenDidConnectNotification:)
                   name:UIScreenDidConnectNotification object:nil];
    [center addObserver:self selector:@selector(handleScreenDidDisconnectNotification:)
                   name:UIScreenDidDisconnectNotification object:nil];

Then in AppDelegate I have:

- (void)handleScreenDidConnectNotification:(NSNotification*)aNotification
{
    UIScreen *newScreen = [aNotification object];
    CGRect screenBounds = newScreen.bounds;

    if (!self.secondWindow)
    {
        self.secondWindow = [[UIWindow alloc] initWithFrame:screenBounds];
        self.secondWindow.screen = newScreen;

        // Set the initial UI for the window.
    }
}

- (void)handleScreenDidDisconnectNotification:(NSNotification*)aNotification
{
    if (self.secondWindow)
    {
        // Hide and then delete the window.
        self.secondWindow.hidden = YES;
        self.secondWindow = nil;

    }

}

In the viewController in which I would like to allow to mirror the WebView on Apple TV, I have:

- (void)checkForExistingScreenAndInitializeIfPresent
{
    if ([[UIScreen screens] count] > 1)
    {
        // Get the screen object that represents the external display.
        UIScreen *secondScreen = [[UIScreen screens] objectAtIndex:1];
        // Get the screen's bounds so that you can create a window of the correct size.
        CGRect screenBounds = secondScreen.bounds;

       appDelegate.secondWindow = [[UIWindow alloc] initWithFrame:screenBounds];
        appDelegate.secondWindow.screen = secondScreen;

        // Set up initial content to display...
        // Show the window.
       appDelegate.secondWindow.hidden = NO;
        NSLog(@"YES");

    }
}

I got all this from here. However, that's all that it shows, so I'm not sure how to get the content onto that screen.

Plasterboard

Did you ever come up with a solution? I'm trying to do the same thing right now. – Bloke

@Bloke Unfortunately, no I did not. I've resorted to having people do airplay screen mirroring, which isn't nearly as elegant or useful, but oh well. 5000 views can't figure it out. – Plasterboard

Answer 1

Depending on what’s going on in your web view, you’ll either have to make a second one pointed at the same page or move your existing one to the new window. Either way, you treat the second window pretty much the same as you do your app’s main window—add views to it and they should show up on the second display.

Incarcerate

I have added to the checkForAdditional... method, changing the root view to the new window, adding the view and subview, but it still does nothing. – Plasterboard

Answer 2

I assume you've seen it, but this is the only sample project I could find: https://github.com/quellish/AirplayDemo/

Here are some related questions that might be worth reading:

does anyone know how to get started with airplay?

Airplay Mirroring + External UIScreen = fullscreen UIWebView video playback?

iOS AirPlay: my app is only notified of an external display when mirroring is ON?

Good luck!

Alejandraalejandrina

Answer 3

There are only two options to do Airplay 'mirroring' at the moment: the system-wide monitoring and completely custom mirroring. Since the system-wide mirroring is not a solution for you, you'll have to go down the way you already identified in your code fragments.

As Noah pointed out, this means providing the content for the second screen, the same way as providing it for the internal display. As I understand you, you want to show the same data/website as before on the internal display, but display it differently in the remote view/webview (e.g. different aspect ratio). One way can be having one webview follow the other in a master/slave setup. You'd have to monitor the changes (like user scolling) in the master and propagate them to the slave. A second way could be rendering the original webview contents to a buffer and drawing this buffer in part in a 'dumb' UIView. This would be a bit faster, as the website would not have to be loaded and rendered twice.

Sphenoid

Just some thoughts on old answers: I think it would be easier to copy the requests of the original webView and call corresponding methods on the "external" copy. Also, when having a different aspect, the websites won't be as hight, so one would need to translate the scroll amount accordingly. – Milamilady

Nevertheless, the OP was looking for a way to display the second window on an AirPlay device. – Milamilady