Sensitive Data Occlusion and Screen Blurring

Suggest Edits

🚧

Important Notice

Currently, new screen occlusion methods and screen blurring are only supported on iOS v3.4.1+, Android v3.4.0+, React Native v5.4.0, SwiftUI v1.0.0 and Flutter v2.1.0 SDKs.

Once more frameworks are supported, we will update the necessary steps to benefit from the new occlusion configurations.

For older SDK versions see how to Occlude in Previous SDK versions

UXCam ensures that as a controller you can use our platform and fulfill your obligations under GDPR. However, if you collect any PII data in your app such as email address, phone, or credit card number you should use our API to hide it.

You can choose to hide:

  • Texts: when you only collect PII data with text fields
  • Screen Views: when you need to hide a specific section of your screen.
  • Screens: when you need to hide the whole screen, e.g. payment screen.

Sensitive information will be hidden under red boxes or blurred screens on the device before rendering the video and therefore never sent to UXCam. Make sure that all this info is hidden before releasing your app to production to make sure your users’ PII is never recorded.

Please keep in mind that when hiding sensitive information you can still record gestures for that view or screen, however, if you’re hiding passwords or keywords you should enable the option to hide gestures as well.

Occlude The Entire Screen with Overlay

You can configure different overlay options with the following:

UXCamOverlay overlay = new UXCamOverlay.Builder()
                              .withoutGesture(false)
                              .build();

UXCam.applyOcclusion(overlay); //To apply overlay
UXCam.removeOcclusion(overlay); //To remove overlay

let overlay = UXCamOverlaySetting(color: .yellow)

UXCam.applyOcclusion(overlay)

UXCam.removeOcclusion() // This removes all manual occlusion
UXCam.removeOcclusion(of: .overlay)  // This removes manual occlusion of type overlay

import 'package:flutter_uxcam/uxoverlay.dart'; //Import this for Overlay

FlutterUXOverlay overlay = FlutterUXOverlay(
        color: Colors.red,
        hideGestures: true // optional, default true
    );

FlutterUxcam.applyOcclusion(overlay); //To apply overlay
FlutterUxcam.removeOcclusion(overlay); //To remove overlay

import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const overlay = {
   type: UXCamOcclusionType.Overlay, // compulsory to determine overlay type
     color: 0xff00ee // hex integers in 0xrrggbb format
   hideGestures: true // optional, default true
   screens: [“screen1”, “screen2”] // optional, default all screens
 }

RNUxcam.applyOcclusion(overlay); // apply overlay
RNUxcam.removeOcclusion(overlay); // remove overlay

let overlay = OverlaySetting()
    // To apply at any point without considering screen
        UXCamCore.applyOcclusion(overlay)

    // To stop the occlusion that was applied before
    UXCamCore.removeOcclusion()

Available overlay options are:

withoutGesture(boolean withoutGesture) || hideGestures(boolean hideGestures)
Allows the user to configure wether to capture gesture in the occluded screen or not. Passing in false to this method tells the SDK to capture gestures. Default is true, so by default the gestures are not captured.

screens(List < String > screens) - Use it in the configuration object
Allows you to define the screens where the overlay is to either be applied or not, depending on the value passed to excludeMentionedScreens(boolean excludeMentionedScreens).

By default, if no screens are passed, the overlay is applied to all the screens unless explicitly removed. This acts as a global setting and will override all other occlusion settings defined for all screens. The occlusion must be removed to revert this action.

If screens are passed, you have the ability to either apply overlay on the mentioned screens or to exclude the mentioned screens from being overlayed.

excludeMentionedScreens(boolean excludeMentionedScreens)
This option should be used in conjunction with screens(List < String > screens).

If the passed in value is true, it tells the SDK to exclude the mentioned screens from occlusion, while applying the occlusion to the rest of the screens in the app.

If the passed in value is false, it tells the SDK to apply occlusion only to the screens that have been passed.

Default value is false.

25342534

You'll see the desired screen completely hidden while your users navigate through it.

Blur The Entire Screen

Blur is a new occlusion API that allows you to blur screen records of screens. This lets you obtain information regarding the state of the screen and user interaction, while also maintaining privacy in sensitive screens.

This is useful to set all the occlusion/Blur from one place of the application without having to set it individually in different screens.

You can configure different options using the following: 

