Skip to Content (Press Enter)
How is your experience with the OutSystems Community?
UserImage.jpg
Pandiya rajan
16Views
2Comments
Title: How to Capture Documents Using a Mobile Camera in OutSystems 11 Reactive PWA?
Question
PWA

Hi everyone,

I'm developing an application using OutSystems 11 Reactive Web, which will be published and used as a PWA on mobile devices.

I have a requirement where users should be able to capture documents directly using their mobile device's camera instead of selecting existing images from the gallery.

I would like to understand the best way to implement this functionality in OutSystems 11 Reactive.

My requirements are:

1. Open the mobile device's camera when the user clicks a Capture Document button.

2. Capture documents using the rear camera.

3. Display a preview of the captured image.

4. Allow users to retake the image if required.

5. Convert or retrieve the captured image as Binary Data so that I can upload it to my backend/CRM API.

6. Ensure the functionality works properly on both Android and iOS devices when accessing the application as a PWA.

My questions:

- Can this be achieved using the standard OutSystems Upload widget, or do I need to use a Camera Plugin?

- Are there any recommended plugins or approaches for implementing camera functionality in Reactive PWAs?

- Are there any limitations or compatibility issues with camera access in OutSystems 11 PWA applications?

I would appreciate it if someone could share an implementation approach or a working example.

Thanks in advance!

0
0
11 days ago
Copy Link
2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

You can implement this in a Reactive app running as a PWA, but you should not rely only on the standard Upload widget. For a good UX (open camera directly, rear camera, preview, retake, binary upload) you’ll typically combine:

  • A camera‑specific Forge plugin (or HTML5 getUserMedia)
  • The standard Upload widget (for “pick from gallery” as fallback)

Below is how to structure it in OutSystems 11 Reactive.

1. Can this be done with the standard Upload widget only?

The standard Upload widget in Reactive is basically a <input type="file">. On mobile browsers you can hint the camera using accept, but you can’t fully control:

  • Rear vs front camera
  • Live preview before capture
  • Explicit “retake” behavior

Also, browser behavior is inconsistent across devices. So relying only on Upload will not satisfy all your requirements in a predictable way.

Use Upload for “select from device” fallback, but for full camera control you should use a plugin / JS approach.

Option A – PWA Camera plugins (no native build, PWA-compatible)

  1. PWA Camera & Microphone Forge component
    This is specifically designed for PWAs and runs fully in the browser (HTML5 APIs). It allows capturing images from camera in Reactive and is suited to your use case. Allowing user to capture image and upload image in reactive web application

  2. Camera.Reactive
    Another Forge option used in Reactive apps that leverages browser camera APIs. How to open camera while uploading or changing profile picture in reactive web app?

These components typically provide:

  • An action/block to open the camera.
  • A callback or output with the captured image.
  • The image in Binary Data or Base64, which you can convert to Binary.

You also have built‑in Camera plugin support for PWA in OutSystems 11, as documented in the official Camera Plugin docs. Is camera functionality possible in Progressive Web Apps?

3. Implementation outline in Reactive (PWA)

Below is a typical pattern that meets your 6 requirements.

Data preparation

In your screen:

  • Local variable CapturedImageBinary (Binary Data)
  • Local variable ShowPreview (Boolean)
  • Local variable IsRetakeMode (Boolean)

UI layout

  • Button: Capture Document
  • If ShowPreview = True:
    • Image widget bound to CapturedImageBinary
    • Button Retake
    • Button Confirm / Upload

Optionally:

  • Upload widget for gallery selection as a fallback.

Logic: Capture flow

  1. Capture Document button OnClick

Call the plugin’s “Take Picture” / “Open Camera” client action (or PWA Camera block action):

  • Configure it to use rear camera (most plugins expose an option like CameraFacing = Back).
  • Set quality / resolution as needed.
  1. On success / callback of camera

Depending on the plugin:

  • You receive a Base64 string or a Binary Data output.
  • If Base64: convert to Binary using a small client action:
    • Use BinaryDataFromText() + BinaryToBase64 / TextToBinary depending on the plugin’s output, or use the plugin’s conversion helper if provided.
  • Assign the Binary to CapturedImageBinary.
  • Set ShowPreview = True.
  1. Preview & Retake
  • The Image widget displays CapturedImageBinary → this is your preview.
  • Retake button:
    • Clear CapturedImageBinary
    • Set ShowPreview = False
    • Call the same Capture action again.
  1. Upload to backend/CRM
  • On Confirm/Upload button:
    • Use a server action that receives CapturedImageBinary as input.
    • Send it via REST to your CRM API (as multipart, Base64, or whatever your API requires).
    • If needed, also store it in an entity for auditing or caching.

4. Android / iOS PWA behavior & limitations

OutSystems Reactive PWAs rely on browser capabilities. The main limitations/considerations:

  1. Browser dependency

    • Android/Chrome PWAs: generally good support for getUserMedia and camera access.
    • iOS/Safari PWAs: support is more restricted and occasionally buggy; but recent iOS versions do allow camera from PWA browser context. Behavior can still differ from a fully native app.

  2. Camera plugins vs native app

    • The OutSystems Camera plugin (Cordova-based) is primarily designed for native mobile apps; in a pure web/PWA context it may behave unexpectedly or not at all, as seen in other users’ reports. [Camera plugin] TakePicture method does nothing on web and PWA
    • So for PWA, prefer components that explicitly mention PWA / web support (like PWA Camera & Microphone, or JS-based Webcam libraries).

  3. Security / permissions

    • The browser will always ask the user for camera permission.
    • You cannot bypass this; it’s required by the platform.

  4. Document-style capture

    • For “documents” (like scanning), you can:
      • Use standard photo capture and let the backend handle cropping/processing.
      • Or integrate a JS/Forge component that does document detection in the browser (if needed).

5. Concrete answers to your questions

If you share which Forge component you’re inclined to use (e.g., PWA Camera & Microphone vs Camera.Reactive), I can outline a more concrete step-by-step flow for that specific component (variables, actions, and typical screen structure).

0
0
9 days ago
Copy Link
This answer was AI-generated. Please read it carefully and use the forums for clarifications
2024-07-12 05-57-50
Gourav Shrivastava
Champion

Hi,

You don’t need the Camera Plugin for this. It only works in native mobile builds, not in a PWA. The standard Upload widget can do it with a small trick.

I’ve attached a sample OML with a working screen (CaptureDocument). Here’s what it does:

  • Upload widget is hidden, with Accept = Image
  • On OnReady, a bit of JS adds capture="environment" to the file input, so the rear camera opens directly instead of the gallery
  • “Capture Document” button triggers the hidden input via JS
  • Photo comes into a Binary Data variable, so the preview is just an Image widget with Type = Binary Data
  • Retake clears the variable and opens the camera again
  • Upload button is a placeholder. Just call your CRM server action there and pass the binary.

Tested on Android PWA and it works fine.

You can try in your phone with this link :- https://personal-eewexkfl.outsystemscloud.com/TestOne/CaptureDocument


Hope this helps!


Thanks

Gourav Shrivastava

TestOneDocument.oml
1
0
8 days ago
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.