iPhone Life magazine

Quick Tip: Displaying and Recording AirPlay-Capable iPhone and iPod touch Screens Externally

This article is meant for advanced users and programmers. However, non-techies can easily understand the generic tips and trick sections.

Answering a question from the Macrumors forum, I've made some serious tests to find out how you can best record the contents of the iPhone 5's screen if:
- you don't want to purchase an HDMI recorder so you can use the HDMI adapter
- you need true pixel-by-pixel mirroring

Unfortunately, the HDMI-Lightning adapter, as has already been pointed out:
- always generates a 1080p output
- always uses overscan (unless you're lucky to have a monitor or projector which, when driven via a HDMI – DVI-D cable, makes the iPhone disable overscan), which itself rescales
- can't transfer video at full 1080p resolution as the underlying en/decoding algorithm, it rescales videos to 900p.

For the tests, I've used a very simple app with the sole function of displaying an image in its resource bundle in order to avoid relying on the built-in Photos app, which is buggy when it comes to TV output (dedicated article).

Should you want to try it on your own iPhone, it's available for download HERE. You'll  need to put ISO_12233-reschart-169-fhd.png (available for download HERE), in the DisplayCheckerboardOniPhone5InnerScreen subdirectory before loading it in Xcode.

As the original question asked about the quite excellent Reflector ($12.99) client, I've examined it. This, however, doesn't mean other software-based solutions aren't great. Some of them are. For example, if you want to record a video of the screen right on your iDevice without having to use a desktop computer, you can use the essential “Display Recorder” app on jailbroken devices, developed by the same Ryan Petrich as the also-essential DisplayOut Bible." A new app, RecordMyScreen, also is worth mentioning, albeit it's still quite a bit weaker than Ryan Petrich's Display Recorder (no audio recording, for example). It, as opposed to Display Recorder, doesn't require jailbreaking.

Configuring Reflector

First and foremost, if you really want to use Reflector for recording your iPhone 5 (iPod touch 5 / iPhone 4S) screen, you must switch it to optimized iPhone 5 (or, with older, 3:2 Retina screens, 960*640) mode in preferences:



Should you forget this, the resulting mirrored picture will be of much lower resolution. If, for example, you stick with the default “Any Device (1280*720)” mode, in Portrait mode, the height will be 720 rows, which is smaller than both the old, 3:2 3.5” screens (960*640) and the new, 16:9 4” ones (1136*640).

That is, particularly if you want to record screen footage, double check to make sure you properly set the device type.

New 4” screens and Portrait mode recording

If you use the built-in recorder (Device > Start Recording) for recording in Reflector, you'll note that, in Portrait mode, the recorded footage will be of 1080 pixels high and not 1136. This also means rescaling will take place, completely destroying fine details. Let  me show you an example (a direct frame grab from a recorded session):



(Please consult my previous articles on how this checkerboard should be evaluated. Also note that, starting with this crop, you are supposed to click the thumbnail for the full, original image on Flickr so that you can see the entire image, not just a small crop of it. Finally, as you can see based on the status row above, all the shots are taken on my iPhone 5 running iOS 7 beta 1.)

Should you want to avoid this, use an operating system-level recorder (for example, ScreenFlow) after making sure you select 1:1 pixel mapping (via Device > Scale: Actual Size). An example ScreenFlow frame grab from a 1920*1200 recording on my 17” MBP:



This will, of course, only work on desktops with 1200 rows or more – for example, the old (and, unfortunately, discontinued) 17” MBP series, which sports a WUXGA (1920*1200) screen. On models with lower-resolution screens you can't use external recorders to do this trick.

Comparison Time: Wireless vs. Wired

Compared to the wired Lightning-HDMI approach, Reflector delivers much better pixel-by-pixel rendering, as it doesn't use any kind of scaling. Let me show you some examples:

This is the wired mirroring in Portrait orientation:


And, as has already been shown, this is the (unscaled) wireless one to Reflector, recorded by an external client on an WUXGA screen:




Let's see how the landscape orientation compares. The wired Lightning-HDMI adapter delivers pretty bad results because of the overscan and the several rescales:



And the wireless (Reflector), flawless one:



Can I route the signal through an Apple TV 2/3 via AirPlay and record the HDMI output of the latter?

Not a good idea – it'll be scaled to either 720p or 1080p, resulting in major small detail deterioration.

Appendix One - What about the background multimedia playback in iOS 7?

Now that I've used iOS 7 beta 1, screenshots in the above article and elaborated on both wired and wireless (AirPlay) video streaming to external receivers, let me also elaborate on whether there are any changes in the background, that is, when running any other app (including the operating system itself) in the foreground.

Multitasking-wise, many people think Apple's new additions to the background model elevates the operating system to be far superior to Android or Windows RT.

Unfortunately, this isn't the case with multimedia (either). Exactly the same restrictions apply as in pre-iOS 7 operating system versions:

- not any kind of cabled output, not even via cables inherently incapable of mirroring (composite & component);
- wireless AirPlay only works in background when not in mirroring mode. By default, Videos is able to play back local videos this way, (but not via Home Sharing!). In addition, several App Store players with enabled background mode allow for the same, assuming you play back iOS-native files, that is, ones that can be natively decoded by the AirPlay receiver. Note that top AppStore players like nPlayer and GoodPlayer must be manually configured to allow for background playback. I've published a lot of info on all this HERE.

Incidentally, speaking of the stock Videos app, Apple at last has got ridden of the ugly non-proportional fonts of their proprietary closed captions. Now, these captions are rendered using nice, proportional fonts:



Feel free to compare this to the first frame grab in Section “1.1.2.1 Apple CC's” of my Closed Captioning bible.

Incidentally, the same frame with the new Videos UI displayed:



Appendix Two – the Source Code for my Image Displaying App

As has already been pointed out, it's REALLY simple. Assuming the Full HD-sized ISO_12233-reschart-169-fhd.png file is copied to the resource bundle, it just displays it in a UIImageView programmatically added to the current view. This means the best place to put it is in a View Controller; for example, the viewDidLoad method of a simple one-view project. The UIImageView's size is directly set to be the same as the source image (here, full HD).

    UIImage* resChartImg = [UIImage imageNamed:@"ISO_12233-reschart-169-fhd.png"];
    CGFloat widthOfImage = resChartImg.size.width;
    CGFloat heightOfImage = resChartImg.size.height;
    UIImageView* picv =  [[UIImageView alloc] initWithFrame:CGRectMake(0, 0,  widthOfImage/[UIScreen mainScreen].scale, heightOfImage/[UIScreen mainScreen].scale)];
    picv.image = resChartImg;
    [self.view addSubview:picv];

 

Topics:
Email icon
Want more? Get our weekly newsletter:

Werner Ruotsalainen is an iOS and Java programming lecturer who is well-versed in programming, hacking, operating systems, and programming languages. Werner tries to generate unique articles on subjects not widely discussed. Some of his articles are highly technical and are intended for other programmers and coders.

Werner also is interested in photography and videography. He is a frequent contributor to not only mobile and computing publications, but also photo and video forums. He loves swimming, skiing, going to the gym, and using his iPads. English is one of several languages he speaks.