Como criar um editor de vídeo em React Native

[navigation]

TL;DR:

• O React Native ajuda a acelerar o desenvolvimento em até 30% para aplicativos multiplataforma;
• Um editor de vídeo pronto oferece a maioria ou até mesmo todos os recursos de que seus usuários precisam para criar conteúdo;
• O Banuba Video Editor SDK oferece fácil integração, muitos recursos de edição e efeitos;
• Para integrá-lo, siga o guia abaixo.

Por que React Native

Nos últimos anos, essa tecnologia continuou sendo a estrutura mais popular para o desenvolvimento de aplicativos móveis multiplataforma.

Ela usa o popular JavaScript e apresenta até 95% de reutilização de código entre Android, iOS e Web. Isso significa que, se você criar um editor de vídeo com o React Native, seu trabalho se tornará mais eficiente, com o tempo total de desenvolvimento diminuindo em até 30% para um aplicativo multiplataforma.

Além disso, o React Native funciona quase tão rápido quanto as tecnologias nativas e pode integrar código nativo. Isso significa que o software de processamento de vídeo React Native pode ser uma alternativa viável a um software desenvolvido com Swift, Java ou Kotlin.

O uso dessa estrutura economizará muitas semanas de trabalho e permitirá que você chegue ao mercado muito mais rápido. Para obter mais detalhes, consulte nosso artigo: "Como desenvolver um aplicativo móvel de editor de vídeo".

O que torna útil um editor de vídeo React Native?

O vídeo de formato curto está dominando os aplicativos móveis. E não se trata apenas de entretenimento: o vídeo também gera 80% mais conversões em aplicativos de comércio, aprendizado e fitness.

Mas os usuários não querem apenas assistir a vídeos. Em vez disso, eles querem criá-los. É aí que a adição de um editor de vídeo React Native se torna um divisor de águas. Você está oferecendo aos usuários as ferramentas para expressar, compartilhar e personalizar sem sair do seu aplicativo.

É claro que criar um editor de vídeo do zero é ambicioso. No entanto, entre o processamento de vídeo nativo, as linhas do tempo da interface do usuário e a exportação, isso se torna complicado rapidamente.

É por isso que muitos desenvolvedores procuram as bibliotecas de editor de vídeo React Native. Essas bibliotecas fazem a ponte entre o front-end do React e os módulos nativos que lidam com o trabalho pesado, como decodificação de vídeo, renderização e efeitos de forma integrada.

E não se trata apenas de potência, mas da interface do usuário do editor de vídeo React Native que é agradável de usar. O que isso deve incluir?

• Um editor de linha do tempo do tipo arrastar e soltar
• Um seletor de biblioteca de mídia integrado ao dispositivo
• Pré-visualizações de filtros e efeitos de RA
• Sobreposições de música e ferramentas de corte de áudio
• Pré-visualizações em tempo real e opções claras de exportação

Ao usar um SDK de vídeo React Native comprovado, seu aplicativo pode liderar esse futuro em vez de ficar para trás.

Por dentro do SDK de editor de vídeo React Native do Banuba

"Criamos esse SDK não apenas para desempenho, mas para criatividade. Nosso objetivo era oferecer aos desenvolvedores do React Native um conjunto de ferramentas que fosse fácil e permitisse que os usuários editassem sem limites." - Elena K., engenheira de produto sênior da Banuba

Mais do que um kit básico, o Banuba Video Editor SDK oferece um conjunto completo de recursos otimizados para desempenho. É uma solução robusta para integrar a edição avançada de vídeo em qualquer aplicativo React Native.

Veja o que diferencia esse SDK de editor de vídeo React Native:

• Linha do tempo que parece nativa.

  A linha do tempo do Banuba oferece aos usuários controle criativo total. Sem atrasos, sem frustrações - apenas edição contínua no Android e no iOS.

• Poderoso processamento de vídeo e áudio.

  O Banuba Video Editor SDK cuida das coisas difíceis: renderização em tempo real, codificação rápida e sincronização perfeita de áudio. Dessa forma, os usuários podem se concentrar na criação, em vez de esperar interminavelmente pelo resultado final.

