Azimut Logo

Implementing a Self-Service Check-in Kiosk Utilising Document Scanning and Camera APIs

Self-Service Check-in Kiosk
Published: 10/01/2025

Consider the scenario: guests arriving at a hotel, potentially experiencing fatigue from travel, face the prospect of extended wait times at the check-in desk. A desirable objective would be to enable guests to navigate the check-in process more efficiently and proceed directly to their accommodations. This article outlines the development of a self-check-in kiosk that leverages document scanning and camera API functionalities to streamline the guest experience.


Facilitating Autonomous Check-in Procedures

The implementation of a self-check-in kiosk offers a tangible solution to reduce congestion and enhance efficiency in hospitality settings. This system empowers guests to autonomously manage the initial stages of the check-in procedure. The fundamental concept involves enabling guests to independently initiate and complete the necessary steps for check-in.

The proposed kiosk system will incorporate two distinct methods for initiating the check-in sequence:

  1. QR Code Acquisition: Guests possessing a digital QR code containing reservation information can utilise the kiosk's integrated camera to facilitate rapid data retrieval. This method provides an expedient means of accessing reservation details.
  2. Manual Data Entry: For instances where a QR code is unavailable or inaccessible, a manual entry interface will be provided. This interface will prompt guests to input their reservation identification and name.

Upon successful retrieval of the reservation details, the system will engage the document scanner API to capture an image of the guest's passport. This step is crucial for verification purposes and adherence to regulatory requirements. Subsequently, the pertinent information will be transmitted to the backend infrastructure to finalise the check-in process. This process enhances efficiency and reduces reliance on personnel for routine tasks.


Architectural Components: React Implementation

The kiosk interface will be constructed using React, a JavaScript library for building user interfaces. The application will be structured into a series of discrete components, each responsible for specific functionalities:

  • App.js: This central component will manage the overall workflow and state of the check-in process, acting as the primary orchestrator of the application.
  • CheckInOptions.js: This component will serve as the initial interface, presenting guests with the option to select between QR code scanning and manual data entry.
  • QRCodeScanner.js: This component will interface with the kiosk's camera to acquire and process QR code data.
  • ManualEntryForm.js: This component will provide a standard form for guests to input their reservation identification and name.
  • PassportScanner.js: This component will guide users through the passport scanning procedure and invoke the document scanner API.

State Management within App.js

To maintain the integrity and flow of the check-in process, several state variables will be managed within the App.js component:

  • currentStep: This variable will track the current stage of the check-in procedure, such as options, qrScanner, or passportScan.
  • cameraStatus: This variable will indicate the operational status of the integrated camera, denoting whether it is ready for QR code acquisition.
  • documentScannerStatus: This variable will indicate the operational status of the document scanner, denoting its readiness for scanning passports.
  • reservationDetails: This variable will store the reservation information retrieved either from the QR code or through manual entry.
  • checkInStatus: This variable will reflect the current status of the check-in process, such as pending, success, or failed.

Implementation Details within App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
import React, { useState, useEffect } from 'react';
import CheckInOptions from './CheckInOptions';
import QRCodeScanner from './QRCodeScanner';
import ManualEntryForm from './ManualEntryForm';
import PassportScanner from './PassportScanner';

