>Integration with OBS / vMix / Wirecast and more. SPX's animated graphics and overlays can be integrated with any video- or streaming application that supports "Browser" or "HTML Sources". SPX provides a [[Documentation/Renderer/Web Render|URL address]] which is entered to the streaming software as a layer/input/source. --- ## Base Renderer URL ``` http://localhost:5656/renderer ``` If SPX is running on a different machine, replace `localhost` with the IP address of that machine. ## OBS Studio ### Adding SPX as Browser Source 1. In OBS, click **+** in Sources 2. Select **Browser Source** 3. Configure: - **Name**: "SPX Graphics" (or your preferred name) - **URL**: `http://localhost:5656/renderer` - **Width**: 1920 (or use AUTO [[Documentation/Renderer/Resolutions|resolution]] in SPX config) - **Height**: 1080 (or use AUTO resolution in SPX config) - **Shutdown source when not visible**: Unchecked (recommended) - **Refresh browser when scene becomes active**: Checked (recommended) ### Multiple Layers in OBS If you need different [[Documentation/Renderer/Layers|layers]] in different OBS scenes: - Scene 1: `http://localhost:5656/renderer/?layers=[1,2,3]` - Scene 2: `http://localhost:5656/renderer/?layers=[4,5,6]` - Scene 3: `http://localhost:5656/renderer/?layers=[20]` ### Video Tutorial See [Youtube video](https://www.youtube.com/watch?v=YwXYWadiFoE) on using SPX with OBS. ## vMix ### Adding SPX as Web Browser Input 1. In vMix, click **Add Input** 2. Select **Web Browser** 3. Configure: - **Name**: "SPX Graphics" - **Address**: `http://localhost:5656/renderer` - **Width**: 1920 - **Height**: 1080 ### Multiple Inputs Create separate inputs for different layers: - Input 1: `http://localhost:5656/renderer/?layers=[1,2,3]` - Input 2: `http://localhost:5656/renderer/?layers=[4,5,6]` ## Wirecast ### Adding SPX as Webpage Source 1. In Wirecast, add a new **Webpage** source 2. Enter URL: `http://localhost:5656/renderer` 3. Set dimensions: 1920x1080 ## XSplit ### Adding SPX as Webpage Source 1. In XSplit, add **Webpage** source 2. Enter URL: `http://localhost:5656/renderer` 3. Configure size and position ## Other Software SPX works with any software supporting browser/HTML sources: - **MimoLive** - Web Browser source - **TopDirector** - HTML overlay - **Tricaster** - HTML source - **LiveOS** - Browser input - **Tellyo** - HTML overlay - **Sienna** - Web source - **AWS Elemental** - HTML overlay - **LiveU Studio** - Browser source - **ToolsOnAir** - HTML source - Tiktok live studio - Paste spx render url into `Link`. See their [Docs](https://www.tiktok.com/live/studio/help/article/Get-started-with-your-first-LIVE/Whats-a-source?lang=en) - Prism Live - Paste spx render url into `web`. See their [Docs](https://guide.prismlive.com/mobile/guides/widgets-and-effects/web-widget/using-web-browser-widget) - StreamLabs - Paste SPX render url into `browser source` - and more... ## Settings ### Network Configuration #### Local Network If SPX and production software are on the same machine: ``` http://localhost:5656/renderer ``` #### Remote Network If SPX is on a different machine: ``` http://192.168.1.100:5656/renderer ``` Replace `192.168.1.100` with the actual IP address of the SPX server. #### Firewall Considerations Ensure port 5656 (or your configured port) is open: - Windows Firewall: Allow SPX through firewall - Network firewall: Open port if needed - Security groups (cloud): Configure appropriately ### Resolution Settings #### HD (1920x1080) Default resolution. Set in production software: - Width: 1920 - Height: 1080 #### 4K (3840x2160) If using 4K resolution in [[Documentation/Server/Configurations|SPX config]]: - Width: 3840 - Height: 2160 #### AUTO Resolution If SPX is configured with `AUTO` resolution: - Set production software browser source to match your output resolution - Template will scale to fit ## Best Practices 1. **Use specific layers** - Filter layers with `?layers=[...]` parameter for cleaner output 2. **Test before going live** - Verify graphics appear correctly 3. **Monitor performance** - Browser sources can be resource-intensive 4. **Use hardware acceleration** - Enable in browser/production software when available 5. **Keep SPX on same network** - Reduces latency 6. **Consider dedicated machine** - Run SPX on separate machine for better performance ## Troubleshooting ### Graphics Don't Appear - Verify SPX server is running - Check URL is correct (including port) - Test URL in browser first - Check firewall settings - Verify network connectivity ### Performance Issues - Reduce number of active layers - Optimize [[Documentation/Graphic Templates/Overview|template]] complexity - Use dedicated machine for SPX - Check system resources (CPU, RAM, network) ### Latency - Use local network (not internet) - Reduce template complexity - Check network bandwidth - Consider local SPX instance --- ## Read Next - [[Documentation/Control Interfaces/HTTPS|HTTPS Setup]] - Secure connections for cloud deployments - [[Documentation/Control Interfaces/REST/Overview of SPX API|SPX API]] - Control SPX from external devices - [[Documentation/Renderer/Web Render|Web Render]] - Advanced renderer options - [[Guides/Tutorials/How to use SPX with OBS Studio|OBS Studio Tutorial]] - Step-by-step OBS guide