• Filtros, efeitos e sobreposições.

  O Banuba React Native SDK equipa seu aplicativo com efeitos visuais de alto desempenho, desde filtros e transições até ferramentas de AR e embelezamento. Todos os efeitos são renderizados em tempo real e respondem instantaneamente, mantendo o processo de edição rápido e fluido. Além disso, adicioná-los e ajustá-los é simples graças ao seu design e à documentação completa.

• Suporte a várias plataformas.

  Crie-o uma vez e ele funcionará tanto no iOS quanto no Android. O SDK de vídeo React Native usa uma camada de integração compartilhada para manter sua base de código organizada e seus usuários satisfeitos em qualquer dispositivo.

• Fácil integração em qualquer aplicativo React Native.

  O SDK do Banuba foi projetado com os desenvolvedores em mente. O Banuba oferece documentos, interface de usuário pré-construída e suporte ao React Native imediatamente.
• Preços flexíveis: o custo da licença depende do número de usuários ativos mensais, do conjunto exato de recursos e do número de plataformas compatíveis. Como resultado, até mesmo uma empresa de médio porte pode pagar por isso.
• Tamanho pequeno:quando integrado, o Banuba Video Editor SDK adiciona apenas cerca de 30 Mb ao tamanho do download do aplicativo.

Quer vê-lo em ação?

Experimente o aplicativo de demonstração no Google Play e explore o que o Banuba Video Editor SDK pode realmente fazer.

Então, como você pode adicioná-lo ao seu aplicativo React Native?

Vamos ser práticos. Se você é como a maioria dos desenvolvedores, não quer um guia de 10 etapas. Você quer algo que funcione rapidamente.

Aqui está a versão resumida:

Passo 1. Obtenha seu token de avaliação do Banuba

Para iniciar a avaliação gratuita do SDK e obter todos os benefícios do processamento de vídeo React Native para seu aplicativo, comece obtendo um token de avaliação exclusivo. Ele oferece uma avaliação gratuita de 14 dias com recursos ilimitados do SDK.

Etapa 2. Instale o SDK React Native do Banuba

Isso envolve adicionar o pacote Banuba ao seu projeto React Native.

2.1.Verifique as dependências:

Seu projeto está executando as versões corretas? Certificar-se de que tudo está alinhado agora economizará tempo mais tarde.

• Yarn: 3.6.1 ou superior (ou equivalente npm)
• React Native: 0.74.2 ou superior
• Android: API Level 23 (Android 6.0) ou superior
• iOS: iOS 14.0 ou superior

Você pode verificar sua versão do React Native em seu arquivopackage.json. Atualize se necessário.

2.2. Instale o pacote:

Vá para a pasta principal de seu projeto no terminal e tente um destes comandos:

Usando o npm:

[code]
Bash

npminstall react-native-banuba-sdk
[/code]

Usando o Yarn:

[code]
Bash

yarnadd react-native-banuba-sdk
[/code]

2.3. Instalar pods (específico para iOS):

Depois de instalar o pacote npm/yarn, você precisa instalar as dependências nativas do iOS (CocoaPods).

[code]
Bash

cd ios
pod install
cd ... # Volte para a raiz do seu projeto
[/code]

Está tendo problemas com a instalação do pod? Execute o pod deintegrate e, em seguida, o pod install novamente. Além disso, verifique novamente se seu Podfile inclui todas as entradas necessárias - o script de instalação do Banuba normalmente lida com isso para versões recentes do React Native.

Etapa 3: Configuração de dependências nativas (configuração do projeto)

Essa costuma ser a parte mais crítica e específica da plataforma. O SDK geralmente tem código nativo que precisa de vinculação e configuração adequadas. As versões modernas do React Native (0.60+) usam a vinculação automática, o que simplifica isso, mas algumas etapas manuais ainda podem ser exigidas pelo Banuba.

3.1. Configuração do Android:

1. android/build.gradle (nível de projeto):

Talvez você precise adicionar o repositório Maven do Banuba.

