├── .vscode
└── settings.json
├── index.html
└── script.js
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const video = document.querySelector("video")
2 | const textElem = document.querySelector("[data-text]")
3 |
4 | async function setup() {
5 | const stream = await navigator.mediaDevices.getUserMedia({ video: true })
6 | video.srcObject = stream
7 |
8 | video.addEventListener("playing", async () => {
9 | const worker = Tesseract.createWorker()
10 | await worker.load()
11 | await worker.loadLanguage("eng")
12 | await worker.initialize("eng")
13 |
14 | const canvas = document.createElement("canvas")
15 | canvas.width = video.width
16 | canvas.height = video.height
17 |
18 | document.addEventListener("keypress", async e => {
19 | if (e.code !== "Space") return
20 | canvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)
21 | const {
22 | data: { text },
23 | } = await worker.recognize(canvas)
24 |
25 | speechSynthesis.speak(
26 | new SpeechSynthesisUtterance(text.replace(/\s/g, " "))
27 | )
28 |
29 | textElem.textContent = text
30 | })
31 | })
32 | }
33 |
34 | setup()
35 |
--------------------------------------------------------------------------------