chroma key green screen video pre-requisites

[inglesuniversal]

I tried adding a video of my own with green background and it does not turn transparent.

Do I need to follow certain guidelines?

Regards

[chrisdavidmills]

I have checked it, and the orginal version words in Chrome/Firefox. You do need to run it through a web server - file:// URLs won't work.

[MerlinOfCode]

Do you mean it has to be a file on the same server as the script, or that the file has to be on any server? I tried it with image and video o cloudinary public server and it didn't work. Also, is there an sdk or library I need to import?

[inglesuniversal]

In other words, I think the issue has to do with the green color I applied to the source video which is equivalent to "lime" web color #00FF00 .... Do I have to generate my videos with a specific hex color for the chroma key effect to work?

Furthermore, my issue was not related to the location of the file (I guess), since I had it stored on the same path as the source code you have in your repository.

Best regards and Happy Holidays!

[caugner]

It looks like the question is related to the chroma-keyring example.

[zfox23]

Because this issue is a few years old, I'm going to first try to provide definitive answers to the questions raised in the issue, and then close this issue. If anyone has further trouble with this example, please re-open the issue.

@TheWizardofWikacy asks:

Do you mean it has to be a file on the same server as the script, or that the video file has to be on any server?

The video file does not necessarily need to be on the same server as the script, but the file does need to be accessible by the script.

Because file:// URLs won't work with this example due to security limitations, you can follow this guide on MDN to learn how to set up a local testing server: How do you set up a local testing server?

Also, is there an sdk or library I need to import? No, this example does not require importing any external SDKs or libraries.

@inglesuniversal asks:

Do I have to generate my videos with a specific hex color for the chroma key effect to work?

The example's source contains this code:

        if (g > 100 && r > 100 && b < 43)
          frame.data[i * 4 + 3] = 0;

This information contains the chroma key constraints: If the pixel's "green" channel is above 100/255, the pixel's "red" value is above 100/255, and the pixel's "blue" value is below 43, that pixel will be replaced. You can modify this code to suit your chroma keyed video's needs, or modify your video to fit these existing constraints.