#Getting UI "ready" for Barcode Scanner Plugin

20 messages · Page 1 of 1 (latest)

still totem
#

does anyone have any experience with displaying ui alongside the barcode plugin?
the docs are really vague about the ui setup required around it and this is the official example...
it's asking my ui to be ready but does not tell me how it actually wants it to be ready...
#general message

image0.png image.png
upbeat mauve
#

@still totem you need to make your HTML + CSS in a way that takes into account that the webview is transparent and the camera's content is showing in the background. Usually you would make like a "frame" around the center of the camera, where the user should put the QRCode.

Here's how the UI is affected when using windowed. One image is windowed:false (no html over the cam image). The other windowed:true (your UI is shown over the cam's image).

image.png image.png
still totem
upbeat mauve
#

Hmm, not sure if there is any... My app uses the plugin without showing any UI over the camera, so I don't think it would be really useful for you 😓

still totem
#

I see, in sveltekit, my whole page is basically shown in the body tag and i have set it up to show over the whole page with safe zones and all... splitting the body open to keep the header and bottom nav bar is going to be really problematic lol...

#

what i thought i could do was to take the video stream from the camera like it's been done in the webrtc example and display that in the body, postion a border box over it for the qr reference position and let the windowed qr scanner plugin run in the background

#

but i am yet to implement it

tribal eagle
still totem
tribal eagle
still totem
#

The page would be a +page.svelte file, it should be in the same directory

In react/nextjs, the principle should be the same

#

But the plugin really implements this in a janky way imo but considering thay application and the plugin are made by the same people, this is the only way to get native barcode/qr code reading functionality, without writing your own plugin atleast

I was also able to get the device’s camera in the dom and get the qr data using webkit through npm packages which looks better semantically but its not native

tribal eagle
#

thank you! i just can't seem to have issues while having windowed: true while having windowed: false works fine. i tried using the same code but it doesn't seem to work

#

This is what I have as of now :3

import { useState } from "react";
import {
  scan,
  Format,
  requestPermissions,
  checkPermissions,
} from "@tauri-apps/plugin-barcode-scanner";
import { validateAndAddFriend } from "../../store/newtimeTableStore";

const QRScanner = () => {
  const [scanning, setScanning] = useState(false);
  const [result, setResult] = useState<any | null>(null);
  const [error, setError] = useState<string | null>(null);

  const startScan = async () => {
    try {
      setScanning(true);
      setError(null);

      // Check for camera permissions
      let permissionStatus = await checkPermissions();
      if (permissionStatus !== "granted") {
        permissionStatus = await requestPermissions();
        if (permissionStatus !== "granted") {
          throw new Error("Camera permission not granted");
        }
      }

      const scanResult = await scan({
        windowed: true,
        formats: [Format.QRCode],
      });

      if (scanResult) {
        setResult(scanResult.content);
        await validateAndAddFriend(scanResult.content);
        console.log("QR code scanned:", scanResult.content);
      } else {
        console.log("No QR code scanned");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to scan QR code");
      console.error("Scanning error:", err);
    } finally {
      setScanning(false);
    }
  };

  return (
    <div className="p-4">
      {error && <div className="text-red-500 mb-4">{error}</div>}

      {result && (
        <div className="mb-4 p-3 bg-gray-100 rounded">
          <p>
            <strong>Scanned QR Code</strong>
          </p>
        </div>
      )}

      <button
        className="px-4 py-2 bg-black text-white rounded"
        onClick={startScan}
        disabled={scanning}
      >
        {scanning ? "Scanning..." : "Scan QR Code"}
      </button>
    </div>
  );
};

export default QRScanner;
ionic plover
still totem
#

Oops

#

Wrong context

#

#general message this is all i can think of rn xD