diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/media-caption.vue
index a528b6191a..7d6ac36b4b 100644
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -141,9 +141,21 @@ export default defineComponent({
 		},
 
 		caption() {
-			const img = document.getElementById('imgtocaption');
+			const getBase64FromUrl = async (url) => {
+				const data = await fetch(url);
+				const blob = await data.blob();
+				return new Promise((resolve) => {
+					const reader = new FileReader();
+					reader.readAsDataURL(blob);
+					reader.onloadend = () => {
+						const base64data = reader.result;
+						resolve(base64data);
+					};
+				});
+			};
+			const img = document.getElementById('imgtocaption') as HTMLImageElement;
 			Tesseract.recognize(
-				img,
+				getBase64FromUrl(img.src),
 				'eng',
 				{ logger: m => console.log(m) },
 			).then(({ data: { text } }) => {