QR code reader template

What it does

From any image

Reads QR codes in photos and screenshots, in JPG, PNG or GIF.

Copy the result

Shows the decoded text or link with a one-click copy button.

Checks uploads first

The function only accepts images of 4 MB or less, within Vercel’s request limit.

Keeps your key private

The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 scans a minute.

Runs locally in one command

npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the upload and sends it to QR Code Reader.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { guard, callApi, respond, fail } from '../lib/apiverve.js';

// Vercel caps a function's request body at 4.5 MB, so uploads stop at 4 MB.
const MAX_BYTES = 4 * 1024 * 1024;
const TYPES = ['image/jpeg', 'image/png', 'image/gif'];

/** POST /api/scan (multipart, field "image"): the text or URL encoded in a QR code image. */
export async function POST(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const form = await request.formData().catch(() => null);
  const image = form?.get('image');
  if (!image || typeof image === 'string') return fail('Choose an image with a QR code');
  if (!TYPES.includes(image.type)) return fail('Use a JPG, PNG or GIF image');
  if (image.size > MAX_BYTES) return fail('Images must be 4 MB or smaller');

  const upload = new FormData();
  upload.append('image', image, image.name || 'image');
  return respond(() => callApi('qrcodereader', { form: upload }));
}

See the whole file on GitHub →

Deploy it

1. Get a free API key

   The free plan includes 200 credits a month, no card needed. Create your key.

2. Deploy it

   Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.

3. Open your app

   Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the QR Code Reader API — the call this template makes

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

{
  "status": "ok",
  "error": null,
  "data": {
    "text": "'Twas brillig",
    "location": {
      "topLeft": {
        "x": 9.927694968294492,
        "y": 9.927694968294492
      },
      "topRight": {
        "x": 215.24999999999997,
        "y": 9.749999999999996
      },
      "bottomLeft": {
        "x": 9.749999999999996,
        "y": 215.24999999999997
      },
      "bottomRight": {
        "x": 216.14779062994094,
        "y": 216.14779062994094
      }
    }
  }
}