Realtime Video Processing JavaScript Tutorial (No Library)

Поділитися
Вставка
  • Опубліковано 26 січ 2025

КОМЕНТАРІ • 69

  • @Ma1ne2
    @Ma1ne2 4 роки тому +2

    Everyone riding with frameworks, packages and apis, this guy is just writing in 50-100 complex image processing in vanilla Javascript. I want to see more please!

  • @Haamome
    @Haamome 4 роки тому +1

    this guy said at the end of his video : 'hope you like it', after making such a perfect and epic tuto. This guy is fooling us boiz xD
    Really simple and clear tutorial. thanks ma man keep up the good work.

  • @rohit-j
    @rohit-j 4 роки тому +27

    such a simple and well explained content keep it up man!

  • @davidadele3664
    @davidadele3664 4 роки тому +1

    I love the simplicity. U are the man

  • @kantyDarius
    @kantyDarius 4 роки тому +4

    This is awesome! We can make an entire image editor en on the web! Thanks

  • @csablons
    @csablons 4 роки тому +3

    Thanks for your tutorial.
    I get a problem.
    The video computed haven't the same size from the video tag. Instead he took the size of the original video size, so it looks like a zoom of the top left corner of the video.
    Did I miss something?

    • @csablons
      @csablons 4 роки тому

      So I use a coef to restrain the video without the zoom effect.
      let coef = 800/1920 // 1920 is the width of my videos
      ctx_tmp.drawImage(video, 0, 0, video.videoWidth*coef, video.videoHeight*coef)
      The both videos have to be at the same size.
      I have to add this line in the init() function too.
      video2.play()

  • @sanzhar.danybayev
    @sanzhar.danybayev 3 роки тому

    wow! That's looks amazing! Honestly saying, for me that always looked like something complicated and I used to avoid this sort of tasks) Thanks to you, the barrier is broken)

  • @gurujivlogs5127
    @gurujivlogs5127 4 роки тому +1

    can we create a full feature clint side video editor with js

  • @Ravi_Goyal
    @Ravi_Goyal 2 роки тому

    How to seek to a particular frame in video in JavaScript?

  • @lanceseidman
    @lanceseidman Рік тому

    I wish I could cut out better, but this is really great work

  • @kimtai864
    @kimtai864 4 роки тому +1

    Amazing tutorial video! Thank you so much for sharing. 👍👍👍

  • @edisonmondal2798
    @edisonmondal2798 2 роки тому

    Is there any way for nongreen backgrouned images

  • @waaelg
    @waaelg Рік тому

    how can I create download button to download edified video?

  • @bharatveer7444
    @bharatveer7444 4 роки тому

    Great sir really great teacher for learning web development

  • @lnsinfotechsolution3016
    @lnsinfotechsolution3016 4 роки тому

    Is it remove only green screen or anything which is in background. For example my room or nature in background . Is this also removed

  • @mayankgupta329
    @mayankgupta329 2 роки тому

    will it keep audio also?

  • @sellnrentin4336
    @sellnrentin4336 3 роки тому

    Why does my video not play when i run the program

  • @slametnugroho6535
    @slametnugroho6535 2 роки тому

    can we capture the video?

  • @ivargasmx
    @ivargasmx 4 роки тому

    Congla man .., you are the Master !

  • @gigachad3861
    @gigachad3861 2 роки тому

    how to do this with react native pls help bro ?

  • @PasinduUd
    @PasinduUd 4 роки тому

    Output canvas is there. But the output video or the duplicate is not displaying there..Why is that ☹️

  • @sellnrentin4336
    @sellnrentin4336 3 роки тому

    It was an excellent video.... great...

  • @aroundtheworld4933
    @aroundtheworld4933 4 роки тому

    I am new to canvas related things, but when i execute your code in my local... i get below error.. please help me on this...
    "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. "

  • @diegolopez9851
    @diegolopez9851 4 роки тому +8

    i didn't know js can do that!!!!

  • @peterson_fonseca
    @peterson_fonseca 2 роки тому

    How to do this in react native?

  • @amrithaamarnath5876
    @amrithaamarnath5876 3 роки тому

    Nice tutorial. I want to learn conversion of images to video in AVI format using javascript. Mentor can you put a video regarding.

  • @ns4k_tv
    @ns4k_tv 4 роки тому

    This is gold! Thanks man!

  • @chowdaiahmacha247
    @chowdaiahmacha247 4 роки тому

    In my laptop its not working please
    Tell me where to use this js

  • @cristianroa1141
    @cristianroa1141 Рік тому

    Todo un genio❤

  • @vigneshreddy9262
    @vigneshreddy9262 4 роки тому +8

    I loved it....... ❤❤❤
    How to download the video we have changed the background please explain

    • @RedStapler_channel
      @RedStapler_channel  4 роки тому +6

      you'll need to use webm encoder lib like whammy. add each frame to the encoder and compile the video file

    • @raymondmichael4987
      @raymondmichael4987 4 роки тому +4

      Well, you're damn right; I really enjoyed every second, to the point explanation. Thanks dude.
      Greetings from Tanzania 🇹🇿

    • @okeyeng8024
      @okeyeng8024 3 роки тому

      you may use bandicam or similar apps to record it from screen while playing

  • @tanvirashraf728
    @tanvirashraf728 4 роки тому

    dear mentor plz teach us about shaders and how interactively they work with three js or babylon.....

  • @dariusdxd
    @dariusdxd 3 роки тому

    Cool video! Just question, is it possible to export canvas with new effect to video file?

    • @okeyeng8024
      @okeyeng8024 3 роки тому +1

      you may use bandicam or similar apps to record it from screen while playing

  • @theamooiz
    @theamooiz Рік тому

    If you want to learn video editing in JavaScript than view the following playlist
    ua-cam.com/play/PLOITgGWlzuT6SlsmmVA2AkuyR-sxlKmzo.html

  • @felipebutcher
    @felipebutcher 4 роки тому

    awesome explanation! thank you!

  • @kennethmark6868
    @kennethmark6868 4 роки тому

    Amazing tutorial !

  • @oskarkottom8365
    @oskarkottom8365 3 роки тому

    doesnt work for me could you pls help me

  • @LuciferAngelos
    @LuciferAngelos 4 роки тому

    Omg...JS shows some magic...

  • @SatyaPrakash-ln4pq
    @SatyaPrakash-ln4pq 3 роки тому

    Can anyone recommend a way to download canvas video

    • @okeyeng8024
      @okeyeng8024 3 роки тому

      you may use bandicam or similar apps to record it from screen while playing

  • @ziaahmad8738
    @ziaahmad8738 4 роки тому

    i dont understand the rgb part, but it is cool

  • @congiola3968
    @congiola3968 4 роки тому

    simple and meaning clear

  • @anavaratha7020
    @anavaratha7020 4 роки тому

    simply great

  • @Martin-4D
    @Martin-4D 3 роки тому

    that is sweet!

  • @muhammadlutfirahmawan8327
    @muhammadlutfirahmawan8327 4 роки тому

    Can we save the processed green screen video to our storage?😂
    So we don't need to have a video editing application or we can create an online green screen video editor.

  • @furbi963
    @furbi963 4 роки тому

    🙊 increíble...

  • @shahrukhsaifi7212
    @shahrukhsaifi7212 4 роки тому

    Amazing bro. How can i get source code

    • @RedStapler_channel
      @RedStapler_channel  4 роки тому +1

      video description

    • @shahrukhsaifi7212
      @shahrukhsaifi7212 4 роки тому

      @@RedStapler_channel good job. Please make video like youtuber" online tutorials" with source code and thankyou

  • @laljohn
    @laljohn 4 роки тому

    This is great but can you export it

    • @okeyeng8024
      @okeyeng8024 3 роки тому

      you may use bandicam or similar apps to record it from screen while playing

  • @rangabharath4253
    @rangabharath4253 4 роки тому

    Awesome

  • @leopard6554
    @leopard6554 4 роки тому

    F*ck! That girl didn't let me focus! 🤪🧐🤓

  • @seeking9145
    @seeking9145 3 роки тому

    I LOVE Tutorials without librarys. I want to learn something and not to learn how to use a library and how to use 3 methods of it in 20 links of code and think I am done with learning, while I am not anything about the materia but using a library from an other Person....

  • @tripertronic6065
    @tripertronic6065 4 роки тому

    But the stapler is White!

  • @dogmatame
    @dogmatame 4 роки тому

  • @muhammadlutfirahmawan8327
    @muhammadlutfirahmawan8327 4 роки тому

    Can we save the processed video?😂

    • @RedStapler_channel
      @RedStapler_channel  4 роки тому

      you'll need additional lib to convert canvas frame to video like whammy.js

    • @muhammadlutfirahmawan8327
      @muhammadlutfirahmawan8327 4 роки тому

      @@RedStapler_channel nice info. Thanks

    • @okeyeng8024
      @okeyeng8024 3 роки тому

      you may use bandicam or similar apps to record it from screen while playing