|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Web NFC Reader</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: sans-serif; |
|
|
} |
|
|
#status { |
|
|
margin-top: 10px; |
|
|
font-weight: bold; |
|
|
} |
|
|
#nfcData { |
|
|
margin-top: 10px; |
|
|
border: 1px solid #ccc; |
|
|
padding: 10px; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Web NFC Reader</h1> |
|
|
<p>Поднесите NFC-карту к устройству.</p> |
|
|
<button id="startButton">Начать сканирование NFC</button> |
|
|
<p id="status"></p> |
|
|
<div id="nfcData"></div> |
|
|
|
|
|
<script> |
|
|
const startButton = document.getElementById('startButton'); |
|
|
const statusDiv = document.getElementById('status'); |
|
|
const nfcDataDiv = document.getElementById('nfcData'); |
|
|
|
|
|
startButton.addEventListener('click', async () => { |
|
|
statusDiv.textContent = 'Сканирование... Пожалуйста, поднесите карту.'; |
|
|
nfcDataDiv.textContent = ''; |
|
|
|
|
|
if ('NDEFReader' in window) { |
|
|
try { |
|
|
const ndef = new NDEFReader(); |
|
|
await ndef.scan(); |
|
|
|
|
|
ndef.onreadingerror = () => { |
|
|
statusDiv.textContent = 'Ошибка чтения. Попробуйте еще раз.'; |
|
|
}; |
|
|
|
|
|
ndef.onreading = event => { |
|
|
const { message, serialNumber } = event; |
|
|
statusDiv.textContent = 'Карта успешно считана!'; |
|
|
let dataString = `Серийный номер: ${serialNumber || 'Недоступен'}\n`; |
|
|
|
|
|
for (const record of message.records) { |
|
|
dataString += `\nТип записи: ${record.recordType}\n`; |
|
|
if (record.recordType === 'text') { |
|
|
const textDecoder = new TextDecoder('utf-8'); |
|
|
dataString += `Данные (текст): ${textDecoder.decode(record.data)}\n`; |
|
|
} else if (record.recordType === 'uri') { |
|
|
dataString += `Данные (URI): ${record.data.buffer ? new TextDecoder('utf-8').decode(record.data) : 'Не декодируется'}\n`; |
|
|
} else { |
|
|
dataString += `Данные (другой тип): ${record.data ? Array.from(new Uint8Array(record.data.buffer)).map(b => b.toString(16).padStart(2, '0')).join(' ') : 'Нет данных'}\n`; |
|
|
} |
|
|
} |
|
|
nfcDataDiv.textContent = dataString; |
|
|
}; |
|
|
} catch (error) { |
|
|
statusDiv.textContent = `Ошибка сканирования: ${error}`; |
|
|
} |
|
|
} else { |
|
|
statusDiv.textContent = 'Web NFC API не поддерживается в вашем браузере.'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
