https://ffmpegwasm.netlify.app/assets/js/508a7d2f.cfd645eb.js

1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3090],{6911:(e,t,r)=>{r.d(t,{Z:()=>m});var a=r(7896),n=r(2784),i=r(361),o=r(7160),s=r(7565);const c=(0,o.Z)({}),l=(0,o.Z)({palette:{mode:"dark"}});function m(e){const{colorMode:t}=(0,i.I)();return n.createElement(s.Z,(0,a.Z)({theme:"dark"===t?l:c},e))}},6105:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>se,contentTitle:()=>ie,default:()=>de,frontMatter:()=>ne,metadata:()=>oe,toc:()=>ce});var a=r(7896),n=r(2784),i=r(876),o=r(1461),s=r(6277),c=r(9075),l=r(5672),m=r(9423),d=r(8451),p=r(6933),u=r(9836),g=r(2423);const f=(e,t,r)=>{const a=e.keys[0];if(Array.isArray(t))t.forEach(((t,a)=>{r(((t,r)=>{a<=e.keys.length-1&&(0===a?Object.assign(t,r):t[e.up(e.keys[a])]=r)}),t)}));else if(t&&"object"==typeof t){(Object.keys(t).length>e.keys.length?e.keys:Object.keys(t)).forEach((n=>{if(-1!==e.keys.indexOf(n)){const i=t[n];void 0!==i&&r(((t,r)=>{a===n?Object.assign(t,r):t[e.up(n)]=r}),i)}}))}else"number"!=typeof t&&"string"!=typeof t||r(((e,t)=>{Object.assign(e,t)}),t)},v=({theme:e,ownerState:t})=>{const r={};return f(e.breakpoints,t.gridSize,((e,a)=>{let n={};!0===a&&(n={flexBasis:0,flexGrow:1,maxWidth:"100%"}),"auto"===a&&(n={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"}),"number"==typeof a&&(n={flexGrow:0,flexBasis:"auto",width:`calc(100% * ${a} / var(--Grid-columns)${t.nested&&t.container?" + var(--Grid-columnSpacing)":""})`}),e(r,n)})),r},w=({theme:e,ownerState:t})=>{const r={};return f(e.breakpoints,t.gridOffset,((e,t)=>{let a={};"auto"===t&&(a={marginLeft:"auto"}),"number"==typeof t&&(a={marginLeft:0===t?"0px":`calc(100% * ${t} / var(--Grid-columns))`}),e(r,a)})),r},x=({theme:e,ownerState:t})=>{if(!t.container)return{};const r={"--Grid-columns":12};return f(e.breakpoints,t.columns,((e,t)=>{e(r,{"--Grid-columns":t})})),r},h=({theme:e,ownerState:t})=>{if(!t.container)return{};const r={};return f(e.breakpoints,t.rowSpacing,((t,a)=>{var n;t(r,{"--Grid-rowSpacing":"string"==typeof a?a:null==(n=e.spacing)?void 0:n.call(e,a)})})),r},S=({theme:e,ownerState:t})=>{if(!t.container)return{};const r={};return f(e.breakpoints,t.columnSpacing,((t,a)=>{var n;t(r,{"--Grid-columnSpacing":"string"==typeof a?a:null==(n=e.spacing)?void 0:n.call(e,a)})})),r},b=({theme:e,ownerState:t})=>{if(!t.container)return{};const r={};return f(e.breakpoints,t.direction,((e,t)=>{e(r,{flexDirection:t})})),r},Z=({ownerState:e})=>(0,a.Z)({minWidth:0,boxSizing:"border-box"},e.container?(0,a.Z)({display:"flex",flexWrap:"wrap"},e.wrap&&"wrap"!==e.wrap&&{flexWrap:e.wrap},{margin:"calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)"},e.disableEqualOverflow&&{margin:"calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)"},e.nested?(0,a.Z)({padding:"calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)"},(e.disableEqualOverflow||e.parentDisableEqualOverflow)&&{padding:"calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))"}):{"--Grid-nested-rowSpacing":"var(--Grid-rowSpacing)","--Grid-nested-columnSpacing":"var(--Grid-columnSpacing)"}):(0,a.Z)({padding:"calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)"},e.disableEqualOverflow&&{padding:"calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))"})),k=e=>{const t=[];return Object.entries(e).forEach((([e,r])=>{!1!==r&&void 0!==r&&t.push(`grid-${e}-${String(r)}`)})),t},y=(e,t="xs")=>{function r(e){return void 0!==e&&("string"==typeof e&&!Number.isNaN(Number(e))||"number"==typeof e&&e>0)}if(r(e))return[`spacing-${t}-${String(e)}`];if("object"==typeof e&&!Array.isArray(e)){const t=[];return Object.entries(e).forEach((([e,a])=>{r(a)&&t.push(`spacing-${e}-${String(a)}`)})),t}return[]};var C=r(2322);const G=["className","columns","container","component","direction","wrap","spacing","rowSpacing","columnSpacing","disableEqualOverflow"],M=(0,g.Z)(),E=(0,m.Z)("div",{name:"MuiGrid",slot:"Root",overridesResolver:(e,t)=>t.root});function N(e){return(0,d.Z)({props:e,name:"MuiGrid",defaultTheme:M})}var O=r(2575),j=r(8891);const T=function(e={}){const{createStyledComponent:t=E,useThemeProps:r=N,componentName:i="MuiGrid"}=e,m=n.createContext(!1),d=n.createContext(void 0),g=t(x,S,h,v,b,Z,w);return n.forwardRef((function(e,t){var f,v,w,x,h,S,b,Z;const M=(0,p.Z)(),E=r(e),N=(0,u.Z)(E),O=n.useContext(m),j=n.useContext(d),{className:T,columns:R=12,container:P=!1,component:$="div",direction:V="row",wrap:A="wrap",spacing:q=0,rowSpacing:I=q,columnSpacing:D=q,disableEqualOverflow:z}=N,W=(0,o.Z)(N,G);let B=z;O&&void 0!==z&&(B=e.disableEqualOverflow);const L={},J={},K={};Object.entries(W).forEach((([e,t])=>{void 0!==M.breakpoints.values[e]?L[e]=t:void 0!==M.breakpoints.values[e.replace("Offset","")]?J[e.replace("Offset","")]=t:K[e]=t}));const U=null!=(f=e.columns)?f:O?void 0:R,X=null!=(v=e.spacing)?v:O?void 0:q,Y=null!=(w=null!=(x=e.rowSpacing)?x:e.spacing)?w:O?void 0:I,F=null!=(h=null!=(S=e.columnSpacing)?S:e.spacing)?h:O?void 0:D,_=(0,a.Z)({},N,{nested:O,columns:U,container:P,direction:V,wrap:A,spacing:X,rowSpacing:Y,columnSpacing:F,gridSize:L,gridOffset:J,disableEqualOverflow:null!=(b=null!=(Z=B)?Z:j)&&b,parentDisableEqualOverflow:j}),H=((e,t)=>{const{container:r,direction:a,spacing:n,wrap:o,gridSize:s}=e,m={root:["root",r&&"container","row"!==a&&`direction-xs-${String(a)}`,"wrap"!==o&&`wrap-xs-${String(o)}`,...k(s),...r?y(n,t.breakpoints.keys[0]):[]]};return(0,c.Z)(m,(e=>(0,l.Z)(i,e)),{})})(_,M);let Q=(0,C.jsx)(g,(0,a.Z)({ref:t,as:$,ownerState:_,className:(0,s.Z)(H.root,T)},K));return O||(Q=(0,C.jsx)(m.Provider,{value:!0,children:Q}

