If you’re developing a tool for streamers, follow these guidelines to ensure that your service is compatible with Lightstream browser sources.

User Experience

In Lightstream Studio, streamers will be adding your service as a 3rd Party Integration layer called Browser Source.

  • They must include a URL to load into their project.
  • This URL must be pointing to a web domain. Studio cannot load local files.
  • Once loaded, the layer name will be updated to display your site’s favicon and domain name.

Learn more about the Browser Source user experience.

Compatibility Requirements

Ensure Lightstream Studio has access to the overlay for previewing in the UI and displaying on the stream:

  • If the Content-Security-Policy header is present in a frame URL’s response, ensure *.golightstream.com is included in the list of approved hosts for frame-ancestors.
    Example: Content-Security-Policy: frame-ancestors ‘self’ *.golightstream.com
    More information
  • Ensure that the X-Frame-Options header is not present on the frame URL’s response. Favor the “Content-Security-Policy” header instead.
    More information
  • Ensure that the frame URL’s response is secured with HTTPS.
    More information

Performance Considerations

Keep the following in mind when designing any effects. Some methods may cause stream performance issues.

WebGL

CSS

  • CSS will almost always perform better than WebGL/Canvas.
  • Multisampling operations and blur filters can cause issues.

Things to avoid

  • Many individual elements rendered at the same time. Particularly particle effects with random opacities.
  • 50 animated gifs all with transparency
  • Three dimensional transforms of many objects

Things that display well

  • Videos. Utilize opportunities to display a video over code-based animations.
  • 2 or 3 layers of items, overlays, or filters.
  • Animated objects with no transparency
  • A few animated objects with transparency
  • Static images