NDEFRecord.mediaType — Eigenschaft · JavaScript-Referenz

Signatur

NDEFRecord.mediaType

Beschreibung

Die Eigenschaft NDEFRecord.mediaType ist Teil der Web NFC API und gibt den MIME-Typ (Medientyp) der Nutzdaten eines NFC-Datensatzes als Zeichenkette zurück, etwa "application/json", "text/plain" oder "image/png". So erkennt man beim Auslesen eines NFC-Tags, wie die Bytes in NDEFRecord.data zu verarbeiten sind.

Einen Wert hat mediaType nur bei Datensätzen mit recordType === "mime". Das entspricht dem NDEF-Typformat MIME media-type (TNF 0x02). Bei allen anderen Typen wie "text", "url", "smart-poster", "empty", externen oder lokalen Typen ist der Wert null.

Die Eigenschaft kann nicht verändert werden. Beim Schreiben gibt man den Medientyp im Datensatz-Objekt an, das an NDEFReader.write() übergeben wird: { recordType: "mime", mediaType: "...", data: ... }. Beim Lesen steht er an den NDEFRecord-Objekten aus event.message.records des reading-Events.

Rückgabewert

Typ

string | null

Beschreibung

Der MIME-Typ des Datensatzes, z. B. "application/json", wenn recordType den Wert "mime" hat, sonst null.

Beispiele

MIME-Datensätze beim Scannen erkennen

const scanBtn = document.querySelector('#scan');

scanBtn.addEventListener('click', async () => {
  try {
    const reader = new NDEFReader();
    await reader.scan();

    reader.addEventListener('reading', ({ message, serialNumber }) => {
      console.log(`Tag ${serialNumber} gelesen`);
      for (const record of message.records) {
        console.log(record.recordType, '→', record.mediaType);
      }
    });
  } catch (err) {
    console.error('NFC-Scan fehlgeschlagen:', err);
  }
});

Tag 04:a2:3f:1b:6c:80:00 gelesen mime → application/json text → null

Nutzdaten abhängig vom Medientyp auswerten

const handleRecord = (record) => {
  if (record.recordType !== 'mime') return;

  const decoder = new TextDecoder();
  switch (record.mediaType) {
    case 'application/json': {
      const obj = JSON.parse(decoder.decode(record.data));
      console.log('JSON:', obj);
      break;
    }
    case 'text/plain':
      console.log('Text:', decoder.decode(record.data));
      break;
    case 'image/png': {
      const blob = new Blob([record.data.buffer], { type: record.mediaType });
      document.querySelector('img').src = URL.createObjectURL(blob);
      break;
    }
    default:
      console.warn('Nicht unterstützter Typ:', record.mediaType);
  }
};

const reader = new NDEFReader();
await reader.scan();
reader.onreading = ({ message }) => message.records.forEach(handleRecord);

JSON: { raum: "A1.04", sensor: "temp-12" }

MIME-Datensatz mit Medientyp auf ein Tag schreiben

const writeConfig = async () => {
  const payload = { raum: 'A1.04', sensor: 'temp-12' };
  const writer = new NDEFReader();

  await writer.write({
    records: [{
      recordType: 'mime',
      mediaType: 'application/json',
      data: new TextEncoder().encode(JSON.stringify(payload))
    }]
  });
  console.log('Konfiguration geschrieben');
};

document.querySelector('#write').addEventListener('click', writeConfig);

Konfiguration geschrieben

// Wichtig · Fallstricke

Browser-Unterstützung: Web NFC ist experimentell. Unterstützt wird es derzeit nur von Chrome (und darauf aufbauenden Browsern) unter Android ab Version 89. Desktop-Browser, Firefox und Safari/iOS unterstützen es nicht. Vorher prüfen: if ('NDEFReader' in window) { … }.
Sicherer Kontext: Die API funktioniert nur über HTTPS (oder localhost) und nur im obersten Browsing-Kontext, also nicht in fremden iframes. scan() und write() brauchen eine Nutzeraktion (z. B. einen Klick) und die NFC-Berechtigung.
Immer auf null prüfen: Ohne recordType === "mime" ist mediaType null. Ein direkter Aufruf wie record.mediaType.startsWith(…) löst dann einen TypeError aus. Besser: record.mediaType?.startsWith('image/').
Parameter möglich: Der Wert kann MIME-Parameter enthalten, z. B. "text/plain; charset=utf-8". Für Vergleiche nur den Teil vor dem ; nehmen und in Kleinbuchstaben umwandeln.
Sicherheit: NFC-Tags lassen sich leicht manipulieren. Weder dem Medientyp noch den Nutzdaten blind vertrauen. JSON in try/catch parsen und Inhalte nie ungeprüft per innerHTML einfügen (XSS-Gefahr).

Siehe auch

NDEFRecord NDEFRecord.recordType NDEFRecord.data NDEFRecord.encoding NDEFReader NDEFReader.write()