-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (90 loc) · 3.11 KB
/
index.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<title>Hitta regnummer!</title>
<script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
<style>
#video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Maintains video aspect ratio */
z-index: -1;
/* Keeps the video in the background */
}
#start-button {
background-color: #007BFF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 12px;
font-size: 16px;
}
#start-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<button id="start-button">Start Video</button>
<video id="video" playsinline autoplay muted></video>
<canvas id="canvas" style="display:none;"></canvas>
<script type="module">
const video = document.getElementById("video")
const canvas = document.getElementById("canvas")
const button = document.getElementById("start-button")
const ctx = canvas.getContext("2d")
const pattern = /[A-Za-z]{3}\s*[0-9]{3}/
// Initialize the webcam
const initializeWebcam = async () => {
const constraints = {
video: {
facingMode: 'environment'
}
}
const stream = await navigator.mediaDevices.getUserMedia(constraints)
video.srcObject = stream
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video)
}
})
}
const worker = await Tesseract.createWorker("eng", 1, {
logger: function (m) { console.log(m) }
})
await worker.setParameters({
tessedit_char_whitelist: 'ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ0123456789',
})
const captureFrameAndDetectText = () => {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
const img = canvas.toDataURL("image/png")
worker.recognize(img).then(({ data: { text } }) => {
console.log(text)
const match = text.match(pattern)
if (match) {
const regnummer = match[0]
console.log(`Found: ${match[0]}`)
const link = `https://biluppgifter.se/fordon/${regnummer}`
window.open(link, '_blank')
}
})
}
// Initialize the application
const initializeApp = async () => {
await initializeWebcam()
setInterval(captureFrameAndDetectText, 3000) // Run OCR every 5 seconds
}
button.addEventListener("click", () => {
initializeApp().catch((error) => console.error("Initialization error:", error))
button.style.display = "none"
})
</script>
</body>
</html>