[code]
Gradle

allprojects {
repositories {
google()
mavenCentral()
// Adicione o repositório Maven do Banuba se especificado em seus documentos
// Por exemplo:
maven { url 'https://artifactory.banuba.com/artifactory/banuba-maven-release/' }
}
[/code]

android/app/build.gradle (nível do aplicativo):

Versão mínima do SDK: Certifique-se de que sua minSdkVersion corresponda aos requisitos da Banuba (por exemplo, minSdkVersion 23).

Compatibilidade com Java 8:

[code]

Gradle

android {
// ...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
// ...
}
[/code]

Opções de empacotamento: Às vezes, SDKs grandes exigem packagingOptions específicos .

[code]
Gradle

android {
// ...
packagingOptions {
pickFirst 'lib/arm64-v8a/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
}
// ...
}
[/code]

Permissões: Provavelmente, você precisará de permissões de câmera, microfone e armazenamento no AndroidManifest.xml. Embora o SDK possa solicitá-las em tempo de execução, declarar essas permissões é uma boa prática.

2. android/app/src/main/AndroidManifest.xml:

XML

[code]
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.yourapp">

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<application
android:requestLegacyExternalStorage="true" >
</application>
</manifest>
[/code]

3.2 Configuração do iOS:

• ios/Podfile:

• Certifique-se de que sua plataforma :ios, '14.0' (ou superior) esteja configurada.
• O Banuba pode exigir ganchos ou sinalizadores específicos de pós-instalação; verifique a documentação.

1. Info.plist: Será necessário adicionar descrições de privacidade para acesso à câmera, ao microfone e à biblioteca de fotos.

XML

[code]
<key>NSCameraUsageDescription</key>
<string>Este aplicativo precisa de acesso à sua câmera para capturar vídeos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Este aplicativo precisa de acesso ao seu microfone para gravar áudio para vídeos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Este aplicativo precisa de acesso à sua biblioteca de fotos para selecionar e salvar vídeos.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Este aplicativo precisa salvar vídeos editados em sua biblioteca de fotos.</string>
[/code]

Configurações do projeto Xcode:

• Build Settings: Às vezes, são necessáriosHEADER_SEARCH_PATHS ou FRAMEWORK_SEARCH_PATHS específicos .
• Recursos: Certifique-se de que os recursos necessários, como "Background Modes" (se o processamento de vídeo ocorrer em segundo plano), estejam ativados, embora seja menos comum para um editor simples.

Etapa 4: adicione o componente React do editor de vídeo ao seu aplicativo

É aqui que você integra o SDK do Banuba ao seu código JavaScript React Native.

4.1. Inicialize o SDK: O SDK do Banuba precisa ser inicializado com seu token, geralmente uma vez quando o aplicativo é iniciado ou quando o componente que usa o editor é montado.

[code]
JavaScript

// App.js ou um BanubaService.js dedicado

import { Platform, Alert } from 'react-native';
// Esse caminho de importação é ilustrativo. Verifique a documentação do Banuba para obter o caminho exato.
import BanubaVideoEditor from 'react-native-banuba-sdk';

// IMPORTANTE: Substitua pelo seu Banuba Token real!
const BANUBA_CLIENT_TOKEN = "YOUR_UNIQUE_BANUBA_TRIAL_TOKEN";
export const initializeBanubaSDK = async () => {
try {
// Este é um espaço reservado para o método de inicialização específico do Banuba.
// Ele pode retornar um booleano indicando sucesso.
const isInitialized = await BanubaVideoEditor.initialize(BANUBA_CLIENT_TOKEN);
if (isInitialized) {
console.log("Banuba SDK inicializado com sucesso!");
return true;
} else {
console.error("Banuba SDK failed to initialize.");
Alert.alert("Initialization Failed", "Could not initialize video editor. Please check your token.");
return false;
}
} catch (error) {
console.error("Error during Banuba SDK initialization:", error);
Alert.alert("Error", "An error occurred while setting up the video editor.");
return false;
}
};
// Você também pode ter uma função de desinicialização para limpeza
export const deinitializeBanubaSDK = async () => {
try {
await BanubaVideoEditor.deinitialize(); // Método placeholder
console.log("Banuba SDK deinitialized.");
} catch (error) {
console.error("Error deinitializing Banuba SDK:", error);
}
};
[/code]

4.2. Crie um componente para iniciar o editor: Esse componente manipulará a lógica para abrir o SDK do editor de vídeo Banuba e processar seus resultados.

[code]
JavaScript

// screens/VideoEditorScreen.js (ou qualquer componente em que você queira o editor)

import React, { useState, useEffect } from 'react';
import { View, Button, Text, ActivityIndicator, Alert } from 'react-native';
import { initializeBanubaSDK, deinitializeBanubaSDK } from '../services/BanubaService'; // Supondo que você coloque a lógica de inicialização aqui
// Novamente, importação de espaço reservado.
import BanubaVideoEditor from 'react-native-banuba-sdk';
const VideoEditorScreen = () => {
const [sdkReady, setSdkReady] = useState(false);
const [editingResult, setEditingResult] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
const setupSdk = async () => {
const success = await initializeBanubaSDK();
setSdkReady(success);
setLoading(false);
};
setupSdk();

return () => {
// Desinicializar o SDK quando o componente for desmontado, se necessário
// deinitializeBanubaSDK();
};
}, []);

