{"id":7149,"date":"2025-04-06T14:22:47","date_gmt":"2025-04-06T12:22:47","guid":{"rendered":"https:\/\/thermaldrones.de\/ocr-test-m2ea\/"},"modified":"2025-12-02T13:58:56","modified_gmt":"2025-12-02T12:58:56","slug":"ocr-test-m2ea","status":"publish","type":"page","link":"https:\/\/thermaldrones.de\/en\/ocr-test-m2ea\/","title":{"rendered":"OCR Test M2EA"},"content":{"rendered":"\n<!-- Kamera mit Maske -->\n<div class=\"video-wrapper\" style=\"position:relative;width:100%;border-radius:0px;overflow:hidden;\">\n  <video id=\"video\" autoplay=\"\" playsinline=\"\" style=\"width:100%;display:block;border-radius:0px;\"><\/video>\n  <div class=\"mask-container\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;\">\n    <div class=\"overlay top\" style=\"position:absolute;top:0;left:0;right:0;height:40%;background:rgba(0,0,0,0.4);\"><\/div>\n    <div class=\"overlay bottom\" style=\"position:absolute;bottom:0;left:0;right:0;height:40%;background:rgba(0,0,0,0.4);\"><\/div>\n    <div class=\"overlay left\" style=\"position:absolute;top:40%;bottom:40%;left:0;width:20%;background:rgba(0,0,0,0.4);\"><\/div>\n    <div class=\"overlay right\" style=\"position:absolute;top:40%;bottom:40%;right:0;width:20%;background:rgba(0,0,0,0.4);\"><\/div>\n    <div class=\"focus-box\" style=\"position:absolute;top:40%;left:20%;width:60%;height:20%;border:2px dashed #f26522;border-radius:0px;\"><\/div>\n  <\/div>\n<\/div>\n\n<canvas id=\"canvas\" width=\"640\" height=\"480\" style=\"display:none;\"><\/canvas>\n\n<div style=\"margin-top:1rem;\">\n  Start <button id=\"start-scan\" style=\"padding:0.6rem 1.2rem;margin-right:0.5rem;background:#4caf50;color:white;border:none;border-radius:4px;cursor:pointer;\">detection<\/button>\n  Stop <button id=\"stop-scan\" style=\"padding:0.6rem 1.2rem;background:#f44336;color:white;border:none;border-radius:4px;cursor:pointer;\">detection<\/button>\n<\/div>\n\n<div id=\"status\" style=\"margin-top:1rem;font-style:italic;color:#555;\">Initializing camera and location\u2026<\/div>\n<div id=\"output\" style=\"margin-top:1rem;\"><\/div>\n<div id=\"history\" style=\"margin-top:1rem;\"><\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tesseract.js@5.0.1\/dist\/tesseract.min.js\"><\/script>\n<script>\n(function () {\n  const video = document.getElementById('video');\n  const canvas = document.getElementById('canvas');\n  const ctx = canvas.getContext('2d');\n  const statusText = document.getElementById('status');\n  const output = document.getElementById('output');\n  const history = document.getElementById('history');\n  const startBtn = document.getElementById('start-scan');\n  const stopBtn = document.getElementById('stop-scan');\n\n  const seenCoords = new Set();\n  let locationCount = 0;\n  let currentPosition = null;\n  let ocrInterval = null;\n\n  const MAX_DISTANCE_KM = 1000;\n\n  function getDistanceKm(lat1, lon1, lat2, lon2) {\n    const R = 6371;\n    const dLat = (lat2 - lat1) * Math.PI \/ 180;\n    const dLon = (lon2 - lon1) * Math.PI \/ 180;\n    const a = \n      Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\n      Math.cos(lat1 * Math.PI \/ 180) *\n      Math.cos(lat2 * Math.PI \/ 180) *\n      Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\n    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n    return R * c;\n  }\n\n  async function startCamera() {\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({\n        video: { facingMode: 'environment' },\n        audio: false\n      });\n      video.srcObject = stream;\n      video.addEventListener('loadedmetadata', () => {\n        canvas.width = video.videoWidth;\n        canvas.height = video.videoHeight;\n        statusText.textContent = 'Kamera aktiv \u2013 Standort wird abgefragt\u2026';\n        startLocationWatch();\n      });\n    } catch (err) {\n      statusText.textContent = 'Kamera konnte nicht gestartet werden.';\n      console.error(err);\n    }\n  }\n\n  function startLocationWatch() {\n    if (!navigator.geolocation) {\n      statusText.textContent = 'Geolocation wird nicht unterst\u00fctzt.';\n      return;\n    }\n\n    navigator.geolocation.watchPosition(pos => {\n      currentPosition = {\n        lat: pos.coords.latitude,\n        lon: pos.coords.longitude\n      };\n      statusText.textContent = 'Standort erkannt.';\n    }, err => {\n      statusText.textContent = 'Fehler beim Standortzugriff.';\n      console.error(err);\n    }, { enableHighAccuracy: true });\n  }\n\n  function startOcrLoop() {\n    if (ocrInterval) return; \/\/ schon aktiv\n    statusText.textContent = 'Erkennung gestartet\u2026';\n\n    ocrInterval = setInterval(async () => {\n      if (!currentPosition) return;\n\n      const vw = video.videoWidth;\n      const vh = video.videoHeight;\n      const w = vw * 0.6;\n      const h = vh * 0.2;\n      const x = (vw - w) \/ 2;\n      const y = (vh - h) \/ 2;\n\n      ctx.drawImage(video, 0, 0, vw, vh);\n      const imageData = ctx.getImageData(x, y, w, h);\n\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = w;\n      tempCanvas.height = h;\n      const tempCtx = tempCanvas.getContext('2d');\n      tempCtx.putImageData(imageData, 0, 0);\n      const imageDataUrl = tempCanvas.toDataURL('image\/png');\n\n      const { data: { text } } = await Tesseract.recognize(imageDataUrl, 'eng', {\n        tessedit_char_whitelist: '0123456789.,-+'\n      });\n\n      \/\/ Dezimal-Komma zu Punkt umwandeln (kein Tausendertrennzeichen erlaubt)\n      const normalizedText = text.replace(\/,\/g, '.');\n      const coords = normalizedText.match(\/[+-]?\\d+\\.\\d{6,}\/g);\n\n      if (coords && coords.length >= 2) {\n        const lat = parseFloat(coords[0]);\n        const lon = parseFloat(coords[1]);\n        const key = `${lat},${lon}`;\n        if (seenCoords.has(key)) {\n          output.innerHTML = `\n            <div style=\"background:#fffde7;border-left:4px solid #fbc02d;padding:1rem;border-radius:0px;\">\n              Koordinaten bereits erkannt:<br>LAT: ${lat}<br>LON: ${lon}\n            <\/script>\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Start detection Stop detection Initializing camera and location\u2026<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7149","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"disable_featured_image":"yes","disable_header":"no"},"_links":{"self":[{"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/pages\/7149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/comments?post=7149"}],"version-history":[{"count":1,"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/pages\/7149\/revisions"}],"predecessor-version":[{"id":7150,"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/pages\/7149\/revisions\/7150"}],"wp:attachment":[{"href":"https:\/\/thermaldrones.de\/en\/wp-json\/wp\/v2\/media?parent=7149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}