White screen after calling mediaCapture.captureVideo

In Ionic 2, using @ionic-native/media-capture on iOS to capture video, I’m calling mediaCapture.captureVideo() but after recording the video and clicking Use Video, the native video capture page is closed and I see a completely white screen with a long vertical scrollbar. It seems that a white page has been placed on top of my app and so now the user cannot do anything else afterwards.

Here’s the capture:

import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions, CaptureVideoOptions, CaptureAudioOptions } from '@ionic-native/media-capture';

@Injectable()
export class MyService {
    constructor(private mediaCapture: MediaCapture){};
    captureVideo() {
        this.mediaCapture.captureVideo({limit:1, duration:600}).then(
            (data: MediaFile[]) => { alert('done'); return data[0] },
            (err: CaptureError) => { alert(err) }
        ).catch((exception) => { alert(exception) });
    }

We successfully see the ‘done’ alert, but it is shown over the white screen which has already opened.

Versions:

  • Ionic: 2.2.1
  • @ionic-native/media-capture: 3.4.3
  • cordova-plugin-media-capture: 1.4.2

Update

Interestingly when I use the captureAudio() method, I see a similar thing but instead of a full white screen it shows a scrollable white panel on the right side of the screen, approximately 1/4 the width of the screen (iPad, landscape). Looks like a slide in menu but I’m not using one.

Also interestingly, the problem only occurs in Landscape mode on the iPad. When in portrait mode there is no white screen shown.

This appears to be caused by some conflict between the @ionic-native/media-capture and the screen-orientation code. When calling .captureVideo() in landscape mode and the white screen is shown, if you orient the device to portrait the white screen disappears and when oriented back to landscape, it is still gone. This also happens with the 1/4 white screen when using .captureAudio().

Here is a screenshot of the 1/4 white screen problem after calling captureAudio(), recording an audio clip and clicking Done. The Safari Web Inspector is set to show the html element:

image

The Safari Web Inspector shows that the html element is 100% width at this time but only taking up 75% of the screen:

I added the overflow visible but there was no change.

I’ve logged this as a bug here: https://github.com/driftyco/ionic-native/issues/1392