https://ffmpegwasm.netlify.app/assets/js/1db64337.91f8cc68.js

1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1372],{6911:(e,t,n)=>{n.d(t,{Z:()=>d});var i=n(7896),a=n(2784),o=n(361),r=n(7160),s=n(7565);const l=(0,r.Z)({}),m=(0,r.Z)({palette:{mode:"dark"}});function d(e){const{colorMode:t}=(0,o.I)();return a.createElement(s.Z,(0,i.Z)({theme:"dark"===t?m:l},e))}},1661:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>f,default:()=>v,frontMatter:()=>c,metadata:()=>g,toc:()=>k});var i=n(7896),a=(n(2784),n(876)),o=n(6911),r=n(4036),s=n(2924),l=n(7666),m=n(1285),d=n(6898),p=n(9615);const c={},f="Overview",g={unversionedId:"overview",id:"overview",title:"Overview",description:"For 0.11.x, visit https://ffmpegwasm-0-11-x.netlify.app",source:"@site/docs/overview.md",sourceDirName:".",slug:"/overview",permalink:"/docs/overview",draft:!1,editUrl:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/website/docs/overview.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",next:{title:"Installation",permalink:"/docs/getting-started/installation"}},u={},k=[{value:"Introduction",id:"introduction",level:2},{value:"Advantages",id:"advantages",level:2},{value:"Architecture",id:"architecture",level:2},{value:"Packages",id:"packages",level:2},{value:"Libraries",id:"libraries",level:2}],b={toc:k},h="wrapper";function v({components:e,...t}){return(0,a.kt)(h,(0,i.Z)({},b,t,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"overview"},"Overview"),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},"For 0.11.x, visit ",(0,a.kt)("a",{parentName:"p",href:"https://ffmpegwasm-0-11-x.netlify.app"},"https://ffmpegwasm-0-11-x.netlify.app"),"\nand ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/ffmpegwasm/ffmpeg.wasm/tree/0.11.x"},"0.11.x")," branch.")),(0,a.kt)("h2",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"ffmpeg.wasm is a pure WebAssembly / JavaScript port of ",(0,a.kt)("a",{parentName:"p",href:"https://www.ffmpeg.org/"},"FFmpeg"),"\nenabling video & audio record, convert and stream right inside browsers."),(0,a.kt)("p",null,"We leverage\n",(0,a.kt)("a",{parentName:"p",href:"https://emscripten.org/"},"Emscripten")," to transpile FFmpeg source code and many\nlibraries to WebAssembly and develop a minimal but essential library to free\ndevelopers from common requirements like running ffmpeg inside web worker and\nmore."),(0,a.kt)("h2",{id:"advantages"},"Advantages"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"Security"),": your users' data only lives inside their browser, no need to\nworry about any data leakage or network latency."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"Client-side computing"),": instead of hosting a cluster of server-end servers,\nyou can now offload multimedia processing to client-side."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"Flexible"),": ffmpeg.wasm comes with single-thread and multi-thread cores, you\ncan use whichever fits your use case.")),(0,a.kt)("h2",{id:"architecture"},"Architecture"),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"architecture",src:n(5922).Z,width:"811",height:"483"})),(0,a.kt)("p",null,"Multimedia transcoding is a resource-intensive task that you don't want to\nexecute in main thread, thus in ffmpeg.wasm we offload those task to web worker\n(",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg.worker"),") by default. This makes almost all function calls in ffmpeg.wasm\nare asynchronous and it is recommended to use ",(0,a.kt)("strong",{parentName:"p"},"async")," / ",(0,a.kt)("strong",{parentName:"p"},"await")," syntax."),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg.worker")," downloads WebAssembly code (",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg-core"),") from CDN\nand initialized it in WorkerGlobalScope. For any input video file you would like\nto process, you need to first populated them inside ffmpeg-core File System and\nalso read result from ",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg-core")," File System once it is done."),(0,a.kt)("p",null,"If you are using a multi-thread version of ",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg-core"),", more web workers will\nbe spawned by ",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg-core")," inside ",(0,a.kt)("inlineCode",{parentName:"p"},"ffmpeg.worker")),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},"The concept of ",(0,a.kt)("inlineCode",{parentName:"p"},"core")," in ffmpeg.wasm is like the engine of a car, it is not only\nthe most important part of ffmpeg.wasm but also a swappable component. Currently\nwe maintain single-thread (",(0,a.kt)("inlineCode",{parentName:"p"},"@ffmpeg/core"),") and multi-thread version\n(",(0,a.kt)("inlineCode",{parentName:"p"},"@ffmpeg/core-mt"),") cores, you can build your own core (ex. a core with x264\nlib only to minimize ffmpeg-core.wasm file size) using build scripts in the repository.")),(0,a.kt)("h2",{id:"packages"},"Packages"),(0,a.kt)("p",null,"All ffmpeg.wasm packages are under ",(0,a.kt)("a",{parentName:"p",href:"https://www.npmjs.com/search?q=%40ffmpeg"},"@ffmpeg"),"\nname space:"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Usage"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"@ffmpeg/ffmpeg"),(0,a.kt)("td",{parentName:"tr",align:null},"ffmpeg.wasm main package")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"@ffmpeg/util"),(0,a.kt)("td",{parentName:"tr",align:null},"common utility functions")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"@ffmpeg/types"),(0,a.kt)("td",{parentName:"tr",align:null},"TypeScript types")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"@ffmpeg/core"),(0,a.kt)("td",{parentName:"tr",align:null},"single-thread ffmpeg.wasm core")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"@ffmpeg/core-mt"),(0,a.kt)("td",{parentName:"tr",align:null},"multi-thread ffmpeg.wasm core")))),(0,a.kt)("h2",{id:"libraries"},"Libraries"),(0,a.kt)("p",null,"ffmpeg.wasm is built with toolchains / libraries:"),(0,a.kt)(o.Z,{mdxType:"MuiThemeProvider"},(0,a.kt)(m.Z,{mdxType:"TableContainer"},(0,a.kt)(r.Z,{sx:{minWidth:650},"aria-label":"simple table",mdxType:"Table"},(0,a.kt)(d.Z,{mdxType:"TableHead"},(0,a.kt)(p.Z,{mdxType:"TableRow"},(0,a.kt)(l.Z,{align:"center",mdxType:"TableCell"},"Name"),(0,a.kt)(l.Z,{align:"center",mdxType:"TableCell"},"Version"),(0,a.kt)(l.Z,{align:"center",mdxType:"TableCell"},"Note"))),(0,a.kt)(s.Z,{mdxType:"TableBody"},[{name:"Emscripten",version:"3.1.40",note:"Emscripten is a toolchain for c

1ompiling C and C++ code into WebAssembly and JavaScript, making it possible to run applications written in these languages in web browsers."},{name:"FFmpeg",version:"n5.1.4",note:"FFmpeg is a powerful multimedia framework that can decode, encode, transcode, and stream audio and video files. It's widely used for media manipulation and streaming."},{name:"x264",version:"0.164.x",note:"x264 is a popular video encoding library that provides high-quality H.264 video compression. It's commonly used for video encoding and transcoding."},{name:"x265",version:"3.4",note:"x265 is a video encoding library that specializes in encoding videos using the H.265/HEVC codec, offering high compression efficiency for video content."},{name:"libvpx",version:"v1.13.1",note:"libvpx is an open-source video codec library used for encoding and decoding VP8 and VP9 video formats, commonly used for web-based video streaming."},{name:"lame",version:"3.100",note:"LAME is an audio encoder that converts audio files to the MP3 format, making it widely used for creating MP3 audio files."},{name:"ogg",version:"v1.3.4",note:"Ogg is a multimedia container format, and this library provides support for encoding and decoding audio and video in the Ogg format."},{name:"theora",version:"v1.1.1",note:"Theora is an open video codec designed for efficient video compression within the Ogg multimedia framework."},{name:"opus",version:"v1.3.1",note:"Opus is a versatile audio codec capable of handling both voice and music with low latency and high-quality compression."},{name:"vorbis",version:"v1.3.3",note:"Vorbis is an open-source audio codec known for its high audio quality and efficient compression. It's often used for audio streaming."},{name:"zlib",version:"v1.2.11",note:"zlib is a compression library that provides data compression and decompression functionality, commonly used in file compression formats like gzip."},{name:"libwebp",version:"v1.3.2",note:"libwebp is a library for working with the WebP image format, offering efficient image compression for web use"},{name:"freetype2",version:"v2.10.4",note:"FreeType 2 is a library for rendering fonts. It is commonly used for text rendering in applications and systems."},{name:"fribidi",version:"v1.0.9",note:"FriBidi is a library for handling bidirectional text (text containing both left-to-right and right-to-left scripts) and is often used in text layout and rendering."},{name:"harfbuzz",version:"5.2.0",note:"HarfBuzz is a text shaping engine that allows complex script text to be rendered correctly. It's used in conjunction with font rendering libraries."},{name:"libass",version:"0.15.0",note:"libass is a library for rendering and formatting subtitles in multimedia applications, making it essential for displaying subtitles alongside video content."},{name:"zimg",version:"3.0.5",note:"zimg implements the commonly required image processing basics of scaling, colorspace conversion, and depth conversion."}].map((e=>(0,a.kt)(p.Z,{key:e.name,mdxType:"TableRow"},(0,a.kt)(l.Z,{component:"th",scope:"row",mdxType:"TableCell"},e.name),(0,a.kt)(l.Z,{align:"left",mdxType:"TableCell"},e.version),(0,a.kt)(l.Z,{align:"left",mdxType:"TableCell"},e.note)))))))))}v.isMDXComponent=!0},5922:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/ffmpegwasm-arch-918a2b3e4629947bae75e8f42a779def.png"}}]);