“QR / 2D Code Scanner & Generator (with Camera Switch)”
This section explains how to use the app.
You can access it from a smartphone (iPhone or Android) or from a desktop browser,
and it can handle not only QR codes but also 2D codes such as Data Matrix, Aztec, and PDF417 for both scanning and generation.
On devices with multiple cameras, you can use the “Switch Camera” button to toggle between the front-facing and rear-facing cameras.

Screen layout and basic operations

1. Screen layout

When you open the app URL in your browser, you will see the following elements:

• Top button area
  • [Scan]: Starts the camera and scans a QR / 2D code.
  • [Generate]: Generates a QR / 2D code from the text in the input box.
  • [Switch Camera]: Switches between available cameras (front / rear) when more than one camera is present.
• Message area
  • Shows the current status of the app, error messages, and guidance such as “Scan complete”.
  • Right after a successful scan, it shows “Scan complete” for about 0.5 seconds and then switches to a message like
    “Detected code type: ‘QR Code (standard)’.”
• Code content input box
  • The content of the scanned code (URL or text) appears here.
  • You can also type your own text here and generate a code from it.
• Code type (dropdown)
  • QR Code (standard)
  • Data Matrix
  • Aztec Code
  • PDF417

  When scanning, the detected code type is selected automatically in this dropdown.
  When generating, you can change the selection here to output the same content as a different 2D code format.

• Camera preview area (video)
  • When you press [Scan] and allow camera access, the live camera preview is shown here.
  • If multiple cameras are available, you can use [Switch Camera] to change which camera is used.
• Code display area (generated result)
  • When you press [Generate], the QR / 2D code is displayed here in SVG format.
  • You can take a screenshot or print the page if you need a physical copy.

2. Basic flow (common to all devices)