const openBanubaEditor = async () => {
se (!sdkReady) {
Alert.alert("Editor Not Ready", "Aguarde enquanto o editor de vídeo é inicializado.");
return;
}
try {
setLoading(true);
// Essa é a chamada principal para abrir a UI do Banuba Video Editor.
// O objeto options é crucial para a personalização (vídeo inicial, recursos habilitados).
// Consulte a documentação do Banuba para ver todas as opções disponíveis.
const result = await BanubaVideoEditor.openVideoEditor({
// Opções de exemplo:
// entryPoint: 'camera', // 'camera' ou 'gallery' ou 'editor' (se abrir vídeo existente)
// initialVideoUri: 'file:///path/to/my/video.mp4', // Para editar um vídeo existente
// enableGallery: true,
// enableCamera: true,
// enableMusicEditor: true,
// enableFilterEditor: true,
// exportQuality: 'high',
// audioVolume: 0.8,
// watermarkEnabled: false, // Se sua licença permitir
// ... muitas outras opções de personalização
});
Se (result && result.exportedVideoUri) {
console.log("Vídeo editado com sucesso! Caminho:", result.exportedVideoUri);
setEditingResult(`Vídeo editado salvo em: ${result.exportedVideoUri}`);
Alert.alert("Success", "O vídeo foi editado e salvo!");
// Agora você pode carregar esse vídeo, exibi-lo etc.
} else if (result && result.cancelled) {
console.log("A edição do vídeo foi cancelada.");
setEditingResult("Edição de vídeo cancelada pelo usuário.");
} else {
console.warn("O editor de vídeo foi fechado sem um resultado específico.");
setEditingResult("A sessão do editor de vídeo foi encerrada.");
}
} catch (error) {
console.error("Falha ao abrir o Banuba Video Editor:", error);
Alert.alert("Error", "Não foi possível abrir o editor de vídeo.");
} finally {
setLoading(false);
}
};

if (loading) {
return (
<View style=>
<ActivityIndicator size="large" color="#0000ff" />
<Text style=>{sdkReady ? "Iniciando o Editor..." : "Inicializando o SDK do Banuba..."}</Text>
</View>
);
}
return (
<View style=>
<Text style=>
Integrar o Editor de Vídeo Banuba
</Text>
{sdkReady ? (
<Button
title="Open Video Editor"
onPress={openBanubaEditor}
disabled={loading}
/>
) : (
<Text style=>
SDK não está pronto. Verifique se há erros no token e no console.
</Text>
)}

{editingResult && (
<View style=>
<Text style=>Last Editor Result:</Text>
<Text style=>{editingResult}</Text>
{/* Você poderia adicionar um componente <Video> aqui para reproduzir o arquivo editado */}
{/* Exemplo: <Video source= style= /> */}
</View>
)}
</View
);
};
export default VideoEditorScreen;
[/code]

