Camera Frame

Camera Frame, displayed on the specific screen, captures the document and crops it. Any changes connected to the camera frame alter the scanning process.

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

Camera frame screen in the current UI design

Camera frame screen in the deprecated UI design

To override the default cropping frame on the camera activity provided by the scenario, set:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.cameraFrame = DocReaderFrame.max

[RGLDocReader shared].functionality.cameraFrame = RGLDocReaderFrameMax;

DocumentReader.Instance().functionality().edit().setCameraFrame(DocReaderFrame.MAX).apply()

DocumentReader.Instance().functionality().edit().setCameraFrame(DocReaderFrame.MAX).apply();

DocumentReader.instance.functionality.cameraFrame = DocReaderFrame.MAX;

DocumentReader.setFunctionality({
    cameraFrame: Enum.DocReaderFrame.MAX
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    cameraFrame: Enum.DocReaderFrame.MAX
});

DocumentReader.setFunctionality({
    cameraFrame: Enum.DocReaderFrame.MAX
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetCameraFrame(DocReaderFrame.Max).Apply();

// iOS
RGLDocReader.Shared.Functionality.CameraFrame = RGLDocReaderFrame.Max;

If you set the camera frame size to full screen, the Core will crop the frame by phone borders. Note that using this setting may lead to lower performance because of the huge frame size.

Set the thickness of the document borders in the video preview (in dp):

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameBorderWidth = 10

[RGLDocReader shared].customization.cameraFrameBorderWidth = 10;

DocumentReader.Instance().customization().edit().setCameraFrameBorderWidth(5).apply()

DocumentReader.Instance().customization().edit().setCameraFrameBorderWidth(5).apply();

DocumentReader.instance.customization.cameraFrameBorderWidth = 20;

DocumentReader.setCustomization({
    cameraFrameBorderWidth: 20,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameBorderWidth: 20
});

DocumentReader.setCustomization({
    cameraFrameBorderWidth: 20,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameBorderWidth((Java.Lang.Integer)10).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameBorderWidth = 10;

Set the hex color code for the document borders in the default state:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameDefaultColor = UIColor.red

[RGLDocReader shared].customization.cameraFrameDefaultColor = [UIColor redColor];

DocumentReader.Instance().customization().edit().setCameraFrameDefaultColor("#ff0000").apply()

DocumentReader.Instance().customization().edit().setCameraFrameDefaultColor("#ff0000").apply();

DocumentReader.instance.customization.cameraFrameDefaultColor = Colors.red;

DocumentReader.setCustomization({
    cameraFrameDefaultColor: 0xffff0000,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameDefaultColor: 0xffff0000
});

DocumentReader.setCustomization({
    cameraFrameDefaultColor: 0xffff0000,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameDefaultColor("#ff0000").Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameDefaultColor = UIColor.Red;

Set the hex color code for the document border in the document detected state:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameActiveColor = UIColor.purple

[RGLDocReader shared].customization.cameraFrameActiveColor = [UIColor purpleColor];

DocumentReader.Instance().customization().edit().setCameraFrameActiveColor("#c300ff").apply()

DocumentReader.Instance().customization().edit().setCameraFrameActiveColor("#c300ff").apply();

DocumentReader.instance.customization.cameraFrameActiveColor = Colors.purple;

DocumentReader.setCustomization({
    cameraFrameActiveColor: 0xffc300ff,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameActiveColor: 0xffc300ff
});

DocumentReader.setCustomization({
    cameraFrameActiveColor: 0xffc300ff,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameActiveColor("#ca7afd").Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameActiveColor = UIColor.Purple;

Define the shape of document borders:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameShapeType = CameraFrameShapeType.corners

[RGLDocReader shared].customization.cameraFrameShapeType = RGLCameraFrameShapeTypeCorners;

DocumentReader.Instance().customization().edit().setCameraFrameShapeType(FrameShapeType.CORNER).apply()

DocumentReader.Instance().customization().edit().setCameraFrameShapeType(FrameShapeType.CORNER).apply();

DocumentReader.instance.customization.cameraFrameShapeType = FrameShapeType.CORNER;

DocumentReader.setCustomization({
    cameraFrameShapeType: Regula.DocumentReader.Enum.FrameShapeType.CORNER,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameShapeType: Enum.FrameShapeType.CORNER
});

DocumentReader.setCustomization({
    cameraFrameShapeType: DocumentReader.Enum.FrameShapeType.CORNER,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameShapeType((Java.Lang.Integer)FrameShapeType.Corner).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameShapeType = RGLCameraFrameShapeType.Corners;

Define the length of the corner side in the corners shape mode (in dp):

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameLineLength = 25

[RGLDocReader shared].customization.cameraFrameLineLength = 25;

DocumentReader.Instance().customization().edit().setCameraFrameLineLength(50).apply()

DocumentReader.Instance().customization().edit().setCameraFrameLineLength(50).apply();

DocumentReader.instance.customization.cameraFrameLineLength = 20;

DocumentReader.setCustomization({
    cameraFrameLineLength: 20,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameLineLength: 20
});

DocumentReader.setCustomization({
    cameraFrameLineLength: 20,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameLineLength((Java.Lang.Integer)25).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameLineLength = 25;

Change the corners' radius of the camera frame:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameCornerRadius = 10

[RGLDocReader shared].customization.cameraFrameCornerRadius = 10;

DocumentReader.Instance().customization().edit().setCameraFrameCornerRadius(10.0F).apply()

DocumentReader.Instance().customization().edit().setCameraFrameCornerRadius(10.0F).apply();

DocumentReader.instance.customization.cameraFrameCornerRadius = 10;

DocumentReader.setCustomization({
    cameraFrameCornerRadius: 10,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameCornerRadius: 10
});

DocumentReader.setCustomization({
    cameraFrameCornerRadius: 10,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameCornerRadius((Java.Lang.Float)10.0F).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameCornerRadius = 10;

Customize the beginning and ending of stroked lines of the camera frame:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameLineCap = CGLineCap.round

[RGLDocReader shared].customization.cameraFrameLineCap = kCGLineCapRound;

DocumentReader.Instance().customization().edit().setCameraFrameLineCap(Paint.Cap.ROUND).apply()

DocumentReader.Instance().customization().edit().setCameraFrameLineCap(Paint.Cap.ROUND).apply();

DocumentReader.instance.customization.cameraFrameLineCap = Cap.ROUND;

DocumentReader.setCustomization({
    cameraFrameLineCap: Regula.DocumentReader.Enum.LineCap.ROUND,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameLineCap: Enum.LineCap.ROUND
});

DocumentReader.setCustomization({
    cameraFrameLineCap: DocumentReader.Enum.LineCap.ROUND,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameLineCap(Paint.Cap.Round).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameLineCap = CoreGraphics.CGLineCap.Round;

Specify the offsetWidth for the camera frame:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameOffsetWidth = 50

[RGLDocReader shared].customization.cameraFrameOffsetWidth = 50;

DocumentReader.Instance().customization().edit().setCameraFrameOffsetWidth(50).apply()

DocumentReader.Instance().customization().edit().setCameraFrameOffsetWidth(50).apply();

DocumentReader.instance.customization.cameraFrameOffsetWidth = 50;

DocumentReader.setCustomization({
    cameraFrameOffsetWidth: 50,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameOffsetWidth: 50
});

DocumentReader.setCustomization({
    cameraFrameOffsetWidth: 50,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameOffsetWidth((Java.Lang.Integer)50).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameOffsetWidth = 50;

Change the aspect ratio of the camera frame for portrait mode:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFramePortraitAspectRatio = 1.0

[RGLDocReader shared].customization.cameraFramePortraitAspectRatio = 1.0;

DocumentReader.Instance().customization().edit().setCameraFramePortraitAspectRatio(1.0F).apply()

DocumentReader.Instance().customization().edit().setCameraFramePortraitAspectRatio(1.0F).apply();

DocumentReader.instance.customization.cameraFramePortraitAspectRatio = 1;

DocumentReader.setCustomization({
    cameraFramePortraitAspectRatio: 1.0,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFramePortraitAspectRatio: 1.0
});

DocumentReader.setCustomization({
    cameraFramePortraitAspectRatio: 1.0,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFramePortraitAspectRatio((Java.Lang.Float)1.0F).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFramePortraitAspectRatio = 1.0F;

Change the aspect ratio of the camera frame for landscape mode:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameLandscapeAspectRatio = 1.0

[RGLDocReader shared].customization.cameraFrameLandscapeAspectRatio = 1.0;

DocumentReader.Instance().customization().edit().setCameraFrameLandscapeAspectRatio(1.0F).apply()

DocumentReader.Instance().customization().edit().setCameraFrameLandscapeAspectRatio(1.0F).apply();

DocumentReader.instance.customization.cameraFrameLandscapeAspectRatio = 1;

DocumentReader.setCustomization({
    cameraFrameLandscapeAspectRatio: 1.0,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameLandscapeAspectRatio: 1.0
});

DocumentReader.setCustomization({
    cameraFrameLandscapeAspectRatio: 1.0,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameLandscapeAspectRatio((Java.Lang.Float)1.0F).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameLandscapeAspectRatio = 1.0F;

Change the vertical position of the camera frame (only applies to the portrait orientation):

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraFrameVerticalPositionMultiplier = 0.5

[RGLDocReader shared].customization.cameraFrameVerticalPositionMultiplier = 0.5;

DocumentReader.Instance().customization().edit().setCameraFrameVerticalPositionMultiplier(0.5F).apply()

DocumentReader.Instance().customization().edit().setCameraFrameVerticalPositionMultiplier(0.5F).apply();

DocumentReader.instance.customization.cameraFrameVerticalPositionMultiplier = .5;

DocumentReader.setCustomization({
    cameraFrameVerticalPositionMultiplier: 0.5,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraFrameVerticalPositionMultiplier: 0.5
});

DocumentReader.setCustomization({
    cameraFrameVerticalPositionMultiplier: 0.5,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraFrameVerticalPositionMultiplier((Java.Lang.Float)0.5F).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraFrameVerticalPositionMultiplier = 0.5F;

Change the vertical position of the camera preview area (only applies to the portrait orientation):

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.cameraPreviewVerticalPositionMultiplier = 0.5

[RGLDocReader shared].customization.cameraPreviewVerticalPositionMultiplier = 0.5;

DocumentReader.Instance().customization().edit().setCameraPreviewVerticalPositionMultiplier(0.5F).apply()

DocumentReader.Instance().customization().edit().setCameraPreviewVerticalPositionMultiplier(0.5F).apply();

DocumentReader.instance.customization.cameraPreviewVerticalPositionMultiplier = .5;

DocumentReader.setCustomization({
    cameraPreviewVerticalPositionMultiplier: 0.5,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    cameraPreviewVerticalPositionMultiplier: 0.5
});

DocumentReader.setCustomization({
    cameraPreviewVerticalPositionMultiplier: 0.5,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraPreviewVerticalPositionMultiplier((Java.Lang.Float)0.5F).Apply();

// iOS
RGLDocReader.Shared.Customization.CameraPreviewVerticalPositionMultiplier = 0.5F;

Camera Frame

Next Steps