UXCamBlur blur = new UXCamBlur.Builder().build();

//Example
UXCamBlur blur = new UXCamBlur.Builder()
                      .blurRadius(10) //default 20
                      .withoutGesture(false)
                      .build();

UXCam.applyOcclusion(blur); //To apply the Blurring

let blurSetting = UXCamBlurSetting(radius: 5)
UXCam.applyOcclusion(blurSetting)

UXCam.removeOcclusion() // This removes all manual occlusion
UXCam.removeOcclusion(of: .blur) // This removes manual occlusion of type blur

//Import this on the screen you are trying to Blur
import 'package:flutter_uxcam/uxblur.dart';

FlutterUXBlur blur = FlutterUXBlur(
        blurRadius: 10,
        blurType: BlurType.gaussian,
        hideGestures: true // optional, default true
    );

FlutterUxcam.applyOcclusion(blur); //To apply blur
FlutterUxcam.removeOcclusion(blur); //To remove blur

import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const blur = {
   type: UXCamOcclusionType.Blur, // compulsory to determine blur type
   blurRadius: 20 // optional default 10
   hideGestures: true // optional, default true
   screens: [“screen1”, “screen2”] // optional, default all screens
 }
 
RNUxcam.applyOcclusion(blur); // apply blur
RNUxcam.removeOcclusion(blur); // remove blur

let blur = BlurSetting()
    // To apply at any point without considering screen
        UXCamCore.applyOcclusion(blur)

    // To stop the occlusion that was applied before
    UXCamCore.removeOcclusion()

Available blur options are:

blurRadius(int blurRadius)
This option allows you to define the blur radius to be used for blurring. The higher the value, the more blurred the resulting video is going to be.

withoutGesture(boolean withoutGesture) || hideGestures(boolean hideGestures)
Same as overlay. Please refer to overlay section.

screens(List < String > screens) - Use it in the configuration object
Same as overlay. Please refer to overlay section.

excludeMentionedScreens(boolean excludeMentionedScreens)
Same as overlay. Please refer to overlay section.

736736

You'll see your desired screens with a blur on top.

Examples on blur radius property customization:

Blur radius customization examplesBlur radius customization examples

Blur radius customization examples

Occlude all Text Fields

Similar to the new Overlay and Blur APIs:

//Create the object
UXCamOccludeAllTextFields occludeFields = new UXCamOccludeAllTextFields();

UXCam.applyOcclusion(occludeFields); //To apply occlusion
UXCam.removeOcclusion(occludeFields); //To remove the occlusion

let hideTextfields = UXCamOccludeAllTextFields()

UXCam.applyOcclusion(hideTextfields) //To apply occlusion

UXCam.removeOcclusion() //This removes all manual occlusion
UXCam.removeOcclusion(of: .occludeAllTextFields) // This removes manual occlusion of type occlude text fields

Not supported

import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const hideTextFields = {
   type: UXCamOcclusionType.UXOcclueAllTextFields
   screens: [“screen1”, “screen2”] // optional, default all screens
 }
 
RNUxcam.applyOcclusion(hideTextFields); // apply hide text fields
RNUxcam.removeOcclusion(hideTextFields); // remove hide text fields

let hide = OccludeAllTextFields()
    // To apply at any point without considering screen
        UXCamCore.applyOcclusion(hide)

    // To stop the occlusion that was applied before
    UXCamCore.removeOcclusion()
25342534

All fields identified as text will be occluded.

Hide Sensitive View

Use it to hide specific views with sensitive information that you don't want to record.

The API parameters are:

sensitiveView: A View object that contains sensitive information.

UXCam.occludeSensitiveView(_ sensitiveView: UIView)

UXCam.occludeSensitiveView(View sensitiveView);

RNUxcam.occludeSensitiveView: (sensitiveView: any) => void
    
//Example
<Button ref= {view => RNUxcam.occludeSensitiveView(view)}/>

Not supported

uxcamOcclude() -> some View


//eg.
var body: some View  
{  
    VStack
    {
        Text("Personal data: XYZ")  
            .uxcamOcclude()  

        Text("Personal data: Gestures seen")  
            .uxcamOcclude(blockGestures: false)
    }
}

void UXCam.OccludeSensitiveView(View sensitiveView)