Etapa 5: Execute seu aplicativo

Após todas essas etapas, recompile seu aplicativo para garantir que todos os módulos nativos estejam vinculados corretamente.

[code]
Bash

# Limpe os caches (boa prática)
npm start -- --reset-cache # ou yarn start -- --reset-cache
cd ios && pod install && cd ... # Execute novamente o pod install se você tiver alterado o Podfile
npx react-native run-android
npx react-native run-ios
[/code]

Siga essas etapas e explore os recursos oficiais do Banuba para integrar facilmente o SDK do editor de vídeo em seu projeto React Native. E se ainda não tiver certeza de nada, acesse o portal do desenvolvedor para se conectar com nossa equipe de suporte ou com outros desenvolvedores. Além disso, você pode encontrar alguns exemplos e guias do SDK do editor de vídeo aqui.

Exemplo conceitual de editor de vídeo React Native: Um editor de vídeo simples com o SDK do Banuba

Imagine um aplicativo React Native em que os usuários possam gravar vídeos divertidos ou pegar um de seu telefone, adicionar filtros legais, cortar as partes que não querem e, em seguida, salvar ou compartilhar o corte finalizado.

Nome do aplicativo: "MySimpleVid"

Recursos principais:

1. Seleção/gravação de vídeo: Permite que os usuários escolham vídeos existentes ou gravem novos.
2. Edição básica da linha do tempo: Corte os pontos de início e fim do vídeo.
3. Efeitos/filtros: Aplique um filtro visual ao vídeo.
4. Processamento e exportação de vídeo: Salvar o vídeo editado.

Tecnologias:

• React Native

SDK do editor de vídeo Banuba

Fluxo de usuário e envolvimento com o SDK do Banuba

Fase 1: Lançamento do editor e seleção inicial de vídeos

Ação do usuário:

O usuário toca no botão "Edit Video" (Editar vídeo) na tela principal do seu aplicativo React Native.

Comportamento do aplicativo (React Native):

• O aplicativo verifica se o SDK do Banuba foi inicializado (estado sdkReady).

• Se estiver pronto, ele chama BanubaVideoEditor.openVideoEditor() com os parâmetros apropriados.

Opções do SDK do Banuba:

[code]
{
entryPoint: 'camera' | 'gallery',
enableGallery: true,
enableCamera: true
}
[/code]

Resposta da interface do usuário do SDK:

• Se o entryPoint: 'gallery', um seletor de mídia será aberto.
• Se entryPoint: 'camera', a câmera no aplicativo será iniciada para gravação.

Resultado:

O editor é compatível com a seleção de mídia do dispositivo e com a captura de vídeo em tempo real por meio do módulo de câmera integrado.

Fase 2: Linha do tempo e interface de corte

Ação do usuário:

Depois de escolher ou gravar um vídeo, o editor faz a transição para a visualização da linha do tempo.

IU do Editor Banuba:

• Parte superior: player de visualização de vídeo.
• Parte inferior: Linha do tempo interativa com alças de início/fim arrastáveis.

Interações do usuário:

• Ajuste os pontos de corte arrastando as alças.
• A visualização do vídeo é atualizada em tempo real para refletir as alterações.

Funcionalidade do SDK (Under the Hood):

• O corte em tempo real é feito pelo mecanismo de vídeo nativo do Banuba.
• Os quadros são renderizados novamente de forma dinâmica com base nos pontos de corte para uma reprodução suave e sem atrasos.

Fase 3: Aplicação de filtros e efeitos

Ação do usuário:

O usuário toca no ícone "Filters" (Filtros) ou "Effects" (Efeitos).

IU do Banuba Editor:

• Aparece uma rolagem horizontal ou um layout de grade de miniaturas de efeitos.
• Ao tocar em qualquer efeito, ele é aplicado imediatamente à visualização.

Recursos:

