GPUImageUIElement overlay size

Question

I'm trying to record a video with some overlay text using GPUImage library. Recording with overlay works so far, but I can't achieve the overlay to have proper size. No matter which frame I use by initialization, the overlay view is always take the whole size of a preview layer (GPUImageView). I tried to add the overlay both in storyboard and programmatically. Here is my code:

camera = GPUImageVideoCamera(sessionPreset: AVCaptureSessionPresetHigh, cameraPosition: AVCaptureDevicePosition.Back)
camera.outputImageOrientation = UIInterfaceOrientation.LandscapeRight
camera.horizontallyMirrorFrontFacingCamera = false
camera.horizontallyMirrorRearFacingCamera = false

filterView = self.view as! GPUImageView

filter = GPUImageBrightnessFilter()
blendFilter = GPUImageAlphaBlendFilter()
blendFilter.mix = 1.0

camera.addTarget(filter)

// here I try to add a label as UIElement
let label = UILabel(frame: CGRect(x: 10, y: 10, width: 100, height: 30))
label.text = "Demo text"
label.textColor = UIColor.redColor()
label.font = UIFont.systemFontOfSize(17.0)
label.backgroundColor = UIColor.clearColor()
view.addSubview(label) // for test purposes

uiElementInput = GPUImageUIElement(view: label)

filter.addTarget(blendFilter)
uiElementInput.addTarget(blendFilter)
blendFilter.addTarget(filterView)

filter.frameProcessingCompletionBlock = { filter, time in
  self.uiElementInput.update()
}

camera.startCameraCapture()

The result appears so:

How can I get UIElement to have a smaller size like the label as part of view? The idea is to add a predefined overlay view (not just a label), but it has also wrong dimensions.

Thank you!

score 4 · Accepted Answer · answered Mar 17 '16 at 07:07

Hello Andrey Gershengoren,

You should set the size of label view as same with camera capture session preset size.

If you choose AVCaptureSessionPreset640x480, you should set label's size to (640, 480).

I wrote the code for you.

import UIKit
import GPUImage

class ViewController: UIViewController {

    @IBOutlet weak var filterView: GPUImageView!
    var videoCamera : GPUImageVideoCamera!
    var uiElement: GPUImageUIElement!
    var filter:GPUImageBrightnessFilter!
    var blendFilter: GPUImageAlphaBlendFilter!
    var uiElementInput: GPUImageUIElement!

    override func viewDidLoad() {
        super.viewDidLoad()
        videoCamera = GPUImageVideoCamera(
            sessionPreset: AVCaptureSessionPreset640x480,
            cameraPosition: AVCaptureDevicePosition.Back)
        videoCamera.outputImageOrientation = .Portrait
        videoCamera.horizontallyMirrorFrontFacingCamera = false
        videoCamera.horizontallyMirrorRearFacingCamera = false

        filter = GPUImageBrightnessFilter()
        blendFilter = GPUImageAlphaBlendFilter()
        blendFilter.mix = 1.0

        videoCamera.addTarget(filter)

        // here I try to add a label as UIElement
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 640, height: 480))
        label.text = "Demo text"
        label.textColor = UIColor.redColor()
        label.font = UIFont.systemFontOfSize(17.0)
        label.backgroundColor = UIColor.clearColor()
        label.textAlignment = .Center

        uiElementInput = GPUImageUIElement(view: label)

        filter.addTarget(blendFilter)
        uiElementInput.addTarget(blendFilter)
        blendFilter.addTarget(filterView)

        filter.frameProcessingCompletionBlock = { filter, time in
            self.uiElementInput.update()
        }

        videoCamera.startCameraCapture()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

The result is blow:

thank you for your replay! I finally also figured out that I need to set the same size for label as the preset dimensions. After that I tried with a subview I created in storyboard. So I had to add an empty view with size the same as my UIScreen.mainScreen().bounds.size and then add the designed view to this placeholder view. After this manipulations I finally got right dimensions for a subview. — Andrey Gershengoren, Mar 17 '16 at 21:31
@BurtK how would i go about positioning the label (e.g. add the label to the bottom left of the screen), i've tried using GPUImageTransformFilter but didn't know how to implement it properly. — Sam Bing, Jul 15 '17 at 10:59
@SamBing Hi, You should use container uiview which has full screen bounds. You can find example code at https://github.com/skyfe79/TIL/blob/master/about.iOS/about.GPUImage/RenderUIElement/RenderUIElement/ViewController.swift — BurtK, Jul 16 '17 at 01:57

GPUImageUIElement overlay size

1 Answers1