You can occlude sensitive elements in your app by adding uxcam-occlude as your element class name.
// Example
<label for="email">Email:</label>
<input type="email" id="email" class="uxcam-occlude" name="email">

Usage from configuration object

It's also possible to pass a list of occlusions (except Sensitive View) to be applied during configuration. For example:

UXCamBlur blur = new UXCamBlur.Builder()
        .blurRadius(20)
        .screens(Arrays.asList("ActivitySecret", "LoginActivity"))
        .build();

UXCamOverlay overlay = new UXCamOverlay.Builder()
        .screens(Arrays.asList("PaymentActivity", "ProfileActivity"))
        .build();

UXCamOccludeAllTextFields textFields = new UXCamOccludeAllTextFields.Builder()
        .screens(Arrays.asList("PaymentActivity", "ProfileActivity"))
        .build();
        
UXConfig config = new UXConfig.Builder(appKey)
        .occlusions(Arrays.asList(blur, overlay, textFields))
        .setAutomaticScreenNameTagging(true)
        .enableImprovedScreenCapture(true)
        .build();
UXCam.startWithConfiguration(config);

let configuration = UXCamConfiguration(appKey: "YourAppKey")

let blurSetting = UXCamBlurSetting(radius: 5)
let overlay = UXCamOverlaySetting(color: .yellow)
let occlusion = UXCamOcclusion()
    
blurSetting.hideGestures = false 
occlusion.apply(blurSetting, screens: ["LoginViewController"]) 

configuration.occlusion = occlusion
configuration.enableAutomaticScreenNameTagging = false 
configuration.enableAdvancedGestureRecognition = false 

UXCam.optIntoSchematicRecordings()
UXCam.start(with: configuration)

import 'package:flutter_uxcam/uxblur.dart'; //Import this for Blurring
import 'package:flutter_uxcam/uxoverlay.dart'; //Import this for Overlay

FlutterUXBlur blur = FlutterUXBlur(
    blurRadius: 10, 
    blurType: BlurType.gaussian, 
    hideGestures: true 
    screens: [“LoginScreen”, “PaymentScreen”] 
);

FlutterUXOverlay overlay = FlutterUXOverlay(
   color: Colors.red 
   hideGestures: true 
   screens: [“LoginScreen”, “PaymentScreen”]
);

FlutterUxConfig config = FlutterUxConfig(
    userAppKey: "UXCAM_APP_KEY", 
    occlusions: [blur] // can contain blur and overlay
); 

FlutterUxcam.startWithConfiguration(config);

import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const blur = {
   type: UXCamOcclusionType.Blur, // compulsory to determine blur type
   blurRadius: 20 // optional default 10
   hideGestures: true // optional, default true
   screens: [“screen1”, “screen2”] // optional, default all screens

 }
 
 const overlay = {
   type: UXCamOcclusionType.Overlay, // compulsory to determine blur type
   color: 0xff00ee // hex integers in 0xrrggbb format
   hideGestures: true // optional, default true
   screens: [“screen1”, “screen2”] // optional, default all screens

 }

const configuration = {
  userAppKey: 'YOUR UXCAM API KEY GOES HERE',
    occlusions: [overlay, blur]
 }

RNUxcam.startWithConfiguration(configuration);

let blur = BlurSetting()
        let occlusion = Occlusion(setting: blur)
        let configuration = Configuration(appKey: "USER-API-KEY")
    configuration.occlusion = occlusion

     UXCamSwiftUI.start(with: configuration)

Occlusion In Previous SDK Versions

🚧

Outdated SDK occlusion

For older SDK versions, please refer to the below occlusion methods.

Note: outdated SDKs do not support the blurring feature.

important: It is highly recommended to upgrade your SDK as soon as possible.

Hide Sensitive Screen

The API parameters are:
occlude: Set TRUE to hide the screen from the recording, FALSE to start recording the screen contents again. 

void UXCam.OccludeSensitiveScreen(bool occlude)

UXCam.occludeSensitiveScreen: (occlude: boolean) => void

Hide All TextFields

The API parameters are:
occludeAll: Set TRUE to hide all TextFields in the recording, FALSE to stop occluding them from the screen recording.

void UXCam.occludeAllTextFields(bool occludeAll)

UXCam.occludeAllTextFields: (occludeAll: boolean) => void

Hide Sensitive View

Please refer to the above steps for sensitive views hiding.

Updated 25 days ago