• Renderização de efeitos em tempo real.
• Filtros categorizados: por exemplo, Color, Artistic, AR Masks.
• Os filtros de RA usam rastreamento facial e sobrepõem ativos 3D/2D usando visão computacional.

Função do SDK:

• Aplica filtros quadro a quadro em tempo real.
• Integra efeitos perfeitamente com partes de vídeo cortadas.

Fase 4: Exportação do vídeo final

Ação do usuário:

Após a conclusão da edição, o usuário toca em "Done" (Concluído ) ou "Export" (Exportar).

UI do SDK do Banuba:

• Um indicador de progresso aparece enquanto o vídeo é processado.

Tarefas de processamento do SDK:

• Codificação: Converte as edições em um vídeo final (por exemplo, MP4).
• Mesclagem de edições: Aplica cortes, efeitos e filtros permanentemente.
• Audio Sync (Sincronização de áudio): Mantém o som alinhado com o conteúdo do vídeo.
• Otimização: Usa aceleração de hardware quando disponível.

Resultado:

• O SDK retorna o controle para o React Native.
• O resultado retornado inclui o caminho final do vídeo (por exemplo, exportedVideoUri).

Lógica do aplicativo (React Native):

• Use o URI para:
  • Fazer upload para um backend/servidor.
  • Mostrar em um player personalizado.
  • Salvar na galeria (usando módulos como react-native-fs ou react-native-camera-roll).
  • Navegar para uma tela de compartilhamento.

Integração

CLI (React Native)

A configuração do SDK do Banuba em um aplicativo React Native simples é rápida e direta:

Instale o SDK:

[code]
npm install react-native-banuba-sdk
# ou
yarn add react-native-banuba-sdk
[/code]

2. Para iOS, instale o CocoaPods:

[code]
cd ios
pod install
cd ...
[/code]

3. Atualize as configurações do projeto nativo:

Android: Adicionar permissões necessárias e detalhes do SDK ao build.gradle

iOS: Atualizar Info.plist com permissões e definir a versão mínima da plataforma

Para obter detalhes completos, consulte os requisitos do Banuba e o repositório do GitHub.

Integração com a Expo

Usando a Expo com o fluxo de trabalho simples? O SDK do Banuba tem tudo o que você precisa.

1. Instale via Expo CLI:

[code]
expo install react-native-banuba-sdk
[/code]

2. Use o plug-in Banuba Expo Config adicionando-o ao seu app.json ou app.config.js:

[code]
{
"expo": {
"plugins": [
"react-native-banuba-sdk"
],
...
}
}
[/code]

3. Adicione as permissões necessárias:

[code]
{
"expo": {
"android": {
"permissões": [
"CAMERA",
"RECORD_AUDIO",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE"
]
},
"ios": {
"infoPlist": {
"NSCameraUsageDescription": "Este aplicativo precisa de acesso à sua câmera para capturar vídeos.",
"NSMicrophoneUsageDescription": "Este aplicativo precisa de acesso ao seu microfone para gravar áudio.",
"NSPhotoLibraryUsageDescription": "Este aplicativo precisa de acesso à sua biblioteca de fotos para selecionar e salvar vídeos.",
"NSPhotoLibraryAddUsageDescription": "Este aplicativo precisa salvar vídeos editados na sua biblioteca de fotos."
}
}
}
}
[/code]

4. Reconstrua seu aplicativo:

[code]
expo prebuild
expo run:ios
expo run:android
[/code]

Configuração e personalização

O SDK do Banuba permite que você personalize totalmente o layout, o tema e os recursos da ferramenta do editor usando um objeto de configuração simples.

Exemplo: Configuração de ferramentas e tema da barra de ferramentas (TypeScript)

[code]
import BanubaVideoEditor from 'react-native-banuba-sdk';
const editorConfig = {
toolsOrder: ['trim', 'filters', 'stickers', 'music'],
theme: {
primaryColor: '#FF6347',
secondaryColor: '#333',
backgroundColor: '#FFF',
fontFamily: 'Arial',
},
enableFilters: true,
enableMusicEditor: true,
enableAnnotations: true,
overlayImages: ['sticker1.png', 'sticker2.png'],
};

