--- title: React & Live Streaming: How to Include Video Mixing in Your… description: Smelter is a React-based toolkit for live video compositing that lets developers describe stream layouts using familiar JSX syntax instead of complex FFmpeg... canonical: https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React & Live Streaming: How to Include Video Mixing in Your… | daily.dev og:description: Smelter is a React-based toolkit for live video compositing that lets developers describe stream layouts using familiar JSX syntax instead of complex FFmpeg... og:url: https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf og:image: https://api.daily.dev/og/posts/xsEcuWiRf.png og:image:alt: React & Live Streaming: How to Include Video Mixing in Your… og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # React & Live Streaming: How to Include Video Mixing in Your… **[Software Mansion](https://daily.dev/sources/swmansion)** · 8 min read · 0 upvotes · 0 comments ## Summary Smelter is a React-based toolkit for live video compositing that lets developers describe stream layouts using familiar JSX syntax instead of complex FFmpeg filter chains or headless Chromium setups. The post walks through building a Twitch gaming stream with picture-in-picture camera overlay, text labels, and animated transitions — all expressed as React components. Smelter compiles to WASM for browser embedding, supports inputs from cameras, MP4 files, and WebRTC, and outputs via the WHIP protocol. The approach is compared to FFmpeg (verbose, hard to maintain) and headless Chromium (imprecise frame timing, no offline processing). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Replit — We Built a Video Rendering Engine by Lying to the Browser About What Time It Is](https://daily.dev/posts/replit-we-built-a-video-rendering-engine-by-lying-to-the-browser-about-what-time-it-is-8jyaegwtp) · Hacker News · 0 upvotes · 0 comments - [Running SmolVLM Locally in Your Browser with Transformers.js](https://daily.dev/posts/running-smolvlm-locally-in-your-browser-with-transformers-js-vizgfr9nh) · PyImageSearch · 2 upvotes · 0 comments - [Streaming Backends & React: Controlling Re-render Chaos in High-Frequency Data](https://daily.dev/posts/streaming-backends-react-controlling-re-render-chaos-in-high-frequency-data-lvkyfw1pt) · SitePoint · 0 upvotes · 0 comments - [Streamline: custom video pipelines with Cloudflare Stream and Workers](https://daily.dev/posts/streamline-custom-video-pipelines-with-cloudflare-stream-and-workers-9beia9yyw) · Cloudflare · 2 upvotes · 0 comments - [Designing Stable Interfaces For Streaming Content — Smashing Magazine](https://daily.dev/posts/designing-stable-interfaces-for-streaming-content-smashing-magazine-urvigomyr) · Smashing Magazine · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#webrtc](https://daily.dev/tags/webrtc) [View this post on daily.dev](https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"React & Live Streaming: How to Include Video Mixing in Your…","url":"https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf"},"datePublished":"2026-08-02T07:15:23.503Z","dateModified":"2026-08-02T07:38:17.605Z","description":"Smelter is a React-based toolkit for live video compositing that lets developers describe stream layouts using familiar JSX syntax instead of complex FFmpeg...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9d01617249520ee41d917186c2ad53be?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9d01617249520ee41d917186c2ad53be?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Software Mansion","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Software Mansion","logo":"https://media.daily.dev/image/upload/s--sOx0vaVZ--/f_auto,q_auto/v1785654908/logos/swmansion?_a=BAMAMicg0","url":"https://daily.dev/sources/swmansion"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/react-live-streaming-how-to-include-video-mixing-in-your--xsecuwirf","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,webrtc","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Software Mansion","item":"https://daily.dev/sources/swmansion"},{"@type":"ListItem","position":3,"name":"React & Live Streaming: How to Include Video Mixing in Your…"}]} ```