-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (94 loc) · 3.9 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
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webcam Capture</title>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.0/tesseract.min.js"></script>
</head>
<body>
<center>
<h1>Webcam Capture (OCR)</h1>
<input id="image-text">
<textarea hidden id="image-url"></textarea>
<input id="total-string-ocr">
<br>
<br>
<button id="captureButton">Capture Photo</button>
<button hidden id="reloadCaptureButton">Take Ulang</button>
<br>
<br>
<video id="videoElement" autoplay></video>
<canvas id="canvasElement"></canvas>
<img id="photoElement">
</center>
<script>
$('#canvasElement').hide();
$('#photoElement').hide();
const videoElement = document.getElementById('videoElement');
const canvasElement = document.getElementById('canvasElement');
const photoElement = document.getElementById('photoElement');
const startButton = document.getElementById('startButton');
const captureButton = document.getElementById('captureButton');
var video = document.querySelector("#videoElement");
// minta izin user
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin
if (navigator.getUserMedia) {
// jalankan fungsi handleVideo, dan videoError jika izin ditolak
navigator.getUserMedia({
video: true,
}, handleVideo, videoError);
}
// fungsi ini akan dieksekusi jika izin telah diberikan
function handleVideo(stream) {
videoElement.srcObject = stream;
captureButton.disabled = false;
}
// fungsi ini akan dieksekusi kalau user menolak izin
function videoError(e) {
// do something
alert("Izinkan menggunakan webcam!")
}
function capturePhoto() {
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
canvasElement.getContext('2d').drawImage(videoElement, 0, 0);
const photoDataUrl = canvasElement.toDataURL('image/jpeg');
photoElement.src = photoDataUrl;
$('#photoElement').show();
$('#image-url').val(photoElement.src);
$('#reloadCaptureButton').show();
$('#captureButton').hide();
$('#videoElement').hide();
}
captureButton.addEventListener('click', capturePhoto);
</script>
<script type="module">
const worker = await Tesseract.createWorker("eng", 1, {
corePath: 'https://unpkg.com/[email protected]/tesseract-core.wasm.js',
workerPath: "https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.0/worker.min.js",
// logger: function(m) {
// console.log(m);
// }
});
function recognize() {
(async () => {
const {
data: {
text
}
} = await worker.recognize($('#image-url').val());
$('#image-text').val(text.replace('§', "S").replace('$', "S"));
var total_string_ocr = $('#image-text').val().length;
$('#total-string-ocr').val(total_string_ocr);
// console.log(text);
await worker.terminate();
})();
}
captureButton.addEventListener('click', recognize);
</script>
</body>
</html>