BanubaVideoEditor.openVideoEditor(editorConfig)
.then(result => {
if (result.exportedVideoUri) {
console.log('Vídeo salvo em:', result.exportedVideoUri);
}
})
.catch(console.error);
[/code]

Alterar a ordem das ferramentas e ativar/desativar recursos

[code]
const config = {
toolsOrder: ['filters', 'trim', 'music'], // reordenar os botões da barra de ferramentas
enableTextOverlay: false, // ocultar ferramenta de texto
enableARMasks: true, // ativar máscaras de AR
};
[/code]

Filtros

O Banuba inclui visualizações de filtros em tempo real e filtros AR. Você pode personalizar os conjuntos de filtros exibidos.

[code]
const filterConfig = {
filterCategories: [
{ id: 'color', name: 'Color Filters' },
{ id: 'artistic', name: 'Artistic' },
{ id: 'ar_masks', name: 'AR Masks' },
],
};
BanubaVideoEditor.openVideoEditor({
...editorConfig,
filterConfig,
});
[/code]

Sobreposições

Adicione imagens de sobreposição ou adesivos que seus usuários possam colocar nos vídeos.

[code]
const overlayConfig = {
overlayImages: [
{ id: 'sticker1', uri: 'file:///path/to/sticker1.png' },
{ id: 'sticker2', uri: 'file:///path/to/sticker2.png' },
],
};

BanubaVideoEditor.openVideoEditor({
...editorConfig,
...overlayConfig,
});
[/code]

Anotações

Suporte para desenho à mão livre, adesivos e anotações de texto.

[code]
const annotationConfig = {
enableAnnotations: true,
brushColors: ['#FF0000', '#00FF00', '#0000FF'],
stickerPacks: ['pack1', 'pack2'],
};

BanubaVideoEditor.openVideoEditor({
...editorConfig,
...annotationConfig,
});
[/code]

Ponte de interface nativa

Precisa de uma personalização mais profunda em nível nativo? O Banuba expõe interfaces nativas em ambas as plataformas.

iOS (Objective-C)

[code]
#import <RNVideoEditor/RNVideoEditor.h>
- (void)configureBanubaEditor {
RNVideoEditorBuilder *builder = [RNVideoEditorBuilder new];
builder.theme = [RNVideoEditorTheme defaultTheme];
builder.toolsOrder = @[@"trim", @"filters", @"stickers"];
// Configuração adicional aqui
[RNVideoEditor configureWithBuilder:builder];
}
[/code]

Android (Kotlin)

[code]
RNVideoEditorModule.editorWillOpenClosure = { editorSettings ->

editorSettings.toolsOrder = listOf("filters", "trim", "music")
editorSettings.theme.primaryColor = Color.parseColor("#FF6347")
// Personalize mais editorSettings aqui
}
[/code]

Como funciona sob o capô

Substituição de plano de fundo no SDK do Banuba Video Editor

O SDK do Banuba usa uma arquitetura de ponte JavaScript nativa:

• A camada nativa (Swift/Objective-C para iOS, Kotlin/Java para Android) lida com processamento de vídeo, efeitos e renderização em alta velocidade.

• A camada JavaScript fornece a interface do usuário e aciona eventos por meio da ponte React Native.

• Essa combinação oferece desempenho de nível nativo sem bloquear seu thread JS.

• Você mantém sua base de código limpa e orientada para o React Native e, ao mesmo tempo, obtém grande capacidade de processamento.

Por que usar o SDK de vídeo do Banuba para aplicativos React Native?

O SDK do Editor de Vídeo React Native do Banuba foi criado para simplificar o desenvolvimento e, ao mesmo tempo, oferecer uma experiência de usuário premium. Não importa se você está construindo uma plataforma de criação de conteúdo, um aplicativo de vídeo social ou qualquer recurso que envolva edição, o Banuba ajuda você a lançar mais rápido e de forma mais inteligente.

• Integração que economiza tempo para os desenvolvedores