function App() {
    const [currentStep, setCurrentStep] = useState('options');
    const [cameraStatus, setCameraStatus] = useState('loading');
    const [documentScannerStatus, setDocumentScannerStatus] = useState('loading');
    const [reservationDetails, setReservationDetails] = useState(null);
    const [checkInStatus, setCheckInStatus] = useState(null);

    useEffect(() => {
        // Verifying camera status
        const checkCamera = async () => {
            try {
                const response = await fetch('http://localhost:9094/api/hardware/camera/get-status');
                const data = await response.json();
                if (data.code === '0000' && data.message === 'WORKING') {
                    setCameraStatus('ready');
                } else {
                    setCameraStatus('error');
                }
            } catch (error) {
                setCameraStatus('error');
            }
        };
        checkCamera();

        // Verifying document scanner status
        const checkDocumentScanner = async () => {
            try {
                const response = await fetch('http://localhost:9094/api/hardware/documentreader/get-status');
                const data = await response.json();
                if (data.code === '0000' && data.message === 'WORKING') {
                    setDocumentScannerStatus('ready');
                } else {
                    setDocumentScannerStatus('error');
                }
            } catch (error) {
                setDocumentScannerStatus('error');
            }
        };
        checkDocumentScanner();
    }, []);

    const handleQRCodeScanned = async (qrCodeData) => {
        setCurrentStep('checkingIn');
        setCheckInStatus('pending');
        try {
            const response = await fetch('/api/get-reservation-from-qr', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ qrCodeData }),
            });
            const data = await response.json();
            if (data.success && data.reservation) {
                setReservationDetails(data.reservation);
                setCurrentStep('passportScan');
            } else {
                setCheckInStatus('failed');
                setCurrentStep('options');
            }
        } catch (error) {
            setCheckInStatus('failed');
            setCurrentStep('options');
        }
    };

    const handleManualEntrySubmit = async (reservationId, name) => {
        setCurrentStep('checkingIn');
        setCheckInStatus('pending');
        try {
            const response = await fetch('/api/get-reservation-manual', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ reservationId, name }),
            });
            const data = await response.json();
            if (data.success && data.reservation) {
                setReservationDetails(data.reservation);
                setCurrentStep('passportScan');
            } else {
                setCheckInStatus('failed');
                setCurrentStep('options');
            }
        } catch (error) {
            setCheckInStatus('failed');
            setCurrentStep('options');
        }
    };

    const handlePassportScanned = async (passportImageData) => {
        setCurrentStep('checkingIn');
        setCheckInStatus('pending');
        try {
            const response = await fetch('/api/check-in', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    reservationId: reservationDetails.id,
                    passportImage: passportImageData,
                }),
            });
            const data = await response.json();
            if (data.success) {
                setCheckInStatus('success');
                setCurrentStep('success');
            } else {
                setCheckInStatus('failed');
                setCurrentStep('failure');
            }
        } catch (error) {
            setCheckInStatus('failed');
            setCurrentStep('failure');
        }
    };

    const handleOptionSelect = (option) => {
        if (option === 'qr') {
            setCurrentStep('qrScanner');
        } else if (option === 'manual') {
            setCurrentStep('manualEntry');
        }
    };

    return (
        <div>
            <h1>Self Check-in Kiosk</h1>
            {currentStep === 'options' && <CheckInOptions onOptionSelect={handleOptionSelect} />}
            {currentStep === 'qrScanner' && cameraStatus === 'ready' && (
                <QRCodeScanner onQRCodeScanned={handleQRCodeScanned} />
            )}
            {currentStep === 'qrScanner' && cameraStatus !== 'ready' && (
                <p>Camera not available.</p>
            )}
            {currentStep === 'manualEntry' && <ManualEntryForm onSubmit={handleManualEntrySubmit} />}
            {currentStep === 'passportScan' && documentScannerStatus === 'ready' && (
                <PassportScanner onPassportScanned={handlePassportScanned} />
            )}
            {currentStep === 'passportScan' && documentScannerStatus !== 'ready' && (
                <p>Document scanner not available.</p>
            )}
            {currentStep === 'checkingIn' && <p>Checking you in...</p>}
            {currentStep === 'success' && <p>Check-in successful!</p>}
            {currentStep === 'failure' && <p>Check-in failed. Please try again.</p>}
        </div>
    );
}

export default App;

This code segment illustrates the core logic within the App.js component, including lifecycle methods for status checks and asynchronous functions for handling user interactions and API calls.


Auxiliary Components

The supporting components facilitate specific user interactions and data processing:

  • CheckInOptions.js: Provides a straightforward interface for selecting the check-in method.
  • QRCodeScanner.js: Integrates a library, such as qr-scanner, to manage camera access and QR code decoding, subsequently transmitting the acquired data to the App.js component.
  • ManualEntryForm.js: Presents a standard input form for collecting reservation details.
  • PassportScanner.js: Initiates the document scanner API call upon user confirmation.

The code for these components is available in the provided outline and represents the foundational elements of the user interface and specific task execution.


Backend API Considerations

A robust backend infrastructure is essential for the functionality of the self-check-in kiosk. The following API endpoints are required:

  • POST /api/get-reservation-from-qr: Accepts QR code data and returns the corresponding reservation details.
  • POST /api/get-reservation-manual: Accepts reservation identification and name, returning the associated reservation details.
  • POST /api/check-in: Accepts the reservation identifier and passport image data to finalise the check-in process.

Implementation of these endpoints will necessitate the utilisation of appropriate backend technologies.


Implementation Prerequisites

To commence development, the qr-scanner library must be installed:

1
npm install qr-scanner

Ensure that Node.js and npm (or yarn) are installed on the development system.


Essential Implementation Considerations

  • Robust Error Handling: Implement comprehensive error handling mechanisms to manage unforeseen issues and provide informative feedback to the user.
  • Reliable Backend Infrastructure: The backend APIs are critical for the system's functionality; ensure their reliability and performance.
  • Camera Access Permissions: Verify that the application possesses the necessary permissions to access the kiosk's camera.
  • Styling Considerations: Implement appropriate CSS styling to ensure the kiosk interface is user-friendly and visually appealing.
  • Security Protocols: Adhere to stringent security protocols, particularly when handling sensitive data such as passport images, utilizing HTTPS and secure authentication methods.

Conclusion

The development of a self-check-in kiosk, while potentially intricate, becomes more attainable through a modular component-based approach, leveraging the capabilities of React and document scanning and camera APIs. This outline provides a structured framework for constructing a more streamlined and efficient check-in process, ultimately contributing to enhanced guest satisfaction. Developers are encouraged to explore and implement this solution. This approach contributes to a more efficient and satisfactory guest experience.