{"id":27069,"date":"2021-03-15T18:18:50","date_gmt":"2021-03-15T23:18:50","guid":{"rendered":"https:\/\/golightstream.com\/?p=27069"},"modified":"2021-03-15T18:18:50","modified_gmt":"2021-03-15T23:18:50","slug":"developer-guidelines-browser-sources","status":"publish","type":"post","link":"http:\/\/dev.prlxweb.com\/golightstream\/developer-guidelines-browser-sources\/","title":{"rendered":"Developer Guidelines: Lightstream Browser Sources"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"27069\" class=\"elementor elementor-27069\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0ce7224 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0ce7224\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8e38633\" data-id=\"8e38633\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-72a9a5e elementor-widget elementor-widget-text-editor\" data-id=\"72a9a5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you&#8217;re developing a tool for streamers, follow these guidelines to ensure that your service is compatible with Lightstream browser sources.<\/p><h3>User Experience<\/h3><p>In Lightstream Studio, streamers will be adding your service as a 3rd Party Integration layer called Browser Source.<\/p><ul><li>They must include a URL to load into their project.<\/li><li>This URL must be pointing to a web domain. <strong>Studio cannot load local files<\/strong>.<\/li><li>Once loaded, the layer name will be updated to display your site&#8217;s favicon and domain name.<\/li><\/ul><p><a href=\"#\">Learn more<\/a> about the Browser Source user experience.<\/p><h3>Compatibility Requirements<\/h3><p>Ensure Lightstream Studio has access to the overlay for previewing in the UI and displaying on the stream:<\/p><ul><li>If the Content-Security-Policy header is present in a frame URL&#8217;s response, ensure <span style=\"color: #993300;\">*.golightstream.com<\/span> is included in the list of approved hosts for frame-ancestors.<br \/><strong>Example:<\/strong> <span style=\"color: #993300;\">Content-Security-Policy: frame-ancestors &#8216;self&#8217; *.golightstream.com<br \/><\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Content-Security-Policy\/frame-ancestors\" target=\"_blank\" rel=\"noopener\"><strong>More<\/strong><strong> information <\/strong>\u2794<\/a><\/li><li>Ensure that the X-Frame-Options header is not present on the frame URL&#8217;s response. Favor the &#8220;Content-Security-Policy&#8221; header instead. <br \/><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/X-Frame-Options\" target=\"_blank\" rel=\"noopener\"><strong>More<\/strong><strong> information <\/strong>\u2794<\/a><\/li><li>Ensure that the frame URL&#8217;s response is secured with HTTPS.<br \/><a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/security\/https\" target=\"_blank\" rel=\"noopener\"><strong>More<\/strong><strong> information <\/strong>\u2794<\/a><\/li><\/ul><h3>Performance Considerations<\/h3><p>Keep the following in mind when designing any effects. Some methods may cause stream performance issues.<\/p><h4><strong>WebGL<\/strong><\/h4><ul><li><strong><span style=\"color: #ff0000;\">AVOID:<\/span><\/strong> Extensive use of WebGL, especially heavily three dimensional renderings.<p><strong><em>Examples:<\/em><\/strong><br \/><a href=\"https:\/\/www.airtightinteractive.com\/demos\/nymph\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.airtightinteractive.com\/demos\/nymph\/<\/a><br \/><a href=\"https:\/\/webglsamples.org\/aquarium\/aquarium.html\" target=\"_blank\" rel=\"noopener\">https:\/\/webglsamples.org\/aquarium\/aquarium.html<\/a><\/p><\/li><li>Purely 2-dimensional canvas effects are possible, but should be carefully evaluated.<br \/><em><strong>Example:<\/strong><\/em> <a href=\"https:\/\/codepen.io\/bsehovac\/pen\/GPwXxq\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/bsehovac\/pen\/GPwXxq<\/a><ul><li>Be aware that a similar effect can be completely unstable based on how it is implemented.<br \/><em><strong>Example:<\/strong><\/em> <a href=\"https:\/\/codepen.io\/mkalygin\/pen\/ZEpveZp\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/mkalygin\/pen\/ZEpveZp<\/a><\/li><\/ul><\/li><\/ul><h4><strong>CSS<\/strong><\/h4><ul><li>CSS will almost always perform better than WebGL\/Canvas.<\/li><li>Multisampling operations and blur filters can cause issues.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-8991cfa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8991cfa\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2539bdc\" data-id=\"2539bdc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3ae978 elementor-widget elementor-widget-text-editor\" data-id=\"e3ae978\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h4>Things to avoid<\/h4><ul><li>Many individual elements rendered at the same time. Particularly particle effects with random opacities.<\/li><li>50 animated gifs all with transparency<\/li><li>Three dimensional transforms of many objects<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-057e895\" data-id=\"057e895\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e50e000 elementor-widget elementor-widget-text-editor\" data-id=\"e50e000\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h4>Things that display well<\/h4><ul><li>Videos. Utilize opportunities to display a video over code-based animations.<\/li><li>2 or 3 layers of items, overlays, or filters.<\/li><li>Animated objects with no transparency<\/li><li>A few animated objects with transparency<\/li><li>Static images<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>If you&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":27091,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,48,84],"class_list":["post-27069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightstream","tag-3rd-party-integrations","tag-engineering","tag-lightstream"],"acf":[],"_links":{"self":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/27069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/comments?post=27069"}],"version-history":[{"count":0,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/27069\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/media\/27091"}],"wp:attachment":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/media?parent=27069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/categories?post=27069"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/tags?post=27069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}