Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador
SDK 2.0.0. O SDK Web não tem um “callback unificado de pré-processamento de textura GL” no estilo nativo. Use este pipeline:Captura → processImage → desenhar no canvas → captureStream / pegar um MediaStreamTrack → entregar ao SDK de terceiros (replaceTrack ou uma track de vídeo personalizada).A autenticação usa somente licenseToken. Busque-o no seu servidor antes de init(). Nunca incorpore appKey no JS do frontend. Veja Autenticação e licença e Implementar beleza.
import { BeautyEffectEngine, EngineConfig, FrameType, MirrorMode,} from 'facebetter';const engine = new BeautyEffectEngine(new EngineConfig({ licenseToken: await fetch('/api/facebetter/auth', { method: 'POST' }).then((r) => r.text()),}));await engine.setLogConfig({ consoleEnabled: true, level: 2 });await engine.init();const video = document.createElement('video');video.playsInline = true;video.muted = true;video.srcObject = await navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 }, audio: false,});await video.play();const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');function loop() { if (engine.initialized && video.readyState >= 2 && video.videoWidth > 0) { const result = engine.processImage( video, video.videoWidth, video.videoHeight, FrameType.Video, MirrorMode.Horizontal, // front camera as needed ); if (result) { if (canvas.width !== result.width) canvas.width = result.width; if (canvas.height !== result.height) canvas.height = result.height; ctx.putImageData(result, 0, 0); } } requestAnimationFrame(loop);}loop();// Beauty video track — pass to any RTC / meeting SDKconst beautyStream = canvas.captureStream(30);const beautyTrack = beautyStream.getVideoTracks()[0];
Prefira processImage. processTexture é para handles de textura GPU existentes e não aplica espelhamento. Para prévia / publicação ao vivo, use o pipeline de canvas acima.
No unload da página: beautyTrack.stop(), cancele requestAnimationFrame e engine.destroy().
As APIs Web dos fornecedores mudam entre versões. Abaixo está apenas como alimentar beautyTrack; join, tokens e escolha de dispositivo ficam na documentação deles.
Dois padrões comuns (confira sua versão de trtc-js-sdk / TUI):
Criar o stream local a partir da track de beleza (fonte de vídeo personalizada / passar um MediaStreamTrack)
Criar um stream de câmera primeiro e, em seguida, replaceTrack(beautyTrack)
// Sketch: replace the video track on a local stream// const localStream = TRTC.createStream({ ... });// await localStream.initialize();// await localStream.replaceTrack(beautyTrack);// await client.publish(localStream);
Não assuma que existe um onProcessVideoFrame(textureId) no estilo nativo na Web.
Use uma track de vídeo personalizada ou replaceTrack em uma track existente:
import AgoraRTC from 'agora-rtc-sdk-ng';// A: custom video track from MediaStreamTrack (API name per agora-rtc-sdk-ng)const customVideoTrack = AgoraRTC.createCustomVideoTrack({ mediaStreamTrack: beautyTrack,});await client.publish([customVideoTrack /*, microphoneTrack */]);// B: already have a camera track// await cameraTrack.replaceTrack(beautyTrack);
Passe a track processada para a factory de track de vídeo local do LiveKit, ou substitua em uma track publicada:
import { Room, LocalVideoTrack, createLocalVideoTrack } from 'livekit-client';// Sketch: create from MediaStreamTrack and publish (factory name per livekit-client)const track = LocalVideoTrack.createFromMediaStreamTrack(beautyTrack);await room.localParticipant.publishTrack(track);// Or on an existing LocalVideoTrack:// await localVideoTrack.replaceTrack(beautyTrack);
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Facebetter Docs","description":"Realtime AI beauty SDK documentation","colors":{"primary":"#30A46C","light":"#34D399","dark":"#18794E"},"logo":{"light":"https://mintcdn.com/facebetter/mm9bFyHVX2GTlJSl/logo/light.png?fit=max\u0026auto=format\u0026n=mm9bFyHVX2GTlJSl\u0026q=85\u0026s=ba93740f2f6ce1ce1929d9420b2a0386","dark":"https://mintcdn.com/facebetter/mm9bFyHVX2GTlJSl/logo/dark.png?fit=max\u0026auto=format\u0026n=mm9bFyHVX2GTlJSl\u0026q=85\u0026s=10b4748a6af46d98b65771f1a35be2b7","href":"https://facebetter.net"},"favicon":"https://mintcdn.com/facebetter/mm9bFyHVX2GTlJSl/favicon.png?fit=max\u0026auto=format\u0026n=mm9bFyHVX2GTlJSl\u0026q=85\u0026s=e215c35996f449da48a1c4f1c15cbe44","navbar":{"links":[{"href":"https://facebetter.net","label":"Website"},{"href":"https://facebetter.net/dashboard","label":"Dashboard"}],"primary":{"type":"button","label":"Download","href":"https://facebetter.net/download"}},"footer":{"socials":{"github":"https://github.com/pixpark/facebetter-sdk"}},"seo":{"metatags":{"og:site_name":"Facebetter Docs"}},"icons":{"library":"fontawesome"},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"styling":{"latex":false},"navigation":{"languages":[{"language":"en","navbar":{"links":[{"href":"https://facebetter.net","label":"Website"},{"href":"https://facebetter.net/dashboard","label":"Dashboard"},{"href":"https://facebetter.net/download","label":"Download"}]},"href":""},{"language":"zh","navbar":{"links":[{"href":"https://facebetter.net/zh","label":"官网"},{"href":"https://facebetter.net/zh/dashboard","label":"控制台"},{"href":"https://facebetter.net/zh/download","label":"下载"}]},"href":"zh"},{"language":"ja","navbar":{"links":[{"href":"https://facebetter.net/ja","label":"ウェブサイト"},{"href":"https://facebetter.net/ja/dashboard","label":"コンソール"},{"href":"https://facebetter.net/ja/download","label":"ダウンロード"}]},"href":"ja"},{"language":"ko","navbar":{"links":[{"href":"https://facebetter.net/ko","label":"웹사이트"},{"href":"https://facebetter.net/ko/dashboard","label":"콘솔"},{"href":"https://facebetter.net/ko/download","label":"다운로드"}]},"href":"ko"},{"language":"es","navbar":{"links":[{"href":"https://facebetter.net/es","label":"Sitio web"},{"href":"https://facebetter.net/es/dashboard","label":"Consola"},{"href":"https://facebetter.net/es/download","label":"Descargas"}]},"href":"es"},{"language":"pt-BR","navbar":{"links":[{"href":"https://facebetter.net/pt-BR","label":"Site"},{"href":"https://facebetter.net/pt-BR/dashboard","label":"Console"},{"href":"https://facebetter.net/pt-BR/download","label":"Downloads"}]},"href":"pt-BR"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"facebetter","hasAudioNarration":false,"actualSubdomain":"facebetter","customDomains":["docs.facebetter.net"],"gitSource":{"type":"github","owner":"parkergrt","repo":"facebetter-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"latestBuiltDeploymentHistoryId":"6ae42036d9294bdce1b30942","collectionId":"9c665788-6552-48c4-97a2-fe76eb1aa7d8","liveDeploymentHistoryId":"6ae42036d9294bdce1b30942","schemaVersion":"v3"},"entitlements":{},"buildId":"6ae42036d9294bdce1b30942","clientVersion":"0.0.4054","searchFilterCounts":[{"language":"en","tag":"SDK Docs","count":51},{"language":"es","tag":"Docs del SDK","count":51},{"language":"ja","tag":"SDK ドキュメント","count":51},{"language":"ko","tag":"SDK 문서","count":51},{"language":"pt-BR","tag":"Docs do SDK","count":51},{"language":"zh","tag":"SDK 文档","count":51},{"language":"en","tag":"OBS Plugin","count":12},{"language":"es","tag":"Plugin de OBS","count":12},{"language":"ja","tag":"OBS プラグイン","count":12},{"language":"ko","tag":"OBS 플러그인","count":12},{"language":"pt-BR","tag":"Plugin para OBS","count":12},{"language":"zh","tag":"OBS 插件","count":12},{"language":"en","tag":"Introduction","count":9},{"language":"es","tag":"Introducción","count":9},{"language":"ja","tag":"はじめに","count":9},{"language":"ko","tag":"소개","count":9},{"language":"pt-BR","tag":"Introdução","count":9},{"language":"zh","tag":"产品介绍","count":9},{"language":"en","tag":"Effect Creator","count":8},{"language":"es","tag":"Effect Creator","count":8},{"language":"ja","tag":"エフェクト作成","count":8},{"language":"ko","tag":"이펙트 제작","count":8},{"language":"pt-BR","tag":"Effect Creator","count":8},{"language":"zh","tag":"贴纸制作","count":8},{"language":"en","tag":"Android","count":7},{"language":"en","tag":"iOS","count":7},{"language":"en","tag":"Linux","count":7},{"language":"en","tag":"macOS","count":7},{"language":"en","tag":"Web","count":7},{"language":"en","tag":"Windows","count":7},{"language":"es","tag":"Android","count":7},{"language":"es","tag":"iOS","count":7},{"language":"es","tag":"Linux","count":7},{"language":"es","tag":"macOS","count":7},{"language":"es","tag":"Web","count":7},{"language":"es","tag":"Windows","count":7},{"language":"ja","tag":"Android","count":7},{"language":"ja","tag":"iOS","count":7},{"language":"ja","tag":"Linux","count":7},{"language":"ja","tag":"macOS","count":7},{"language":"ja","tag":"Web","count":7},{"language":"ja","tag":"Windows","count":7},{"language":"ko","tag":"Android","count":7},{"language":"ko","tag":"iOS","count":7},{"language":"ko","tag":"Linux","count":7},{"language":"ko","tag":"macOS","count":7},{"language":"ko","tag":"Web","count":7},{"language":"ko","tag":"Windows","count":7},{"language":"pt-BR","tag":"Android","count":7},{"language":"pt-BR","tag":"iOS","count":7},{"language":"pt-BR","tag":"Linux","count":7},{"language":"pt-BR","tag":"macOS","count":7},{"language":"pt-BR","tag":"Web","count":7},{"language":"pt-BR","tag":"Windows","count":7},{"language":"zh","tag":"Android","count":7},{"language":"zh","tag":"iOS","count":7},{"language":"zh","tag":"Linux","count":7},{"language":"zh","tag":"macOS","count":7},{"language":"zh","tag":"Web","count":7},{"language":"zh","tag":"Windows","count":7}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"pt-BR/web/third-party-integration","slug":"/pt-BR/web/third-party-integration","pageMetadata":{"title":"Integração com terceiros","description":"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador","href":"/pt-BR/web/third-party-integration"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,hr:`hr`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading,Table,Tip}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`SDK `,_jsx(_components.strong,{children:`2.0.0`}),`. O SDK Web `,_jsx(_components.strong,{children:`não`}),` tem um “callback unificado de pré-processamento de textura GL” no estilo nativo. Use este pipeline:`]}),`\n`,_jsx(_components.p,{children:_jsxs(_components.strong,{children:[`Captura → `,_jsx(_components.code,{children:`processImage`}),` → desenhar no canvas → `,_jsx(_components.code,{children:`captureStream`}),` / pegar um `,_jsx(_components.code,{children:`MediaStreamTrack`}),` → entregar ao SDK de terceiros (`,_jsx(_components.code,{children:`replaceTrack`}),` ou uma track de vídeo personalizada).`]})}),`\n`,_jsxs(_components.p,{children:[`A autenticação usa somente `,_jsx(_components.code,{children:`licenseToken`}),`. Busque-o no seu servidor antes de `,_jsx(_components.code,{children:`init()`}),`. `,_jsx(_components.strong,{children:`Nunca`}),` incorpore `,_jsx(_components.code,{children:`appKey`}),` no JS do frontend. Veja `,_jsx(_components.a,{href:`/pt-BR/intro/license`,children:`Autenticação e licença`}),` e `,_jsx(_components.a,{href:`/pt-BR/web/implement-beauty`,children:`Implementar beleza`}),`.`]}),`\n`,_jsx(CodeBlock,{numberOfLines:`12`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`12`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`getUserMedia / vendor preview track`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ↓`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`HTMLVideoElement`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ↓`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`BeautyEffectEngine.processImage(...)`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ↓`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`canvas + putImageData`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ↓`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`canvas.captureStream() → MediaStreamTrack`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ↓`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`TRTC / Agora / LiveKit publish or replaceTrack`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),`\n`,_jsx(Heading,{level:`2`,id:`pipeline-recomendado-independente-do-fornecedor`,children:`Pipeline recomendado (independente do fornecedor)`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`47`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`47`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` BeautyEffectEngine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` EngineConfig`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` FrameType`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` MirrorMode`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`} `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'facebetter'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` engine`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` BeautyEffectEngine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` EngineConfig`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` licenseToken:`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` await`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` fetch`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'/api/facebetter/auth'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`method:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'POST'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`then`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`((`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`r`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` r`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`()),`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}));`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` engine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`setLogConfig`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`consoleEnabled:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` true`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`level:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 2`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` engine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` video`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` document`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`createElement`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'video'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`playsInline`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` true`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`muted`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` true`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`srcObject`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` navigator`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`mediaDevices`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`getUserMedia`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 1280`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 720`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` audio:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` false`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`play`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` canvas`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` document`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`createElement`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'canvas'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` ctx`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`getContext`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'2d'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`function`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` loop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`() {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` if`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`engine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`initialized`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` \u0026\u0026`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`readyState`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` >=`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 2`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` \u0026\u0026`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`videoWidth`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` >`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 0`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` result`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` engine`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`processImage`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`videoWidth`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`videoHeight`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` FrameType`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`Video`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` MirrorMode`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`Horizontal`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// front camera as needed`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` );`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` if`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` if`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` !==`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` if`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` (`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` !==`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`) `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` ctx`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`putImageData`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`result`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`0`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`0`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` requestAnimationFrame`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`loop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`loop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Beauty video track — pass to any RTC / meeting SDK`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` beautyStream`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` canvas`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`captureStream`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`30`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` beautyTrack`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` beautyStream`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`getVideoTracks`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`()[`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`0`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`];`})]}),`\n`]})})}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Prefira `,_jsx(_components.code,{children:`processImage`}),`. `,_jsx(_components.code,{children:`processTexture`}),` é para handles de textura GPU existentes e `,_jsx(_components.strong,{children:`não aplica espelhamento`}),`. Para prévia / publicação ao vivo, use o pipeline de canvas acima.`]})}),`\n`,_jsxs(_components.p,{children:[`No unload da página: `,_jsx(_components.code,{children:`beautyTrack.stop()`}),`, cancele `,_jsx(_components.code,{children:`requestAnimationFrame`}),` e `,_jsx(_components.code,{children:`engine.destroy()`}),`.`]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`encaixar-em-sdks-de-terceiros`,children:`Encaixar em SDKs de terceiros`}),`\n`,_jsxs(_components.p,{children:[`As APIs Web dos fornecedores mudam entre versões. Abaixo está apenas como `,_jsxs(_components.strong,{children:[`alimentar `,_jsx(_components.code,{children:`beautyTrack`})]}),`; join, tokens e escolha de dispositivo ficam na documentação deles.`]}),`\n`,_jsx(Heading,{level:`3`,id:`trtc-tencent-web`,children:`TRTC (Tencent Web)`}),`\n`,_jsxs(_components.p,{children:[`Dois padrões comuns (confira sua versão de `,_jsx(_components.code,{children:`trtc-js-sdk`}),` / TUI):`]}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Criar o stream local a partir da track de beleza`}),` (fonte de vídeo personalizada / passar um `,_jsx(_components.code,{children:`MediaStreamTrack`}),`)`]}),`\n`,_jsx(_components.li,{children:_jsxs(_components.strong,{children:[`Criar um stream de câmera primeiro e, em seguida, `,_jsx(_components.code,{children:`replaceTrack(beautyTrack)`})]})}),`\n`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`5`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`5`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Sketch: replace the video track on a local stream`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// const localStream = TRTC.createStream({ ... });`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// await localStream.initialize();`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// await localStream.replaceTrack(beautyTrack);`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// await client.publish(localStream);`})}),`\n`]})})}),`\n`,_jsxs(_components.p,{children:[`Não assuma que existe um `,_jsx(_components.code,{children:`onProcessVideoFrame(textureId)`}),` no estilo nativo na Web.`]}),`\n`,_jsx(Heading,{level:`3`,id:`agora-web`,children:`Agora Web`}),`\n`,_jsxs(_components.p,{children:[`Use uma `,_jsx(_components.strong,{children:`track de vídeo personalizada`}),` ou `,_jsx(_components.code,{children:`replaceTrack`}),` em uma track existente:`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`10`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`10`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` AgoraRTC`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:` from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'agora-rtc-sdk-ng'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// A: custom video track from MediaStreamTrack (API name per agora-rtc-sdk-ng)`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` customVideoTrack`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` AgoraRTC`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`createCustomVideoTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` mediaStreamTrack:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` beautyTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` client`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`publish`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`([`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`customVideoTrack`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` /*, microphoneTrack */`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`]);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// B: already have a camera track`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// await cameraTrack.replaceTrack(beautyTrack);`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`livekit-web`,children:`LiveKit Web`}),`\n`,_jsx(_components.p,{children:`Passe a track processada para a factory de track de vídeo local do LiveKit, ou substitua em uma track publicada:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`8`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`8`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`Room`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`LocalVideoTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`createLocalVideoTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'livekit-client'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Sketch: create from MediaStreamTrack and publish (factory name per livekit-client)`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` track`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` LocalVideoTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`createFromMediaStreamTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`beautyTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` room`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`localParticipant`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`publishTrack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`track`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Or on an existing LocalVideoTrack:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// await localVideoTrack.replaceTrack(beautyTrack);`})}),`\n`]})})}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`observações`,children:`Observações`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Item`}),_jsx(_components.th,{children:`Detalhe`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Autenticação`}),_jsxs(_components.td,{children:[`Busque `,_jsx(_components.code,{children:`licenseToken`}),` no seu servidor`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Desempenho`}),_jsxs(_components.td,{children:[`Reutilize um canvas; limite o FPS de `,_jsx(_components.code,{children:`captureStream`}),`; não aloque um canvas novo a cada quadro`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Áudio`}),_jsxs(_components.td,{children:[`O exemplo é só vídeo; pegue o microfone de um `,_jsx(_components.code,{children:`getUserMedia({ audio: true })`}),` separado e publique`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Espelhamento`}),_jsxs(_components.td,{children:[`A prévia pode usar `,_jsx(_components.code,{children:`MirrorMode`}),` em `,_jsx(_components.code,{children:`processImage`}),`; decida se o encode deve corresponder`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Mudanças do fornecedor`}),_jsxs(_components.td,{children:[`As assinaturas de `,_jsx(_components.code,{children:`replaceTrack`}),` / `,_jsx(_components.code,{children:`createCustomVideoTrack`}),` mudam — siga o SDK Web atual`]})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`solução-de-problemas`,children:`Solução de problemas`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Sintoma`}),_jsx(_components.th,{children:`Verifique`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Quadro preto`}),_jsxs(_components.td,{children:[_jsx(_components.code,{children:`video.videoWidth === 0`}),`, esqueceu `,_jsx(_components.code,{children:`await engine.init()`}),`, tamanho do canvas não atualizado`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`O remoto não tem beleza`}),_jsxs(_components.td,{children:[`Você publicou `,_jsx(_components.strong,{children:`beautyTrack`}),`, não a track crua da câmera`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Falha de autenticação`}),_jsx(_components.td,{children:`O proxy devolve o corpo de autenticação verbatim; domínio vinculado no Console`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Travamento`}),_jsxs(_components.td,{children:[`Reduza resolução / FPS; garanta um único loop de `,_jsx(_components.code,{children:`processImage`})]})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`relacionado`,children:`Relacionado`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/pt-BR/web/implement-beauty`,children:`Implementar beleza`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/pt-BR/web/best-practices`,children:`Práticas recomendadas`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/pt-BR/web/error-handling`,children:`Tratamento de erros`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/pt-BR/intro/license`,children:`Autenticação e licença`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/pt-BR/web/api-reference`,children:`Referência da API`})}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Integração com terceiros","description":"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador","href":"/pt-BR/web/third-party-integration"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Pipeline recomendado (independente do fornecedor)","slug":"pipeline-recomendado-independente-do-fornecedor","depth":2,"children":[]},{"title":"Encaixar em SDKs de terceiros","slug":"encaixar-em-sdks-de-terceiros","depth":2,"children":[{"title":"TRTC (Tencent Web)","slug":"trtc-tencent-web","depth":3,"children":[]},{"title":"Agora Web","slug":"agora-web","depth":3,"children":[]},{"title":"LiveKit Web","slug":"livekit-web","depth":3,"children":[]}]},{"title":"Observações","slug":"observações","depth":2,"children":[]},{"title":"Solução de problemas","slug":"solução-de-problemas","depth":2,"children":[]},{"title":"Relacionado","slug":"relacionado","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"facebetter","siteName":"Facebetter Docs","title":"Integração com terceiros - Facebetter Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/web/third-party-integration","matchLevel":1},"zh":{"href":"/zh/web/third-party-integration","matchLevel":1},"ja":{"href":"/ja/web/third-party-integration","matchLevel":1},"ko":{"href":"/ko/web/third-party-integration","matchLevel":1},"es":{"href":"/es/web/third-party-integration","matchLevel":1},"pt-BR":{"href":"/pt-BR/web/third-party-integration","matchLevel":0}}},"lastModified":"2026-09-20T07:10:39.373Z","originalFileLocation":"pt-BR/web/third-party-integration.mdx","locale":"pt-BR"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\">\u003cmeta data-mint-head name=\"application-name\" content=\"Facebetter Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Integração com terceiros - Facebetter Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Facebetter Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.facebetter.net/pt-BR/web/third-party-integration\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://facebetter.mintlify.app/_mintlify/api/og/v2?division=Web\u0026amp;title=Integra%C3%A7%C3%A3o+com+terceiros\u0026amp;description=Conecte+a+beleza+Facebetter+a+TRTC%2C+Agora%2C+LiveKit+e+outros+pipelines+em+tempo+real+no+navegador\u0026amp;theme=e51ae4b5db1db928bd4b6cfc\u0026amp;signature=4a66d537d43ab50036fd5f2f896fe2438337e9f940061ed6c48f2fc85fa2592e\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Integração com terceiros - Facebetter Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://facebetter.mintlify.app/_mintlify/api/og/v2?division=Web\u0026amp;title=Integra%C3%A7%C3%A3o+com+terceiros\u0026amp;description=Conecte+a+beleza+Facebetter+a+TRTC%2C+Agora%2C+LiveKit+e+outros+pipelines+em+tempo+real+no+navegador\u0026amp;theme=e51ae4b5db1db928bd4b6cfc\u0026amp;signature=4a66d537d43ab50036fd5f2f896fe2438337e9f940061ed6c48f2fc85fa2592e\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/facebetter/IGWl7Lrb-idg1WGj/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Facebetter Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#30A46C\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.facebetter.net/pt-BR/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/pt-BR/web/third-party-integration.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"pt-BR\" href=\"https://docs.facebetter.net/pt-BR/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.facebetter.net/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"zh\" href=\"https://docs.facebetter.net/zh/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://docs.facebetter.net/ja/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ko\" href=\"https://docs.facebetter.net/ko/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"es\" href=\"https://docs.facebetter.net/es/web/third-party-integration\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.facebetter.net/web/third-party-integration\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.facebetter.net/#organization\",\"name\":\"Facebetter Docs\",\"url\":\"https://docs.facebetter.net\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/facebetter/mm9bFyHVX2GTlJSl/logo/light.png?fit=max\u0026auto=format\u0026n=mm9bFyHVX2GTlJSl\u0026q=85\u0026s=ba93740f2f6ce1ce1929d9420b2a0386\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.facebetter.net#website\",\"name\":\"Facebetter Docs\",\"url\":\"https://docs.facebetter.net\",\"publisher\":{\"@id\":\"https://docs.facebetter.net/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration#webpage\",\"url\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration\",\"name\":\"Integração com terceiros\",\"description\":\"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\",\"dateModified\":\"2026-09-20T07:10:39.373Z\",\"isPartOf\":{\"@id\":\"https://docs.facebetter.net#website\"},\"breadcrumb\":{\"@id\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Web\",\"item\":\"https://docs.facebetter.net/pt-BR/web/quick-start\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integração com terceiros\",\"item\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration#article\",\"headline\":\"Integração com terceiros\",\"name\":\"Integração com terceiros\",\"description\":\"Conecte a beleza Facebetter a TRTC, Agora, LiveKit e outros pipelines em tempo real no navegador\",\"url\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration\",\"mainEntityOfPage\":{\"@id\":\"https://docs.facebetter.net/pt-BR/web/third-party-integration#webpage\"},\"dateModified\":\"2026-09-20T07:10:39.373Z\",\"publisher\":{\"@id\":\"https://docs.facebetter.net/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.facebetter.net#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Facebetter Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Facebetter Docs","nav":{"global":null,"languages":[{"language":"en","navbar":{"links":[{"href":"https://facebetter.net","label":"Website"},{"href":"https://facebetter.net/dashboard","label":"Dashboard"},{"href":"https://facebetter.net/download","label":"Download"}]},"pages":[{"title":"en","href":"/web/third-party-integration"}]},{"language":"zh","navbar":{"links":[{"href":"https://facebetter.net/zh","label":"官网"},{"href":"https://facebetter.net/zh/dashboard","label":"控制台"},{"href":"https://facebetter.net/zh/download","label":"下载"}]},"pages":[{"title":"zh","href":"/zh/web/third-party-integration"}]},{"language":"ja","navbar":{"links":[{"href":"https://facebetter.net/ja","label":"ウェブサイト"},{"href":"https://facebetter.net/ja/dashboard","label":"コンソール"},{"href":"https://facebetter.net/ja/download","label":"ダウンロード"}]},"pages":[{"title":"ja","href":"/ja/web/third-party-integration"}]},{"language":"ko","navbar":{"links":[{"href":"https://facebetter.net/ko","label":"웹사이트"},{"href":"https://facebetter.net/ko/dashboard","label":"콘솔"},{"href":"https://facebetter.net/ko/download","label":"다운로드"}]},"pages":[{"title":"ko","href":"/ko/web/third-party-integration"}]},{"language":"es","navbar":{"links":[{"href":"https://facebetter.net/es","label":"Sitio web"},{"href":"https://facebetter.net/es/dashboard","label":"Consola"},{"href":"https://facebetter.net/es/download","label":"Descargas"}]},"pages":[{"title":"es","href":"/es/web/third-party-integration"}]},{"language":"pt-BR","navbar":{"links":[{"href":"https://facebetter.net/pt-BR","label":"Site"},{"href":"https://facebetter.net/pt-BR/dashboard","label":"Console"},{"href":"https://facebetter.net/pt-BR/download","label":"Downloads"}]},"tabs":[{"tab":"Docs do SDK","groups":[{"group":"Introdução","icon":"book-open","pages":[{"title":"Documentação do SDK","sidebarTitle":"Início","href":"/pt-BR"},{"title":"Visão geral","href":"/pt-BR/intro/overview"},{"title":"Planos e recursos","href":"/pt-BR/intro/pricing"},{"title":"Assinatura","href":"/pt-BR/intro/enable-service"},{"title":"Autenticação e licença","href":"/pt-BR/intro/license"},{"title":"Pacotes de recursos opcionais","href":"/pt-BR/intro/resource-packs"},{"title":"Usar com IA","href":"/pt-BR/intro/use-with-ai"},{"title":"Enums de parâmetros","href":"/pt-BR/intro/makeup"},{"title":"Notas de versão","href":"/pt-BR/intro/release-note"}]},{"group":"Android","icon":"android","pages":[{"title":"Início rápido","href":"/pt-BR/android/quick-start"},{"title":"Implementar beleza","href":"/pt-BR/android/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/android/third-party-integration"},{"title":"Tratamento de erros","href":"/pt-BR/android/error-handling"},{"title":"Referência da API","href":"/pt-BR/android/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/android/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/android/faq"}]},{"group":"iOS","icon":"apple","pages":[{"title":"Início rápido","href":"/pt-BR/ios/quick-start"},{"title":"Implementar beleza","href":"/pt-BR/ios/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/ios/third-party-integration"},{"title":"Tratamento de erros","href":"/pt-BR/ios/error-handling"},{"title":"Referência da API","href":"/pt-BR/ios/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/ios/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/ios/faq"}]},{"group":"macOS","icon":"laptop","pages":[{"title":"Início rápido","href":"/pt-BR/macos/quick-start"},{"title":"Implementar beleza","href":"/pt-BR/macos/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/macos/third-party-integration"},{"title":"Tratamento de erros","href":"/pt-BR/macos/error-handling"},{"title":"Referência da API","href":"/pt-BR/macos/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/macos/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/macos/faq"}]},{"group":"Windows","icon":"windows","pages":[{"title":"Início rápido","href":"/pt-BR/windows/quick-start"},{"title":"Implementar beleza","href":"/pt-BR/windows/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/windows/third-party-integration"},{"title":"Tratamento de erros","href":"/pt-BR/windows/error-handling"},{"title":"Referência da API","href":"/pt-BR/windows/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/windows/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/windows/faq"}]},{"group":"Linux","icon":"linux","pages":[{"title":"Início rápido","href":"/pt-BR/linux/quick-start"},{"title":"Implementar beleza","href":"/pt-BR/linux/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/linux/third-party-integration"},{"title":"Tratamento de erros","href":"/pt-BR/linux/error-handling"},{"title":"Referência da API","href":"/pt-BR/linux/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/linux/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/linux/faq"}]},{"group":"Web","icon":"globe","pages":[{"title":"Início rápido","href":"/pt-BR/web/quick-start"},{"title":"Implementar beleza","description":"Integre o Facebetter Web SDK 2.0","href":"/pt-BR/web/implement-beauty"},{"title":"Integração com terceiros","href":"/pt-BR/web/third-party-integration"},{"title":"Tratamento de erros","description":"Erros do Facebetter Web SDK 2.0","href":"/pt-BR/web/error-handling"},{"title":"Referência da API","href":"/pt-BR/web/api-reference"},{"title":"Práticas recomendadas","href":"/pt-BR/web/best-practices"},{"title":"Perguntas frequentes","href":"/pt-BR/web/faq"}]}]},{"tab":"Effect Creator","pages":[{"title":"Effect Creator","href":"/pt-BR/effect-creator/introduction"}]},{"tab":"Plugin para OBS","pages":[{"title":"Plugin para OBS","href":"/pt-BR/obs/install"}]},{"tab":"Plugins de edição","pages":[{"title":"Plugins de edição","href":"/pt-BR/fcp/install"}]}]}]},"basePath":"","title":"Integração com terceiros - Facebetter Docs","buildId":"dpl_345ReqzYaAjzS9QpeJemsKdb7KDj","deploymentId":"dpl_345ReqzYaAjzS9QpeJemsKdb7KDj","dynamics":[],"chunks":[]}