• Open the app URL in your browser (for example: https://<your-domain>/qr_2d_app.html).
• To scan a QR / 2D code
  1. Press the [Scan] button.
  2. On first use, a prompt will ask for camera access. Select “Allow”.
  3. Once the camera preview appears, hold the code you want to scan in the center of the view.
  4. After a successful scan, the app first shows “Scan complete” for about 0.5 seconds, then changes to a message like
     “Detected code type: ‘…’”.
  5. At the same time, the decoded content is shown in the text box and the dropdown is automatically set to the detected code type.
• To generate a code
  1. Enter the text you want to encode (URL or free text) into the input box, or use the content that was just scanned.
  2. Select the desired code type (QR Code / Data Matrix / etc.) from the “Code type” dropdown.
  3. Press [Generate]. The resulting code will be drawn in the display area at the bottom of the screen.
• To switch cameras
  1. If your device has multiple cameras, pressing [Switch Camera] will cycle between them (front / rear, etc.).
  2. If you switch while scanning, the app continues scanning using the newly selected camera.
  3. If the device has only one camera, the [Switch Camera] button is disabled.

Using the app on iPhone

1. Open the app page

• Open Safari.
• Enter the app URL provided by your administrator in the address bar, for example:
  https://<your-domain>/qr_2d_app.html
• Check that the page title “QR / 2D Code Scanner & Generator (with Camera Switch)” appears and that you can see the three buttons:
  [Scan], [Generate], and [Switch Camera].

2. Scan a QR / 2D code

• Tap [Scan].
• On first use, Safari will show a message such as “This site would like to access your camera.”
• Tap “Allow” to start the iPhone camera.
• Hold the code (for example, a QR code) in the center of the camera view.
• After a successful scan, the message area briefly shows “Scan complete”,
  then changes to something like “Detected code type: ‘QR Code (standard)’.”
• The decoded content appears in the text box, and the “Code type” dropdown is automatically updated.

3. Generate a code

• If you want to turn the current text in the input box into a code, check the content and the selected “Code type”, then tap [Generate].
• If you want a different format (for example QR → PDF417), change the type in the dropdown first and then tap [Generate].
• The generated code is shown at the bottom of the screen in the selected format.

4. Switching cameras (front / rear)

• On iPhones with multiple cameras, tapping [Switch Camera] toggles between the front-facing camera (selfie) and the rear-facing camera.
• If you switch while scanning, the app keeps scanning using the newly selected camera.
• In most cases, the rear camera gives better results for reading QR and other codes.

5. Add to Home Screen (app-like experience)

• In Safari, tap the Share icon (square with an upward arrow) at the bottom.
• Select “Add to Home Screen”, confirm the name, and tap “Add”.
• An icon will be added to the Home Screen, allowing you to open the app in full-screen mode like a native app.

6. iPhone-specific notes

• Always use a URL with HTTPS (https://…), not HTTP.
• If the camera does not start, open Settings > Safari > Website Settings > Camera and make sure the site is set to “Allow”.
• Low battery or Low Power Mode can sometimes cause unstable behavior.

Using the app on Android

1. Open the app page

• Open the Chrome browser.
• Enter the app URL in the address bar and load the page.
• Once you can see the [Scan], [Generate], and [Switch Camera] buttons, the input box, and the code display area, you’re ready to go.

2. Scan a QR / 2D code

• Tap [Scan].
• When prompted “Allow this site to access your camera?”, choose “Allow”.
• When the camera preview appears, hold the code in front of the camera.
• After a successful scan, the message area first shows “Scan complete”,
  then after about 0.5 seconds changes to a message like “Detected code type: ‘Data Matrix’.”
• The decoded content appears in the text box, and the dropdown is automatically set to the detected code type.

3. Generate a code

• Check and, if needed, edit the text in the input box.
• Select the desired format (QR Code, Data Matrix, etc.) from the “Code type” dropdown.
• Tap [Generate]. The generated code appears at the bottom of the screen.

4. Camera switch

• If the device has multiple cameras (front and rear), you can use [Switch Camera] to choose which one to use.
• If you switch while scanning, the app automatically continues scanning with the newly selected camera.
• If there is only one camera, the [Switch Camera] button is automatically disabled.

5. Add to Home Screen

• In Chrome, tap the menu icon (︙) in the top right corner.
• Select “Add to Home screen” or “Install app” (the text may vary by device).
• An icon will be added to the Home Screen so you can launch the app like a regular app.

6. Android-specific notes

• Older stock browsers may not handle camera access correctly. We recommend using the latest version of Chrome.
• On the device, go to Settings > Apps > Chrome > Permissions and make sure “Camera” is set to “Allow”.
• Some security or power-saving apps may block camera access. You may need to temporarily relax those restrictions.

Using the app in a desktop browser

1. Open the app page

• Open Google Chrome or Microsoft Edge.
• Enter the app URL in the address bar and press Enter.
• Verify that the page title and the buttons are visible.

2. Scan a QR / 2D code

• Click [Scan].
• At the top of the browser (near the address bar), you will see a prompt asking to allow camera access. Click “Allow”.
• The built-in webcam on your laptop, or an attached USB webcam, will turn on.
• Hold the code up to the camera and adjust the distance until it’s in focus.
• After a successful scan, the message area shows “Scan complete” and then
  “Detected code type: ‘PDF417’.” in sequence.

3. Generate a code

• Check or edit the text in the input box.
• Select the desired format from “Code type”.
• Click [Generate] to draw the code in the area at the bottom.
• To print the code, use your browser’s print function or take a screenshot.

4. Switching cameras (when multiple cameras are available)

• If your computer has multiple cameras (for example an internal laptop camera and an external USB webcam),
  you can use [Switch Camera] to change which one is used.
• The name of the currently selected camera is shown in the message line below the video.

5. Desktop-specific notes

• On desktop PCs without a camera, the scan feature cannot be used.
• If your company’s security policy blocks camera access in the browser, you may need help from your system administrator.
• When opening the app over HTTP (http://), the browser may block camera access.
  Always use HTTPS (https://) to access the app.

Turning the camera on (permissions & security)

This app uses the device’s camera to scan QR and other 2D codes.
If the camera does not work as expected, the most common cause is that camera permissions have not been granted.

1. Common points

• When you first see a prompt like “Allow this site to access your camera?”, always choose “Allow”.
• If you accidentally chose “Block” or “Deny”, you must change the site’s camera permissions back to “Allow” in your browser or device settings.
• Make sure the URL starts with https://.
  If you open the app via http://, the browser may block camera access.

2. Checking camera permissions on iPhone

• Open the Settings app.
• Go to Safari > Website Settings > Camera.
• Find the relevant site and ensure it is set to “Allow”. Change it if needed.

3. Checking camera permissions on Android

• Open the device’s Settings app.
• Go to Apps (or “Apps & notifications”) and select Chrome.
• Open Permissions > Camera and make sure it is set to “Allow”.
• From within Chrome, you can also tap the padlock icon next to the URL, open “Site settings”, and set Camera to “Allow”.

4. Checking camera permissions on desktop

• In Chrome or Edge, click the padlock icon to the left of the address bar.
• Open “Site settings”, find “Camera”, and set it to “Allow”.
• Reload the page and then click [Scan] again.

5. About security

• The app performs QR / 2D code scanning and generation directly in the browser.
• With the right design and settings, it can be configured so that code content and camera images are not sent to the server, and all processing happens only on the user’s device.
• On the server side, only the minimum necessary information such as access logs is collected, and
  we apply strict controls to protect security.
• When using the app in a business environment, please follow your organization’s information security policies, including device management and network security.

These instructions cover how to use the “QR / 2D Code Scanner & Generator (with Camera Switch)”,
device-specific notes, and camera permissions and security.
If you have any questions or would like to request additional features, please contact your system administrator or support team.