Developer Guidelines: Lightstream Browser Sources

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

• AVOID: Extensive use of WebGL, especially heavily three dimensional renderings.

  Examples:
  https://www.airtightinteractive.com/demos/nymph/
  https://webglsamples.org/aquarium/aquarium.html

• Purely 2-dimensional canvas effects are possible, but should be carefully evaluated.
  Example: https://codepen.io/bsehovac/pen/GPwXxq
  • Be aware that a similar effect can be completely unstable based on how it is implemented.
    Example: https://codepen.io/mkalygin/pen/ZEpveZp

CSS

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