Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3.0.0-beta.1 GaussianBlur has large halo #95

Open
7 tasks done
jpodwys opened this issue Jan 13, 2025 · 2 comments
Open
7 tasks done

3.0.0-beta.1 GaussianBlur has large halo #95

jpodwys opened this issue Jan 13, 2025 · 2 comments
Labels
bug Something isn't working

Comments

@jpodwys
Copy link

jpodwys commented Jan 13, 2025

  • I have verified that the issue occurs with the latest twilio-video-processors.js release and is not marked as a known issue in the CHANGELOG.md.
  • I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
  • I am not sharing any Personally Identifiable Information (PII)
    or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Expected behavior:

Version 3.x's blur implementation looks as good or better than version 2.x's blur implementation.

Actual behavior:

Version 3.x's blur implementation has a large halo surrounding humans while version 2.x's WebGL2 pipeline does not.

This screenshot uses 2.2.0 with the WebGL2 pipeline
Screenshot 2025-01-13 at 8 52 53 AM

This screenshot uses 3.0.0-beta.1
Screenshot 2025-01-13 at 8 55 11 AM

Software versions:

  • Browser(s): Chrome 131
  • Operating System: MacOS 15.2
  • twilio-video-processors.js: 3.0.0-beta.1
  • Third-party libraries (e.g., Angular, React, etc.): React
@jpodwys jpodwys added the bug Something isn't working label Jan 13, 2025
@jpodwys
Copy link
Author

jpodwys commented Jan 13, 2025

I imagine this is related to 3.x's hybrid pipeline using canvas to apply blur. Re-introducing WebGL2 is the best option to remove the halo. However, if it's necessary to use canvas for now, it may be worth considering a couple of updates. Please see this demo app I created a while back to address this exact issue. Here's the source code.

The first update I made is to shrink the user's background to hide the halo behind the subject. This works well, but has two caveats.

  1. The halo is only fully-hidden when the subject is near the center of the frame. Still a noticeable upgrade.
  2. Shrinking the image for the background layer results in the frame's outer edge being white. I attempted to address this by extending the edges of the frame. There's still room for improvement, but I believe it looks pretty good.

I believe my updates represent a meaningful improvement to a canvas-based blurring approach. Please feel free to use this if it seems helpful.

Here's a screenshot of my canvas-only implementation from the demo app linked above.
Screenshot 2025-01-13 at 9 30 04 AM

@luisrivas
Copy link
Collaborator

Hi @jpodwys

Thank you for submitting this ticket. We appreciate you taking the time to provide this feedback and code change proposals.

We're aware of the halo issue you identified, but for this new version, our primary focus was performance optimizations. However, we'll evaluate your suggested changes to improve this issue in future releases.

Bests,
Luis

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants