Build A Javascript OCR App Tutorial

Поделиться
HTML-код
  • Опубликовано: 11 дек 2024

Комментарии • 222

  • @BoostedBoi
    @BoostedBoi 5 лет назад +103

    Hello my gorgeous friend on the internet

  • @GabrielIchiro
    @GabrielIchiro 5 лет назад +9

    man I just want to say thank you, I've learned so much from you and done so many awesome projects I though it would take years for me to see realized. I am about to start college and I hope I get to meet people as passionate and good explaining stuff like you, You have been a real motivation to keep coding and learning, dont stop man , I wish happiness and success to you.
    Thanks

    • @naveenarora6467
      @naveenarora6467 3 года назад

      sooo....... hows college going? just curious

    • @bobmurray1045
      @bobmurray1045 2 года назад

      @@naveenarora6467 bad as fuck

  • @tannerdolby4554
    @tannerdolby4554 5 лет назад +11

    For anyone still struggling with 'const worker = new TesseractWorker()' is not a constructor. TeseractWorker is depreciated in versions 2+ so we use createWorker() instead.
    Here is the fix:
    Replace all forms of TesseractWorker with createWorker() for versions 2.0+ of Tesseract by using npm install tesseract.js@next and npm install tesseract.js-core
    Install tesseract.js-core link: www.npmjs.com/package/tesseract.js-core
    Make sure to remove ^ the carrot sign before tesseract.js within the package.json which forces the dependency to be the newest version. Not sure if this step matters but the code below is what you use instead of TesseractWorker() which is depreciated in the 2.0+ versions.
    SOLUTION:
    const { createWorker } = require("tesseract.js");
    const worker = new createWorker({
    logger: m => console.log(m)
    });
    ... rest of backend code in app.js

  • @kurrucharan9376
    @kurrucharan9376 4 года назад

    wow! what an work it is ......an effortless work from this man

  • @DeepakGupta-yv8ft
    @DeepakGupta-yv8ft 5 лет назад

    Thank you and Happy anniversary!

  • @the_awakening_msaha5132
    @the_awakening_msaha5132 5 лет назад +1

    You are more than our expectations. Power to Dev Ed.

  • @lillymoon2086
    @lillymoon2086 Год назад

    i think im in love, these are the best tutorials ever

  • @piyushgarg9897
    @piyushgarg9897 5 лет назад +3

    Ed back with the great projects
    Edit : just finished your react tutorial series

  • @ViorelMocanu
    @ViorelMocanu 5 лет назад +1

    Fantastic work, man! I love your over 8570 level of humor, by the way!

    • @meteachesprogramming9395
      @meteachesprogramming9395 5 лет назад

      just make it over 9000 if you had watched dragon ball z when vegeta's scouter explodes and he says the power level is over 9000

    • @ViorelMocanu
      @ViorelMocanu 5 лет назад

      @@meteachesprogramming9395 I was hinting to the fact that it's not 9000 just yet, but getting there. :)

  • @rishabsharma5307
    @rishabsharma5307 5 лет назад +1

    Awesome your tutorials are very creative

  • @filcondrat
    @filcondrat 5 лет назад +1

    great tutrl
    btw, thumbnail is classy!

  • @Optte
    @Optte 5 лет назад

    Wow, this is so impresive! Great job, and thanks for sharing with us! Cheers!

  • @FirdavsiGameDev
    @FirdavsiGameDev 5 лет назад

    You have great sponsors. The message was clear. But the project is nice.

  • @unnathishetty
    @unnathishetty Год назад

    orange cucumber raspberries this abbreviation's gonna stay in my mind forever

  • @abdoufma
    @abdoufma 5 лет назад +2

    cool tut as always, keep up the good work :)

  • @lawrencemandong7711
    @lawrencemandong7711 3 года назад

    You are an amazing teacher.

  • @kundumehul
    @kundumehul 3 года назад +3

    In new tesseract.js a lots of commands have changes. Please make a update tutorial 🙏🏼🙏🏼

  • @henrique526
    @henrique526 5 лет назад

    Hey Ed, do what you like, just do it! 0:07

  • @yomantomar3080
    @yomantomar3080 5 лет назад +1

    The video is awesome great work

  • @ishanksharma2785
    @ishanksharma2785 4 года назад

    I subscribed within the first minute itself, The way you teach is funny and we can watch without getting bored. It would be great if you could share the code as well :D

  • @arcticspacefox864
    @arcticspacefox864 5 лет назад +2

    😂😂😂 first minute and I love the total randomness

  • @Borkee92
    @Borkee92 5 лет назад +1

    Love your videos

  • @gharbos
    @gharbos 4 года назад

    dude ... u are the best

  • @akashrajpurohit97
    @akashrajpurohit97 5 лет назад +2

    I think you have to do process.env.PROCESS || 5000; because if you are deploying... It will find PORT in env variable and then set it to app.. What you did will always set it to 5000 no matter the env has PORT or not

    • @Karan60191
      @Karan60191 5 лет назад

      It depends, if any of you're core dependencies has already defined port, then it will use that else the other defined port

  • @ertugrulkutluer5840
    @ertugrulkutluer5840 5 лет назад +7

    use this code I gave blow instead of -> "new createWorker();"
    const { createWorker } = require('tesseract.js');
    const worker = createWorker({
    });

  • @ProgrammingwithPeter
    @ProgrammingwithPeter 5 лет назад

    Such a good and useful tutorial!

  • @eric.m5790
    @eric.m5790 5 лет назад

    Lol the toothpick :) great work

  • @codeyourdreams5894
    @codeyourdreams5894 2 года назад

    Cannot read properties of undefined (reading 'transfer-encoding') Getting this error 17:05

  • @heynaveeen
    @heynaveeen 5 лет назад +10

    Coolest Programmer on RUclips 😛🤣😜🤩🤩

  • @JoeWong81
    @JoeWong81 5 лет назад

    Dev Ed you're the best channel for tech and sports!!!

  • @NikhilAdiga
    @NikhilAdiga 5 лет назад

    U always get me with the thumbnail😂

  • @paulogodoyp
    @paulogodoyp 2 года назад

    Amazing tutorial! After poking around with newer Tesseract syntax I got it working wow. If you are stuck, you'd want to search for the documentation on your version of Tesseract.

    • @user-dk7fi2mh9i
      @user-dk7fi2mh9i Год назад

      Hi! I've been trying to make the code work with the current version of Tesseract and I just can't seem to make it work, how did you make it work exactly? Thanks!

  • @MrCamdere
    @MrCamdere 4 года назад

    ohhh my gggod thats what im looking for thanks ed your great potato ! :)

  • @mustafaaur4019
    @mustafaaur4019 5 лет назад +9

    Can you make a PWA please!!

    • @midsummerstation3345
      @midsummerstation3345 5 лет назад

      PWA is lame. just do native

    • @mustafaaur4019
      @mustafaaur4019 5 лет назад

      @@midsummerstation3345 how can i start native i don't have sufficient knowledge of native.

    • @midsummerstation3345
      @midsummerstation3345 5 лет назад

      @@mustafaaur4019 learn react-native or svelte-native. It's not that hard

    • @midsummerstation3345
      @midsummerstation3345 5 лет назад

      @@mustafaaur4019 Instagram is built on react-native yet the performance is good and it's successful

  • @RazerSCYNescafe
    @RazerSCYNescafe 5 лет назад

    arigatou sensei !!! 🙏

  • @josephdisraeliomenda2473
    @josephdisraeliomenda2473 5 лет назад +6

    I like the magic 😂😂😂

  • @alienbuild3525
    @alienbuild3525 5 лет назад

    Thanks ED!

  • @ilyaserov4150
    @ilyaserov4150 5 лет назад +10

    it will be always port 5000, because it's always true, doesn't it?

    • @SharkBait_ZA
      @SharkBait_ZA 5 лет назад +6

      Yes, he put it the wrong way around. :-)

  • @jeffersonwillian4144
    @jeffersonwillian4144 5 лет назад +1

    Thumbs up for magic trick! Even with funny fail!

  • @jeremy194512
    @jeremy194512 5 лет назад +5

    I still get the tesseract error not being a object:( after uninstalling and installing the its npm

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 5 лет назад

      Same

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 5 лет назад

      Still getting the TesseractWorker is not a constructor on both versions :(
      Looking for what changed now
      github.com/naptha/tesseract.js
      I've been looking at issues about the constructor error on github too.
      Did you ever figure it out?

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 5 лет назад

      Fix:
      github.com/naptha/tesseract.js/issues/346
      I'm on mobile so no correct syntax but
      Changing to "tesseract.js" : "2.0.0.alpha.13",
      And
      tesseract-js-core : 2.0.0-beta.11
      ^ Add those to package.json
      Plain `npm install` for dependant
      Remove any "^"'s from the package . json so it takes both versions (I think that's how you do it? Someone smarter than me can correct:) )
      Changing those in package.json seemed to get the app working.
      Ily

  • @maxtsh
    @maxtsh 5 лет назад

    Awesome Ed it is great:)

  • @prathamnishad1033
    @prathamnishad1033 5 лет назад +1

    I have been looking for this for a long time

  • @SureshSharma-cm4gn
    @SureshSharma-cm4gn 5 лет назад +1

    Nice video as always Ed ! But how abt my Bar Chart Race tutorial in D3.js 🤔

  • @allex3842
    @allex3842 5 лет назад

    Just wanted to let you know you are awesome.

  • @jimilordofwar
    @jimilordofwar 5 лет назад +3

    Anyone know what his visual studio code theme is? love it

  • @laflame7084
    @laflame7084 5 лет назад

    You the best ! Appreciate dat

  • @somyagupta2527
    @somyagupta2527 4 года назад +3

    According to the GitHub repo of tesseract , TesseractWorker has been depreciated and it's alternative is createWorker but it's too not working can any one help me with that ..I am unable to use both the key words also I have tried different versions of tesseract..

    • @MummySlaps
      @MummySlaps 3 года назад +1

      use this:
      ---------------------------------------------------------------
      const { createWorker } = require("tesseract.js");
      const worker = createWorker({});
      ------------------------------------------------------------------
      i just removed the new keyword that was behind createWorker({})

  • @nafizhaq4554
    @nafizhaq4554 4 года назад

    Dev that’s really helpful ! Can we do this I. App script to execute in google sheet?

  • @avinashkumarsingh9915
    @avinashkumarsingh9915 5 лет назад +1

    Which theme u are using??

  • @phanirithvij
    @phanirithvij 5 лет назад +1

    Can you do a flutter app next?
    Something which you would like to use daily, like the anti-nail-biting hand detection project that you did.

    • @AmineAmine-qw4xx
      @AmineAmine-qw4xx 5 лет назад

      watch thenetninja flutter tutorials

    • @phanirithvij
      @phanirithvij 5 лет назад

      ​@@AmineAmine-qw4xx Not asking for a tutorial. Some complex but useful UI and backend desgin.

  • @shahrukhkarim5760
    @shahrukhkarim5760 5 лет назад

    Nice work bro .. Please always continue to make more videos to develop tools :)

  • @marzooqabbas8320
    @marzooqabbas8320 4 года назад +1

    Hey bruv!....Worker.progress throws an error "worker.progress is not a function".Any solution? And also for worker.then

  • @faheemmehmood1758
    @faheemmehmood1758 5 лет назад +1

    Hey Ed, Which theme of visual studio you use?

  • @ZaneSchoonraad
    @ZaneSchoonraad 5 лет назад +2

    Pleeeeease make a Bootstrap Tutorial!!!! And also first to comment!!!! 😁😁 Love your videos, keep it up! Edit : Looks like I was not first 🙁

  • @Kaavoort
    @Kaavoort 3 года назад +1

    After I click Convert and it the OCR does it thing and redirects, I'm getting "Cannot GET /download". It doesn't seem to be creating the ocr-result.pdf file. I had to rewrite the worker since the newer version of tesseractjs doesn't like how it's done in the video.
    const { createWorker } = require('tesseract.js'); // OCR
    const worker = createWorker({
    logger: m => console.log(m),
    });
    app.post('/upload', (request, response) => {
    upload(request, response, err => {
    console.log(request.file);
    fs.readFile(`./uploads/${request.file.originalname}`, (error, data) => {
    if (error) return console.log('ERROR: ', error);
    (async () => {
    await worker.load();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
    const { data: { text } } = await worker.recognize(data);
    //console.log(text);
    response.redirect('/download');
    await worker.terminate();
    })();
    });
    });
    });

  • @petit-hommeben-jacques5606
    @petit-hommeben-jacques5606 6 месяцев назад

    super!!🤩

  • @Garycarlyle
    @Garycarlyle 5 лет назад

    The Google API for OCR worked better for me plus there are some paid ones that are very powerful. I was using them to get results from virtual greyhounds straight from the live stream. :)

  • @edelciojunior3917
    @edelciojunior3917 4 года назад

    I challenge you to create a photoshop-style app (online in javascript), where we can do small manipulations on images and save them.

  • @haythamkenway1561
    @haythamkenway1561 4 года назад

    can you put a link for this project?

  • @paavanreddykankanala6922
    @paavanreddykankanala6922 2 года назад

    Can we extract text from scanned PDF(PDF of images) using OCR?

  • @pratiknikam614
    @pratiknikam614 5 лет назад

    Instead of using saved image can we use camera of device to dynamically convert image to text?

  • @idrisertem9793
    @idrisertem9793 5 лет назад +3

    How do you remember all of this?
    You'd probably run rings around people who have been doing this for 10 years.

    • @GodAwfulUsername
      @GodAwfulUsername 5 лет назад +7

      strong grasp on fundamentals, planning and preparations beforehand, googling when running into problems

    • @arwahsapi
      @arwahsapi 5 лет назад

      Good prep on anything. Especially when you're on camera

    • @DF999
      @DF999 5 лет назад

      He also is looking off to the side and retyping stuff.

    • @idrisertem9793
      @idrisertem9793 5 лет назад

      @@DF999 Yeah I think these guys prepare a draft version and then retype it and add in some stuff to spice it up a bit.

    • @arwahsapi
      @arwahsapi 5 лет назад +1

      Brad Traversy in his channel once said that mostly his tutorials are scripted and well prepared. That's what good tutor does

  • @devglow-amindu
    @devglow-amindu 5 лет назад

    Nice work bro. Can you pls create passport scanner app. Which scans the passport and extract all the information.

  • @alexanderalejado8860
    @alexanderalejado8860 5 лет назад +1

    Came for the magic trick, stayed for the tutorial..

  • @ridl27
    @ridl27 5 лет назад +1

    Ed, can you share the code with us please ?🙃

  • @uimonk
    @uimonk 3 года назад

    please build like more small vanilla js app.. Thank you for all ur work Big fan from India

  • @booorabattle778
    @booorabattle778 2 года назад

    when i click to convert, its pointing this error:
    "TypeError: Cannot read property '_malloc' of undefined"

  • @aagamjain4142
    @aagamjain4142 3 года назад

    I am getting an Error: TypeError: Cannot read property '_malloc' of undefined. How to overcome this error? I am using tesseract: 2.1.4 and using cretaeworker line

  • @freddyhaug9379
    @freddyhaug9379 4 года назад

    Is there any better reason to make some OCR tool on TensorFlow and Python that talks to a web app?

  • @walter.h.clayton
    @walter.h.clayton 3 года назад

    "Organge, Cucumbers, and Raspberries" hahaha

  • @geojaya
    @geojaya 5 лет назад

    I have complex tables in my PDF file, will the text output of the OCR deliver the text content in the same format and representation as in the table cell contents of the PDF

  • @pushkarajsavji729
    @pushkarajsavji729 Год назад

    which tesseract version to install

  • @ogaboris6106
    @ogaboris6106 5 лет назад

    Hello can you make a video on search with node js

  • @johnraymundbernal4622
    @johnraymundbernal4622 3 года назад

    Is it possible to get only the first name and last name on the ID card?

  • @secretdia3102
    @secretdia3102 5 лет назад

    Hi, will it work even the image has dot matrix characters ?

  • @shivamgoyal796
    @shivamgoyal796 5 лет назад

    Which theme you used for vs code

  • @swoorp
    @swoorp 4 года назад

    Meat and the potatoes!! lol🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣

  • @miunify
    @miunify 5 лет назад

    This is so fucking cool.

  • @carlosgallegos789
    @carlosgallegos789 5 лет назад

    Buen video wey!

  • @ananthsview8034
    @ananthsview8034 5 лет назад

    Hi bro, can you tell me, best way to extract text from invoice, please do reply, it will help me lot

  • @itsrasterize8898
    @itsrasterize8898 5 лет назад

    Can you make a video about wordpress for beginners and even with some web development knowlegde!

  • @lendaland
    @lendaland 6 месяцев назад

    RuntimeError: abort(TypeError: Failed to parse URL from /home/bashar/Desktop/project/ocr/node_modules/tesseract.js-core/tesseract-core.wasm). Build with -s ASSERTIONS=1 for more info.

    • @omarsakho5900
      @omarsakho5900 5 месяцев назад

      i got the same thing, any fix?

  • @benaya6
    @benaya6 3 года назад

    do you msybe know of anything similar which also works for handwriting?

  • @debanjanpodder7837
    @debanjanpodder7837 5 лет назад +1

    TypeError: worker.recognize(...).progress is not a function
    solution please

    • @milencode
      @milencode 5 лет назад

      I have the same error.

    • @enemyyellow8979
      @enemyyellow8979 4 года назад +3

      Hey i fixed it by replacing the
      *
      worker
      .recognize(data, "eng")
      .progress(progress => {
      console.log(progress);
      })
      .then(result => {
      res.send(result.text);
      })
      .finally(() => worker.terminate());
      *
      with:
      *
      (async () => {
      await worker.load();
      await worker.loadLanguage('eng');
      await worker.initialize('eng');
      const { data: { text } } = await worker.recognize(data);
      console.log(text);
      await worker.terminate();
      res.send(text);
      })();
      *
      (Just remove the * they are just there to distinguish different parts)

    • @sjoerdoomen3139
      @sjoerdoomen3139 4 года назад

      @@enemyyellow8979 I used your code but I got this error: UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'load' of undefined.

  • @aayushsingh8885
    @aayushsingh8885 4 года назад

    Can anyone tell me the course where I can learn whole express , like file uploads, videos.

  • @RNMERIA
    @RNMERIA 5 лет назад

    thank you. can we hv the source code plz?

  • @aakashspecial1551
    @aakashspecial1551 4 года назад

    Please make a deploying app tutorial :)

  • @riodacayana7823
    @riodacayana7823 5 лет назад +1

    Can someone explain to me what is the difference between ComSci and IT?

    • @JORDIFUNGULA
      @JORDIFUNGULA 5 лет назад

      ComSci would be more theoretical ( covers concepts that are more abstract that IT ) but IT would have less theoretical concepts and I think IT would cover more of the Technology concepts like maybe IT would have more networking and other technology related concepts that may not be as abstract. I think :) but you can google it too.

    • @riodacayana7823
      @riodacayana7823 5 лет назад +1

      @@JORDIFUNGULA if I want to focus more on programming, I should choose ComSci?

    • @JORDIFUNGULA
      @JORDIFUNGULA 5 лет назад

      @@riodacayana7823 I honestly think you would need to decide that for yourself. But in terms of focusing only on programming (with a focus on the theoretical underlying knowledge and concepts to write ad understand software and solve those problems ) Yes, probably CompSci. However, there are so many overlaps and it does not always mean that IT students do not have the experience or knowledge required to do the same thing. CompSci though is less common than IT though ( a lot of people are doing IT but, then again IT and Tech is broad ) and same with CompSci because now there are so many different filed within CompSci( AI, ML, Web Dev, Software , Robotics) and probably many other future related type stuff... I would choice CompSci but I would not turn down or look down on IT too. :)
      Hope that helps

    • @riodacayana7823
      @riodacayana7823 5 лет назад +1

      It helps a lot thanks

  • @experimentwithabhiz2245
    @experimentwithabhiz2245 3 года назад

    I am getting an error when i am using pdf file to ocr...
    Error. Tesseract can't recognize pdf file

  • @william.darrigo
    @william.darrigo 2 года назад +1

    constructor error. This solved the issue ->
    const worker = createWorker({
    logger: m => console.log(m)
    });

  • @greenteadisease
    @greenteadisease 5 лет назад

    More magic tricks Daddy

  • @theharrypeter_xd1237
    @theharrypeter_xd1237 5 лет назад +1

    Cucumbers 🤣

  • @jl-dq5ch
    @jl-dq5ch 4 года назад

    i come for the magic tricks 0:42

  • @thefather8362
    @thefather8362 5 лет назад

    Kanye stop touching my hard disk.

  • @phurisottatipreedawong1618
    @phurisottatipreedawong1618 Год назад

    Where is the source code of this OCR app?

  • @tuanconandoyle9674
    @tuanconandoyle9674 4 года назад

    Hi, I got an error: TypeError: TesseractWorker is not a constructor. Does anybody know how to fix this?
    Thanks

    • @iqaznili
      @iqaznili 4 года назад +1

      I tried this and it worked:
      const Tesseract = require('tesseract.js')
      const worker = Tesseract.createWorker({
      logger: m => console.log(m)
      });

    • @devanshbatra308
      @devanshbatra308 4 года назад +1

      @@iqaznili Thanks bro!!

  • @redrox8283
    @redrox8283 5 лет назад

    what kind of syntax is const upload= multer({storage:storage}) ? (i don 't get what does the storage:storage do)
    thanks you if you will reply

    • @gab229
      @gab229 5 лет назад

      You set the property "storage" of the object to the previously defined variable "storage", while here they have the same name its not necessary

  • @nivalsolutions6232
    @nivalsolutions6232 2 года назад

    This video is great, I'm tried to create the proyect but I have this error TypeError: worker.progress is not a function, any idea How I can resolve this issue, Thanks
    :::?????????:(

    • @paulogodoyp
      @paulogodoyp 2 года назад

      This helped me, along the comments of others (do what they say + this)
      Inside the "fs.readFile(`./uploads/${req.file.originalname}`, (err, test) => {" part of the code, replace everything with
      (async () => {
      const worker = createWorker();
      await worker.load();
      await worker.loadLanguage('eng');
      await worker.initialize('eng');
      const { data: { text } } = await worker.recognize(image);
      console.log(text);
      const { data } = await worker.getPDF('Tesseract OCR Result');
      fs.writeFileSync('tesseract-ocr-result.pdf', Buffer.from(data));
      console.log('Generate PDF: tesseract-ocr-result.pdf');
      await worker.terminate();
      })();
      replace "image" with whatever you're calling the file in the app.post function's parameters (but don't make it "data")
      hope this helped

    • @kennethlobingco4409
      @kennethlobingco4409 2 года назад

      @@paulogodoyp Hi, I have a question. What do you mean by 'changing "image" with whatever you're calling the file in the app.post'? What should I change it to?

    • @kennethlobingco4409
      @kennethlobingco4409 2 года назад +1

      @@paulogodoyp I finally realized what you mean, in the line of 'const { data: { text } } = await worker.recognize(image);'
      we replace the parameter inside function worker.recognize() with `./upload/${req.file.originalname}`
      so basically it is now const { data: { text } } = await worker.recognize(`./upload/${req.file.originalname}`);'
      To anyone reading this, please do note to use backtick ` ` instead of apostrophe ' ' when filling in the field in the await worker.recognize() parameter.

  • @rsilo718
    @rsilo718 3 года назад

    How to make this web app on online? What webhosting sites should i use

  • @benjaminclene1974
    @benjaminclene1974 3 года назад

    Hello, when i'm trying to convert a jpg or npg file, it send me this error: " TypeError: worker.recognize(...).progress is not a function " and localhost didn't send any data
    Can someone help me ?