How to integrate camera with Oracle APEX

Modern business applications are no longer limited to static data entry—they are expected to interact seamlessly with the real world. Imagine capturing an image for identity verification, product tracking, field inspections, or real-time reporting—all directly within your Oracle APEX application.

The good news? You don’t need heavy integrations or third-party tools to achieve this. Oracle APEX provides the flexibility to integrate a device’s camera effortlessly, allowing users to capture and store images in just a few clicks. You can get a visual assistance from here.

In this blogpost, we’ll walk through how to bring camera functionality into Oracle APEX turning your application into a more intuitive, dynamic, and business-ready solution.

 STEP- 1: 

Create a blank page. Set it name as like "Camera Integration".

STEP- 2: 

Add a region. Set it's porperties as like-

        Name: Camera Integration

        Column: 3

        Column Span: 8

STEP- 3: 

Create 3 buttons under this region. Set it porperties like below-

    Button 1:

        Name: BTN_START_CAMERA

        Label: Start Camera

        Region: Camera Integration

        Slot: Edit

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

        Icon: fa-video-camera

    Button 2:

        Name: BTN_CAPTURE_IMAGE

        Label: Capture

        Region: Camera Integration

        Slot: Edit

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

        Icon: fa-camera

Button 3:

        Name: BTN_CLOSE_CAMERA

        Label: Close

        Region: Camera Integration

        Slot: Create

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

                Type: Danger

        Icon: fa-remove

STEP- 4: 

Create another region and set it's properties like below- 

        Name: Camera

        HTML Code: 

                                <div>

                                    <video id="video" width="200" height="140" autoplay></video>

                                </div>

        Template Options:

                Header: Hidden

STEP- 5:

Create another region to display the captured image. Set the region properties as like-

        Name: Captured Image

        HTML Code: 

                                <div>

                                        <canvas id="canvas" style="width:200px; height:140px"></canvas>

                                </div>

        Start New Row: No (Toggle Off)

        Template Options:

                Header: Hidden

STEP- 6:

Create JavaScript function to start camera, capture image and stop the camera. Select the page and open the "Function and Global Variable Declaration" code editor. Paste the below code here-

        function start() { 

var video = document.getElementById('video'), 

vendorUrl = window.URL || window.webkitURL; 

if (navigator.mediaDevices.getUserMedia) { 

navigator.mediaDevices.getUserMedia({ video: true }) 

.then(function (stream) { 

video.srcObject = stream; 

}).catch(function (error) { 

console.log("Something went wrong!"); 

}); 

} 

}

function capture() {

var canvas = document.getElementById("canvas");

var video = document.querySelector("video");

var src;

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

canvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

/** Code to merge image **/

/** For instance, if I want to merge a play image on center of existing image **/

const playImage = new Image();

   // playImage.src = "path to image asset";

playImage.onload = () => {

const startX = video.videoWidth / 2 - playImage.width / 2;

const startY = video.videoHeight / 2 - playImage.height / 2;

canvas.getContext("2d").drawImage(playImage, startX, startY, playImage.width, playImage.height);

canvas.toBlob() = (blob) => {

const img = new Image();

img.src = window.URL.createObjectUrl(blob);

};

};

const dataURL = canvas.toDataURL();    

const getBase64StringFromDataURL = (dataURL) => dataURL.replace('data:', '').replace(/^.+,/, '');

const base64 = getBase64StringFromDataURL(dataURL);

apex.server.process ( "INSERT_IMG", {

p_clob_01: base64

},{ dataType: 'text',

success: function( pData ) {

apex.message.showPageSuccess('Image Successfully Captured.');

apex.region('display-img').refresh();

}

} );

}

function stop() { 

var stream = video.srcObject; 

var tracks = stream.getTracks(); 

for (var i = 0; i < tracks.length; i++) { 

var track = tracks[i]; 

track.stop(); 

} 

video.srcObject = null; 

}

Click OK button to close the editor.

STEP-7:

Call the start() function in "Execute When Page Loads". This will start your camera when the page load.

STEP- 8: 

Create a dynamic action Under the "BTN_START_CAMERA". Set it's name as "Start Camera". Change it true action from show to "Execute JavaScript Code". In code section call the start() function.

STEP- 9: 

Create another dynamic action Under the "BTN_CAPTURE_IMAGE". Set it's name as "Capture Image". Change it true action from show to "Execute JavaScript Code". In code section call the capture() function. After capturing the image, we need to stop the camera. So, we need to execute the stop() function also.

STEP- 10: 

Create another dynamic action Under the "BTN_CLOSE_CAMERA". Set it's name as "Stop Camera". Change it true action from show to "Execute JavaScript Code". In code section call the stop() function.

STEP- 11: 

Create an AJAX callback process the save the captured image into the database. Navigate to the process tab and select "AJAX Callback". Right click here and select "Create Process".

Select the newly create process and change it properties as like below-

        Name: INSERT_IMG

        PL/SQL Code:

                                DECLARE

                                l_img_id    NUMBER;

                                l_blob      BLOB;

                                BEGIN

                            SELECT NVL(MAX(img_id),0) + 1

                            INTO l_img_id

                            FROM image_capture;

                           l_blob := apex_web_service.clobbase642blob(

      p_clob    => apex_application.g_clob_01

          );

                            INSERT INTO image_capture(img_id, img)

                            VALUES(l_img_id, l_blob);

                            END ;

Click OK.

STEP-12:

Create another region to display the newly captured and saved image. Set the region properties as like below-

        Name: Display Image

        Type: Interactive Report

        SQL Query:

                            SELECT img_id, 

                        '<img width="80px" height="80px" src="'||apex_util.get_blob_file_src('P16_IMG', img_id)||'"/>' AS img

                            FROM image_capture 

        Column: 3

        Column Span: 8

        Static ID: display-img

STEP-13:

Select the "img" column under the interactive report and set the below properties-

        Escape Special Characters: No (Toggle Off)

Save and run the page. That's all. Integrating camera functionality into Oracle APEX is more than just a technical enhancement—it’s a strategic step toward creating smarter, user-friendly, and business-ready applications. From capturing employee IDs and customer documents to streamlining field inspections and product tracking, the possibilities are endless.

By leveraging APEX’s flexibility, you can deliver applications that not only simplify data collection but also enhance user experience through real-time interaction with the physical world. As digital transformation accelerates, this kind of seamless integration empowers organizations to stay ahead, making Oracle APEX a powerful platform for building truly modern applications.