Tesseract.js returning empty strings from getDisplayMedia screen-capture crop — why?

[bizoriamy]

I'm using Tesseract.js 5 (loaded from CDN) in a browser to OCR roulette numbers from a live screen capture. The capture works via navigator.mediaDevices.getDisplayMedia() →

Setup:

Tesseract.js 5 loaded from CDN (https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js)
PSM 8 (single word), LSTM-only engine
Canvas magnification 2× before passing to Tesseract
Language: eng
Input: small cropped region (~100×30px) containing a single roulette number (0–36), white-on-green/red/black background
Retry loop: up to 3 attempts with fresh canvas crops
What I've tried:

Magnifying the crop 2×, 3×, 4× before passing to Tesseract
PSM 8 vs PSM 7 vs PSM 13
Whitelisting characters via T.setParameters({ tessedit_char_whitelist: '0123456789' })
Pre-loading Tesseract during page load
Timeout-wrapping the recognize() call
Observation: The resulting data.text is often an empty string even though the same canvas region renders a perfectly readable number when drawn onto the page. When text is returned, digits are frequently wrong (e.g. "29" reads as "Z9" or "23" reads as "--").

Questions:

Has anyone successfully used Tesseract.js on small digit-only crops from screen capture? Any tricks?
Does toBlob() from a canvas sourced from getDisplayMedia produce suboptimal images compared to a static image file?
Are there known issues with Tesseract.js 5 and very small bounding boxes (under 150×50px)?
Would a custom eng.traineddata trained only on digits help significantly?
Happy to share the relevant code snippet if helpful. Thanks!