O Banuba elimina o trabalho pesado da integração com o editor de vídeo. A interface do usuário já está lá, os documentos são claros e ele funciona bem com o React Native. Você economizará horas (talvez até dias) preparando as coisas para a produção.

• Processamento de vídeo de alto desempenho

Criado para velocidade e precisão, o SDK de vídeo do Banuba traz desempenho nativo para seu aplicativo React Native. Ele lida com edição em tempo real e áudio sincronizado sem falhas, garantindo uma experiência de alto nível - mesmo em dispositivos econômicos.

• Experiência de usuário aprimorada

Efeitos poderosos, design simples. O editor de vídeo React Native do Banuba combina filtros, planos de fundo virtuais, AR, controles responsivos e muito mais para vídeos com aparência profissional em apenas alguns toques.

Considerações finais

Se o seu aplicativo lida com vídeo e você está usando o React Native, adicionar um editor não é apenas algo que é bom ter. Está se tornando uma aposta de mesa.

Com o Video Editor SDK do Banuba, você não precisa se tornar um especialista em processamento de mídia. Basta conectar um editor bem projetado, rápido e rico em recursos e continuar a desenvolver o restante do seu aplicativo.

Dê uma olhada nele iniciando a avaliação gratuita do Video Editor SDK agora.

Recursos relacionados

• Explore o SDK do Banuba Video Editor
• Teste o aplicativo de demonstração do SDK do Banuba Video Editor
• Explore a amostra completa de integração do editor de vídeo React Native no GitHub
• Assista aos guias em vídeo para integração:
  • Vídeo de integraçãodo Android
  • Vídeo de integraçãocom iOS

Lista de referências

Adavelli, M. (2024, 2 de janeiro). Principais estatísticas de consumo de vídeo de 2025. TechJury - Tech Insights, Reports And Analysis. https://techjury.net/industry-analysis/video-consumption-statistics/#:~:text=91.8%25%20of%20all%20internet%20users%20watch%20online%20videos%20weekly.&text=In%20this%20digital%20age%2C%20everyone,to%20influencer%20videos%20to%20gaming.

Aulas, C. (2025, 13 de junho). 5 melhores bibliotecas de reprodutor de vídeo nativo React (2025). https://www.banuba.com/pt-br/blog/best-react-native-video-player-libraries

Background Subtraction with Deep Learning | Detection, Removal (Subtração de fundo com aprendizado profundo | Detecção, remoção). (n.d.). https://www.banuba.com/pt-br/technology/background-subtraction

Banuba. (2022a, 21 de junho). Como integrar o Banuba Video Editor SDK em um aplicativo Android [Vídeo]. YouTube. https://www.youtube.com/watch?v=xSMK3gCfRJY

Banuba. (2022b, 21 de junho). Como integrar o Banuba Video Editor SDK em um aplicativo iOS [Vídeo]. YouTube. https://www.youtube.com/watch?v=2FsEm_W01to

Banuba. (2022c, 18 de agosto). Como desenvolver um aplicativo móvel de editor de vídeo. https://www.banuba.com/blog/how-to-develop-a-mobile-video-editor-app

Portal da Comunidade Banuba. (n.d.). Portal da Comunidade Banuba. https://community.banuba.com/

Banuba Video Editor - Aplicativos no Google Play. (n.d.). https://play.google.com/store/apps/details?id=com.banuba.sdk.ve.demo&hl=en

Equipe, B. (s.d.-a). AI Video Editor SDK API para Android, IOS. https://www.banuba.com/pt-br/video-editor-sdk

SDK do editor de vídeo - Exemplos e guias. (2023, 22 de junho). Portal da Comunidade Banuba. https://community.banuba.com/t/video-editor-sdk-examples-and-guides/33

Whitney, M., & Whitney, M. (2021, 2 de dezembro). 6 maneiras de usar o vídeo para aumentar as taxas de conversão. WordStream. https://www.wordstream.com/blog/ws/2016/03/30/video-for-conversion-rate-optimization#:~:text=Remember%2C%20videos%20have%20been%20proven%20to%20increase%20conversion%20rates%20by%2080%.