1)),void 0!==B&&B!==(null!=j&&j)&&(Q=(0,C.jsx)(d.Provider,{value:B,children:Q})),Q}))}({createStyledComponent:(0,O.ZP)("div",{name:"MuiGrid2",overridesResolver:(e,t)=>t.root}),componentName:"MuiGrid2",useThemeProps:e=>(0,j.Z)({props:e,name:"MuiGrid2"})}),R=T;var P=r(6911),$=r(2227),V=r(9222);function A(e){return(0,l.Z)("MuiCard",e)}(0,V.Z)("MuiCard",["root"]);const q=["className","raised"],I=(0,O.ZP)($.Z,{name:"MuiCard",slot:"Root",overridesResolver:(e,t)=>t.root})((()=>({overflow:"hidden"}))),D=n.forwardRef((function(e,t){const r=(0,j.Z)({props:e,name:"MuiCard"}),{className:n,raised:i=!1}=r,l=(0,o.Z)(r,q),m=(0,a.Z)({},r,{raised:i}),d=(e=>{const{classes:t}=e;return(0,c.Z)({root:["root"]},A,t)})(m);return(0,C.jsx)(I,(0,a.Z)({className:(0,s.Z)(d.root,n),elevation:i?8:void 0,ref:t,ownerState:m},l))}));function z(e){return(0,l.Z)("MuiCardContent",e)}(0,V.Z)("MuiCardContent",["root"]);const W=["className","component"],B=(0,O.ZP)("div",{name:"MuiCardContent",slot:"Root",overridesResolver:(e,t)=>t.root})((()=>({padding:16,"&:last-child":{paddingBottom:24}}))),L=n.forwardRef((function(e,t){const r=(0,j.Z)({props:e,name:"MuiCardContent"}),{className:n,component:i="div"}=r,l=(0,o.Z)(r,W),m=(0,a.Z)({},r,{component:i}),d=(e=>{const{classes:t}=e;return(0,c.Z)({root:["root"]},z,t)})(m);return(0,C.jsx)(B,(0,a.Z)({as:i,className:(0,s.Z)(d.root,n),ownerState:m,ref:t},l))}));function J(e){return(0,l.Z)("MuiCardMedia",e)}(0,V.Z)("MuiCardMedia",["root","media","img"]);const K=["children","className","component","image","src","style"],U=(0,O.ZP)("div",{name:"MuiCardMedia",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:r}=e,{isMediaComponent:a,isImageComponent:n}=r;return[t.root,a&&t.media,n&&t.img]}})((({ownerState:e})=>(0,a.Z)({display:"block",backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"},e.isMediaComponent&&{width:"100%"},e.isImageComponent&&{objectFit:"cover"}))),X=["video","audio","picture","iframe","img"],Y=["picture","img"],F=n.forwardRef((function(e,t){const r=(0,j.Z)({props:e,name:"MuiCardMedia"}),{children:n,className:i,component:l="div",image:m,src:d,style:p}=r,u=(0,o.Z)(r,K),g=-1!==X.indexOf(l),f=!g&&m?(0,a.Z)({backgroundImage:`url("${m}")`},p):p,v=(0,a.Z)({},r,{component:l,isMediaComponent:g,isImageComponent:-1!==Y.indexOf(l)}),w=(e=>{const{classes:t,isMediaComponent:r,isImageComponent:a}=e,n={root:["root",r&&"media",a&&"img"]};return(0,c.Z)(n,J,t)})(v);return(0,C.jsx)(U,(0,a.Z)({className:(0,s.Z)(w.root,i),as:l,role:!g&&m?"img":void 0,ref:t,style:f,ownerState:v,src:g?m||d:void 0},u,{children:n}))}));function _(e){return(0,l.Z)("MuiCardActions",e)}(0,V.Z)("MuiCardActions",["root","spacing"]);const H=["disableSpacing","className"],Q=(0,O.ZP)("div",{name:"MuiCardActions",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:r}=e;return[t.root,!r.disableSpacing&&t.spacing]}})((({ownerState:e})=>(0,a.Z)({display:"flex",alignItems:"center",padding:8},!e.disableSpacing&&{"& > :not(:first-of-type)":{marginLeft:8}}))),ee=n.forwardRef((function(e,t){const r=(0,j.Z)({props:e,name:"MuiCardActions"}),{disableSpacing:n=!1,className:i}=r,l=(0,o.Z)(r,H),m=(0,a.Z)({},r,{disableSpacing:n}),d=(e=>{const{classes:t,disableSpacing:r}=e,a={root:["root",!r&&"spacing"]};return(0,c.Z)(a,_,t)})(m);return(0,C.jsx)(Q,(0,a.Z)({className:(0,s.Z)(d.root,i),ownerState:m,ref:t},l))}));var te=r(2711),re=r(4843);function ae({img:e,title:t,desc:r,url:a}){return n.createElement(D,{sx:{maxWidth:320}},n.createElement(F,{component:"img",height:"180",image:e,alt:"framework image"}),n.createElement(L,null,n.createElement(re.Z,{gutterBottom:!0,variant:"h5",component:"div"},t),n.createElement(re.Z,{variant:"body2",color:"text.secondary"},r)),n.createElement(ee,null,n.createElement(te.Z,{size:"small",color:"primary",onClick:()=>{window.open(a,"_blank")}},"Open")))}const ne={},ie="Examples",oe={unversionedId:"getting-started/examples",id:"getting-started/examples",title:"Examples",description:"You can find how to use ffmpeg.wasm with frameworks here.",source:"@site/docs/getting-started/examples.md",sourceDirName:"getting-started",slug:"/getting-started/examples",permalink:"/docs/getting-started/examples",draft:!1,editUrl:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/website/docs/getting-started/examples.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Usage",permalink:"/docs/getting-started/usage"},next:{title:"Performance",permalink:"/docs/performance"}},se={},ce=[],le={toc:ce},me="wrapper";function de({components:e,...t}){return(0,i.kt)(me,(0,a.Z)({},le,t,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"examples"},"Examples"),(0,i.kt)("p",null,"You can find how to use ffmpeg.wasm with frameworks here. \ud83d\ude04"),(0,i.kt)("admonition",{type:"caution"},(0,i.kt)("p",{parentName:"admonition"},"Do remember to run ",(0,i.kt)("inlineCode",{parentName:"p"},"npm run build")," in the root of the repository before trying\nany of the examples.")),(0,i.kt)(P.Z,{mdxType:"MuiThemeProvider"},(0,i.kt)(R,{container:!0,rowSpacing:1,columnSpacing:1,mdxType:"Grid"},(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/vanilla.png",title:"Vanilla JavaScript",desc:"Plain JavaScript",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vanilla-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/react-vite.png",title:"React + Vite",desc:"React with Vite (multithread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/react-vite-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/vue-vite.png",title:"Vue + Vite",desc:"Vue with Vite (multithread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/vue-vite-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/angular.png",title:"Angular",desc:"Angular (multithread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/angular-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/nextjs.png",title:"Next.js",desc:"Next.js (single thread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/nextjs-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/sveltekit-vite.png",title:"SvelteKit + Vite",desc:"SvelteKit with Vite (multithread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-app",mdxType:"ExampleCard"})),(0,i.kt)(R,{xs:12,sm:6,md:6,lg:6,xl:4,mdxType:"Grid"},(0,i.kt)(ae,{img:"/img/solidstart-vite.png",title:"SolidStart + Vite",desc:"SolidStart with Vite (multithread version)",url:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/solidstart-app",mdxType:"ExampleCard"})))))}de.isMDXComponent=!0}}]);