Performance somehow drops on local installation

[Davidoff80]

I've been playing around with your chroma-key script and all seems to work excellent. However, after about half a minute performance starts dropping in every browser I use. While your online example has no problem whatsoever. It remains fast. I tried stripping everything so only the essentials are left and tried to use your online source, however without success.

Do you have any idea what the problem might be? My video is just 320px < 0.5MB and has a very bright / good background without noice since it's rendered and not recorded.

Also, I am ashamed to ask, but where does the noise in the background of the video on your site come from? I am pretty new with Canvas, but just don't see where the black and red are created / attached. I am obviously looking for a canvas without background so the rendered video is lying on top of my site.

Thanks!

[zschuessler]

Did you modify the script at all? If so post it and I'll take a look. If not, it may be how you encoded the video, I can take a look at the video itself as well. I used Premiere to compress the video as much as possible.

The red/black noise code can be seen in this block:

 if (dEScore < 70) {
            data32[y * canvasWidth + x] =
                (255 << 24) |
                (0 << 16) |
                (0 << 8) |
                Math.floor(Math.random() * (255 - 1 + 1) + 1);
            continue;
        }

This is a Uint8ClampedArray: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray

The bitwise OR (|) and shift registers (<<) creates a full byte of data (eg: 11111111111111111111111011000101 )

In this case, the data shifts between 0 and whatever RGB code for that red is, because the last line (with Math.floor) is acting as a switch.

This is probably mostly confusing because you're likely asking "Why do this just to oscillate between two colors, surely there are easier ways?" Before publishing that code I had the pixels do rainbow colors, deemed it obnoxious, and removed the bits that made rainbow colors.

We still need the clamped array for performance, though, so removing the code completely won't work. You still need to create a full byte there.

The best way to fully grasp it is to read the MDN article and play around with the numbers to see how the colors change.

[Davidoff80]

Thank you for your reply, very mutch appreciated!

The video's I've been using (for testing purposes) I've downloaded from iStock. This is one https://media.istockphoto.com/videos/retro-flying-saucer-video-id869298120

I tried edditting the script, but eventually after half a day I came to the conclusion it became slower and slower. I thought this had to do with my changes, so eventually reverted everything. The script now again is as you've posted it on your website. It starts fluently, but eventually becomes slower and slower and framerate starts dropping badly.

For now I changed all 255's to 0's which makes the video transparent e.g. data32[y * canvasWidth + x] = (0 << 24) I don't know if this is the best method though. The edges look pretty choppy, but that might be the video.

Thanks again! example.zip

Update: I made a sample with your code and a random video. Forgive me for the example being lame. It's just to demonstrate the performance drop. I have this issue after a couple of seconds and performance starts decreasing from there. The framerate after an hour is dropped from +/-30 fps to 1fps . I have the issue in IE, FF and Chrome. Didn't test other browsers.

[Davidoff80]

Hi Zachary,

Did you perhaps already had the time to see if you experience the same issue? Thanks in advance!

Regards,

[zschuessler]

Hey David! SO sorry for the late reply, I've been launching a company and it has been quite the time sink.

I checked out your project. It runs fast on my local machine & I don't notice any performance drops. Chrome performance tab shows it taking 7mb-15mb of memory after profiling for a minute.

Could you leave the performance logger running and make note of any memory problems? That will narrow the possibilities down.

I'm running on a higher end laptop, is your system hardware modern?

[zschuessler]

Closing due to inactivity. Reopen if needed :-)