The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Creating live filter on HTML5 canvas

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #168399

    Hey everybody!
    Lately, I’ve been really obsessed with creating an HTML5 photobooth app of my own.

    You can view the latest that I have here.

    Now, let me clarify on what’s going on exactly.

    I use WebRTC to access the webcam. I feed the stream to a hidden HTML5 <video> element, and then draw the video on the canvas at a specified FPS. If a filter is set, at that very same rate as the FPS, the filter manipulates the canvas, pixel by pixel, and gives you the filtered result.

    Grayscale seems to be working okay. Sepia is going ape crap and I have no idea why.
    My guess is that it takes too long for the sepia function (in filters.sepia) to execute. (I’m using setTimeout() instead of setInterval(), by the way.)
    If that’s the case, is there a simpler algorithm for sepia? Is/are there any adjustments I can make to the code to get the sepia filter to work?

    Once I can get that filter done, I can move on to other things, so any help is appreciated.


Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.