Transparent webview: underlying layer sometimes not visible

Question

In my phonegap-based iPhone web-app I implemented a plugin that uses AVCaptureVideoPreviewLayer to take a photo. To do so, when the plugins' startCamera method is called, I set the background of the webview to be transparent and insert the video capture layer below the layer of the webview. This works as expected (most of the time).

But for some strange reason, when I execute startCamera for the first time (after a fresh app start), the video layer isn't visible. Instead, the webview displays a white background, although the background color is set to clearColor. For all subsequent executions, the video layer is visible.

This is what I'm doing to show the camera:

AVCaptureSession * session = [[AVCaptureSession alloc] init];
session.sessionPreset = AVCaptureSessionPresetHigh;

AVCaptureVideoPreviewLayer * videoLayer = 
  [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];
videoLayer.frame = self.webView.bounds; 

CALayer *webViewLayer = self.webView.layer;    
[webViewLayer.superlayer insertSublayer:videoLayer below:webViewLayer];    

// ... session setup excluded
[session startRunning];    

[self.webView setBackgroundColor:[UIColor clearColor]];
[self.webView setOpaque:NO];

In stopCamera() I do the following:

if (session) {
    [session stopRunning];
}
[self.webView setBackgroundColor:[UIColor blackColor]];
[self.webView setOpaque:NO];
if (videoLayer != nil) {
    [videoLayer removeFromSuperlayer];
}

Any ideas why the camera layer isn't visible for the first time?

where is your START CAMERA method? – Ashish P Feb 03 '14 at 05:42 — Ashish P, Feb 03 '14 at 05:42

score 1 · Accepted Answer · answered Dec 14 '11 at 09:49

1

Solved it: The problem was, that setting the opacity flag of the webview to NO didn't have any effect when it was done in startCamera(). To fix it, I set the opacity of the webview earlier - just when it was created. A webview with no opacity doesn't mean that it is transparent though - you also need to set the background color to [UIColor clearColor] (this is what is done in startCamera(); in stopCamera() the background color is set back to [UIColor blackColor]).

answered Dec 14 '11 at 09:49

Andreas Pasch

125
1
9

Thanks, this helped me solve my problem with Cordova webview not being transparent even though I set webview's opaque=NO and background color to [UIColor clearColor]. The solution is to set the opaque flag early just when it was created, while clearColor need to be set AFTER html elements are being placed, because clearColor will be overwritten by cordova when placing html elements. – Bruce Nov 20 '15 at 03:26

Transparent webview: underlying layer sometimes not visible

1 Answers1