Come costruire un editor video in React Native

[navigation]

TL;DR:

• React Native aiuta a velocizzare lo sviluppo fino al 30% per le app multipiattaforma;
• Un editor video già pronto fornisce la maggior parte o addirittura tutte le funzionalità di cui i vostri utenti hanno bisogno per creare contenuti;
• Banuba Video Editor SDK offre una facile integrazione, numerose funzioni di editing ed effetti;
• Per integrarlo, seguite la guida qui sotto.

Perché React Native

Negli ultimi anni, questa tecnologia è rimasta il framework più popolare per lo sviluppo di applicazioni mobili multipiattaforma.

Utilizza il popolare JavaScript e vanta un riutilizzo del codice fino al 95% tra Android, iOS e Web. Ciò significa che se costruite un editor video con React Native, il vostro lavoro diventerà più efficiente e il tempo di sviluppo totale diminuirà fino al 30% per un'applicazione multipiattaforma.

Inoltre, React Native funziona quasi alla stessa velocità delle tecnologie native e può integrare il codice nativo. Ciò significa che il software di elaborazione video React Native può essere una valida alternativa a quello realizzato con Swift, Java o Kotlin.

L'utilizzo di questo framework vi farà risparmiare molte settimane di lavoro e vi permetterà di andare sul mercato molto più velocemente. Per maggiori dettagli, consultate il nostro articolo: "Come sviluppare un'app per l'elaborazione video mobile".

Cosa rende utile un editor video nativo React?

I video di breve durata stanno dominando le app mobili. E non si tratta solo di intrattenimento: i video generano l'80% in più di conversioni nelle app per il commercio, l'apprendimento e il fitness.

Ma gli utenti non vogliono solo guardare i video. Vogliono invece crearli. È qui che l'aggiunta di un editor video React Native cambia le carte in tavola. Gli utenti hanno a disposizione gli strumenti per esprimere, condividere e personalizzare i video senza lasciare l'applicazione.

Naturalmente, costruire un editor video da zero è ambizioso. Tuttavia, tra l'elaborazione nativa dei video, le timeline dell'interfaccia utente e l'esportazione, le cose si complicano rapidamente.

Ecco perché molti sviluppatori si rivolgono alle librerie di editor video React Native. Queste librerie collegano il frontend React con moduli nativi che gestiscono il lavoro pesante, come la decodifica video, il rendering e gli effetti senza soluzione di continuità.

E non si tratta solo di potenza, ma anche di un'interfaccia utente dell'editor video React Native piacevole da usare. Cosa dovrebbe includere?

• Un editor di timeline drag-and-drop
• Un selezionatore di librerie multimediali integrato nel dispositivo
• Anteprime di filtri ed effetti AR
• Sovrapposizioni musicali e strumenti di ritaglio audio
• Anteprime in tempo reale e chiare opzioni di esportazione

Utilizzando un SDK video React Native di comprovata efficacia, la vostra applicazione potrà guidare il futuro invece di rimanerne indietro.

All'interno di Banuba React Native Video Editor SDK

"Abbiamo costruito questo SDK non solo per le prestazioni, ma anche per la creatività. Il nostro obiettivo era quello di dare agli sviluppatori React Native un set di strumenti che si sentisse senza sforzo e che permettesse agli utenti di modificare senza limiti" - Elena K., Senior Product Engineer di Banuba

Più che un kit di base, Banuba Video Editor SDK offre una suite completa di funzionalità ottimizzate per le prestazioni. È una soluzione robusta per integrare l'editing video avanzato in qualsiasi app React Native.

Ecco cosa distingue questo SDK per editor video React Native:

• Una timeline che sembra nativa.

  La timeline di Banuba offre agli utenti un controllo creativo totale. Nessun ritardo, nessuna frustrazione: solo editing senza interruzioni su Android e iOS.

• Potente elaborazione video e audio.

  Banuba Video Editor SDK si occupa delle cose più difficili: rendering in tempo reale, codifica veloce e sincronizzazione audio perfetta. In questo modo, gli utenti possono concentrarsi sulla creazione invece di aspettare all'infinito il risultato finale.

• Filtri, effetti e sovrapposizioni.

  Banuba React Native SDK equipaggia la vostra applicazione con effetti visivi ad alte prestazioni, da filtri e transizioni a strumenti AR e di abbellimento. Tutti gli effetti vengono renderizzati in tempo reale e rispondono istantaneamente, mantenendo il processo di editing veloce e fluido. Inoltre, l'aggiunta e la messa a punto sono semplici grazie al loro design e alla documentazione completa.

• Supporto multipiattaforma.

  Costruito una volta, funziona sia su iOS che su Android. L'SDK video React Native utilizza un livello di integrazione condiviso per mantenere la vostra codebase ordinata e i vostri utenti felici su qualsiasi dispositivo.

• Facile integrazione in qualsiasi app React Native.

  L'SDK di Banuba è stato progettato pensando agli sviluppatori. Banuba offre documentazione, interfaccia utente precostituita e supporto per React Native.
• Ilcostodella licenza dipende dal numero di utenti attivi mensili, dall'esatto set di funzionalità e dal numero di piattaforme supportate. Di conseguenza, anche un'azienda di medie dimensioni può permetterselo.
• Dimensioni ridotte:quando è integrato, Banuba Video Editor SDK aggiunge solo circa 30 Mb alla dimensione del download dell'app.

Volete vederlo in azione?

Provate l'applicazione demo su Google Play e scoprite cosa può fare Banuba Video Editor SDK.

Come aggiungerlo alla vostra applicazione React Native?

Andiamo sul pratico. Se siete come la maggior parte degli sviluppatori, non volete una guida in 10 passi. Volete qualcosa che funzioni rapidamente.

Ecco la versione breve:

Passo 1. Ottenete il vostro token di prova Banuba

Per iniziare la prova gratuita dell'SDK e ottenere tutti i vantaggi dell'elaborazione video React Native per la vostra applicazione, iniziate con l'ottenere un token di prova unico. Offre una prova gratuita di 14 giorni con funzionalità SDK illimitate.

Passo 2. Installare l'SDK Banuba React Native

Si tratta di aggiungere il pacchetto Banuba al progetto React Native.

2.1.Verificare le dipendenze:

Il vostro progetto sta eseguendo le versioni giuste? Assicurarsi che tutto sia allineato ora farà risparmiare tempo in seguito.

• Yarn: 3.6.1 o superiore (o npm equivalente)
• React Native: 0.74.2 o superiore
• Android: Livello API 23 (Android 6.0) o superiore
• iOS: iOS 14.0 o versione successiva

È possibile verificare la versione di React Native nel filepackage.json. Aggiornare se necessario.

2.2. Installare il pacchetto:

Andate nella cartella principale del vostro progetto nel terminale, quindi provate uno di questi comandi:

Utilizzando npm:

[code]
Bash

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

Utilizzando Yarn:

[code]
Bash

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

2.3. Installare i Pod (specifici per iOS):

Dopo aver installato il pacchetto npm/yarn, è necessario installare le dipendenze native di iOS (CocoaPods).

[code]
Bash

cd ios
pod install
cd ... # Tornare alla root del progetto
[/codice]

Avete problemi con l'installazione di pod? Eseguire pod deintegrate e poi pod install di nuovo. Inoltre, controllate che il vostro Podfile includa tutte le voci necessarie: lo script di installazione di Panuba si occupa tipicamente di questo aspetto per le versioni recenti di React Native.

Passo 3: Impostazione delle dipendenze native (configurazione del progetto)

Questa è spesso la parte più critica e specifica della piattaforma. L'SDK di solito contiene codice nativo che deve essere collegato e configurato correttamente. Le versioni moderne di React Native (0.60+) utilizzano l'autolinking, che semplifica questa operazione, ma alcuni passaggi manuali potrebbero essere ancora richiesti da Banuba.

3.1. Configurazione di Android:

1. android/build.gradle (a livello di progetto):

Potrebbe essere necessario aggiungere il repository Maven di Banuba.

[code]
Gradle

allprojects {
repositories {
google()
mavenCentral()
// Aggiungere il repository Maven di Banuba, se specificato nella documentazione
// Per esempio:
maven { url 'https://artifactory.banuba.com/artifactory/banuba-maven-release/' }
}
[/code]

android/app/build.gradle (livello app):

Versione minima SDK: Assicurarsi che la propria minSdkVersion corrisponda ai requisiti di Banuba (ad esempio, minSdkVersion 23).

Compatibilità con Java 8:

[code]

Gradle

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

Opzioni di pacchettizzazione: A volte, gli SDK di grandi dimensioni richiedono specifiche opzioni di impacchettamento.

[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]

Permessi: È probabile che siano necessari i permessi per la fotocamera, il microfono e l'archiviazione in AndroidManifest.xml. Anche se l'SDK potrebbe richiederli in fase di esecuzione, dichiararli è una buona pratica.

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" />
<applicazione
android:requestLegacyExternalStorage="true" >
</application>
</manifest>
[/code]

3.2. Configurazione di iOS:

• ios/Podfile:

• Assicurarsi che la piattaforma :ios, '14.0' (o superiore) sia impostata.
• Banuba potrebbe richiedere specifici ganci o flag post-installazione, verificare la documentazione.

1. Info.plist: È necessario aggiungere le descrizioni della privacy per l'accesso alla fotocamera, al microfono e alla libreria fotografica.

XML

[code]
<key>NSCameraUsageDescription</key>
<stringa>Questa applicazione ha bisogno di accedere alla fotocamera per catturare i video.</string>
<key>NSMicrophoneUsageDescription</key>
<stringa>Questa applicazione ha bisogno di accedere al microfono per registrare l'audio dei video.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Questa applicazione deve accedere alla libreria fotografica per selezionare e salvare i video.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Questa applicazione deve salvare i video modificati nella libreria fotografica.</string>
[/code]

Impostazioni del progetto Xcode:

• Impostazioni di compilazione: A volte sono necessariHEADER_SEARCH_PATHS o FRAMEWORK_SEARCH_PATHS specifici .
• Capacità: Assicurarsi che siano abilitate funzionalità necessarie come "Modalità di sfondo" (se l'elaborazione video avviene in background), anche se è meno comune per un semplice editor.

Passo 4: aggiungere il componente React dell'editor video alla propria applicazione

Qui si integra l'SDK di Banuba nel codice JavaScript di React Native.

4.1. Inizializzare l'SDK: L'SDK di Banuba deve essere inizializzato con il token, di solito una volta all'avvio dell'applicazione o quando il componente che utilizza l'editor viene montato.

[code]
JavaScript

// App.js o un BanubaService.js dedicato

import { Platform, Alert } from 'react-native';
// Questo percorso di importazione è illustrativo. Controllare i documenti di Banuba per il percorso esatto.
import BanubaVideoEditor from 'react-native-banuba-sdk';

// IMPORTANTE: sostituire con il proprio Token Banuba!
const BANUBA_CLIENT_TOKEN = "YOUR_UNIQUE_BANUBA_TRIAL_TOKEN";
export const initializeBanubaSDK = async () => {
try {
// Questo è un segnaposto per il metodo di inizializzazione specifico di Banuba.
// Potrebbe restituire un booleano che indica il successo.
const isInitialized = await BanubaVideoEditor.initialize(BANUBA_CLIENT_TOKEN);
if (isInitialized) {
console.log("Banuba SDK inizializzato con successo!");
return true;
} else {
console.error("Banuba SDK non è riuscito a inizializzarsi.");
Alert.alert("Initialization Failed", "Could not initialize video editor. Please check your token.");
return false;
}
} catch (error) {
console.error("Errore durante l'inizializzazione di Banuba SDK:", error);
Alert.alert("Errore", "Si è verificato un errore durante la configurazione dell'editor video.");
return false;
}
};
// Si potrebbe anche avere una funzione di deinizializzazione per la pulizia
export const deinitializeBanubaSDK = async () => { try { awaitBanuba SDK = async () {
try {
await BanubaVideoEditor.deinitialize(); // Metodo segnaposto
console.log("Banuba SDK deinitializzato.");
} catch (error) {
console.error("Error deinitializing Banuba SDK:", error);
}
};
[/code]

4.2. Creare un componente per lanciare l'editor: Questo componente gestirà la logica di apertura dell'SDK Banuba video editor e l'elaborazione dei risultati.

[code]
JavaScript

// screens/VideoEditorScreen.js (o qualsiasi componente in cui si voglia l'editor)

import React, { useState, useEffect } from 'react';
import { View, Button, Text, ActivityIndicator, Alert } from 'react-native';
import { initializeBanubaSDK, deinitializeBanubaSDK } from '../services/BanubaService'; // Supponendo di inserire la logica di init qui
// Ancora una volta, importazione segnaposto.
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 () => {
// Deinizializza l'SDK quando il componente si smonta, se necessario
// deinitializeBanubaSDK();
};
}, []);

const openBanubaEditor = async () => {
if (!sdkReady) {
Alert.alert("Editor Not Ready", "Please wait while the video editor initializes.");
return;
}
try {
setLoading(true);
// Questa è la chiamata principale per aprire l'interfaccia Banuba Video Editor.
// L'oggetto options è fondamentale per la personalizzazione (video iniziale, funzioni abilitate).
// Consultare la documentazione di Banuba per tutte le opzioni disponibili.
const result = await BanubaVideoEditor.openVideoEditor({
// Opzioni di esempio:
// entryPoint: 'camera', // 'camera' o 'gallery' o 'editor' (se si apre un video esistente)
// initialVideoUri: 'file:///path/to/my/video.mp4', // Per modificare un video esistente
// enableGallery: true,
// enableCamera: true,
// enableMusicEditor: true,
// enableFilterEditor: true,
// exportQuality: 'high',
// audioVolume: 0.8,
// watermarkEnabled: false, // se la licenza lo permette
// ... molte altre opzioni di personalizzazione
});
se (result && result.exportedVideoUri) {
console.log("Video modificato con successo! Percorso:", result.exportedVideoUri);
setEditingResult(`Video modificato salvato in: ${result.exportedVideoUri}`);
Alert.alert("Success", "Il video è stato modificato e salvato!");
// Ora è possibile caricare il video, visualizzarlo, ecc.
} else if (result && result.cancelled) {
console.log("La modifica del video è stata annullata.");
setEditingResult("Modifica del video annullata dall'utente");
} else {
console.warn("L'editor video è stato chiuso senza un risultato specifico.");
setEditingResult("La sessione dell'editor video è terminata.");
}
} catch (error) {
console.error("Impossibile aprire Banuba Video Editor:", error);
Alert.alert("Errore", "Impossibile aprire l'editor video.");
} finally {
setLoading(false);
}
};

if (loading) {
return (
<View style=>
<ActivityIndicator size="large" color="#0000ff" />
<Text style=>{sdkReady ? "Avvio dell'editor..." : "Inizializzazione di Banuba SDK..."}</Text>
</View>
);
}
return (
<View style=>
<Text style=>
Integrare Banuba Video Editor
</Text>
{sdkReady ? (
<Button
title="Open Video Editor"
onPress={openBanubaEditor}
disabled={loading}
/>
) : (
<Text style=>
SDK non pronto. Verificare la presenza di errori nel token e nella console.
</Text>
)}

{editingResult && (
<View style=>
<Text style=>Last Editor Result:</Text>
<Text style=>{editingResult}</Text>
{/* Si può aggiungere qui un componente <Video> per riprodurre il file modificato */}
{/* Esempio: <Video source= style= /> */}
</View>
)}
</View
);
};
export default VideoEditorScreen;
[/code]

Passo 5: Eseguire l'applicazione

Dopo tutti questi passaggi, ricostruire l'applicazione per assicurarsi che tutti i moduli nativi siano collegati correttamente.

[code]

Bash

# Pulire le cache (buona pratica)
npm start -- --reset-cache # o yarn start -- --reset-cache
cd ios && pod install && cd .. # Rieseguire pod install se si è cambiato Podfile
npx react-native run-android
npx react-native run-ios
[/code]

Seguite questi passaggi ed esplorate le risorse ufficiali di Banuba per integrare facilmente l'SDK dell'editor video nel vostro progetto React Native. E se non sei ancora sicuro di qualcosa, rivolgiti al portale degli sviluppatori per metterti in contatto con il nostro team di supporto o con altri sviluppatori. Inoltre, qui potete trovare alcuni esempi e guide sull'SDK dell'editor video.

Esempio concettuale di editor video React Native: Un semplice editor video con l'SDK Banuba

Immaginate un'applicazione React Native in cui gli utenti possano girare video divertenti o prenderne uno dal telefono, aggiungere filtri interessanti, tagliare le parti che non vogliono e poi salvare o condividere il video finito.

Nome dell'applicazione: "MySimpleVid

Caratteristiche principali:

1. Selezione/registrazione di video: Consente agli utenti di scegliere i video esistenti o di registrarne di nuovi.
2. Modifica di base della timeline: Ritagliare i punti di inizio e fine del video.
3. Effetti/filtri: Applicare un filtro visivo al video.
4. Elaborazione ed esportazione del video: Salvare il video modificato.

Tecnologie:

• React Native

Banuba Video Editor SDK

Flusso utente e coinvolgimento dell'SDK Banuba

Fase 1: lancio dell'editor e selezione iniziale dei video

Azione dell'utente:

L'utente tocca il pulsante "Modifica video" nella schermata principale dell'applicazione React Native.

Comportamento dell'app (React Native):

• L'applicazione controlla se l'SDK Banuba è inizializzato (stato sdkReady).

• Se è pronto, chiama BanubaVideoEditor.openVideoEditor() con i parametri appropriati.

Opzioni dell'SDK Banuba:

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

Risposta dell'interfaccia utente SDK:

• Se entryPoint: 'gallery', si apre un selettore multimediale.
• Se entryPoint: 'camera', viene avviata la fotocamera in-app per la registrazione.

Risultato:

L'editor supporta sia la selezione dei media dal dispositivo sia la cattura di video in tempo reale tramite il modulo della fotocamera integrata.

Fase 2: Interfaccia per la timeline e il trimming

Azione dell'utente:

Dopo aver scelto o registrato un video, l'editor passa alla visualizzazione della timeline.

Banuba Editor UI:

• In alto: lettore di anteprima video.
• In basso: Timeline interattiva con maniglie di inizio e fine trascinabili.

Interazioni con l'utente:

• Regolare i punti di taglio trascinando le maniglie.
• L'anteprima del video si aggiorna in tempo reale per riflettere le modifiche.

Funzionalità SDK (sotto il cofano):

• Il trimming in tempo reale è gestito dal motore video nativo di Banuba.
• I fotogrammi vengono restituiti dinamicamente in base ai punti di taglio per una riproduzione fluida e senza ritardi.

Fase 3: Applicazione di filtri ed effetti

Azione dell'utente:

L'utente tocca l'icona "Filtri" o "Effetti".

Banuba Editor UI:

• Appare uno scorrimento orizzontale o una griglia di miniature degli effetti.
• Toccando un effetto lo si applica immediatamente all'anteprima.

Caratteristiche:

• Rendering degli effetti in tempo reale.
• Filtri suddivisi per categorie: ad esempio, Colore, Artistico, Maschere AR.
• I filtri AR utilizzano il tracciamento dei volti e la sovrapposizione di risorse 3D/2D grazie alla computer vision.

Ruolo dell'SDK:

• Applica i filtri fotogramma per fotogramma in tempo reale.
• Integra gli effetti con porzioni di video tagliate.

Fase 4: Esportazione del video finale

Azione dell'utente:

Una volta terminato l'editing, l'utente tocca "Fine" o "Esporta".

Banuba SDK UI:

• Un indicatore di progresso appare mentre il video viene elaborato.

Attività di elaborazione SDK:

• Codifica: Converte le modifiche in un video finale (ad esempio, MP4).
• Unisci modifiche: Applica ritagli, effetti e filtri in modo permanente.
• Sincronizzazione audio: Mantiene l'audio allineato con il contenuto del video.
• Ottimizzazione: Utilizza l'accelerazione hardware, se disponibile.

Risultato:

• L'SDK restituisce il controllo a React Native.
• Il risultato restituito include il percorso video finale (ad esempio, exportedVideoUri).

Logica dell'applicazione (React Native):

• Usa l'URI per:
  • Caricare su un backend/server.
  • Mostrare in un player personalizzato.
  • Salvare in una galleria (utilizzando moduli come react-native-fs o react-native-camera-roll).
  • Navigare verso una schermata di condivisione.

Integrazione

CLI (React Native)

La configurazione dell'SDK di Banuba in un'applicazione React Native è rapida e semplice:

Installare l'SDK:

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

2. Per iOS, installare CocoaPods:

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

3. Aggiornare le impostazioni del progetto nativo:

Android: Aggiungere i permessi richiesti e i dettagli dell'SDK a build.gradle

iOS: Aggiornare Info.plist con i permessi e impostare la versione minima della piattaforma

Per tutti i dettagli, controllare i requisiti di Banuba e il repo GitHub.

Integrazione di Expo

Usare Expo con il flusso di lavoro nudo? L'SDK di Banuba è a portata di mano.

1. Installazione tramite Expo CLI:

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

2. Utilizzare il plugin Banuba Expo Config aggiungendolo al file app.json o app.config.js:

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

3. Aggiungere le autorizzazioni necessarie:

[code]
{
"expo": {
"android": {
"permessi": [
"CAMERA",
"RECORD_AUDIO",
"READ_EXTERNAL_STORAGE",
"SCRIVERE_IMMAGAZZINAMENTO_ESTERNO"
]
},
"ios": {
"infoPlist": {
"NSCameraUsageDescription": "Questa applicazione ha bisogno di accedere alla fotocamera per catturare video",
"NSMicrophoneUsageDescription": "Questa applicazione deve avere accesso al microfono per registrare l'audio",
"NSPhotoLibraryUsageDescription": "Questa applicazione deve accedere alla libreria fotografica per selezionare e salvare i video",
"NSPhotoLibraryAddUsageDescription": "Questa applicazione deve salvare i video modificati nella libreria fotografica".
}
}
}
}
[/codice]

4. Ricostruire l'applicazione:

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

Configurazione e personalizzazione

Banuba SDK consente di personalizzare completamente il layout degli strumenti, il tema e le caratteristiche dell'editor utilizzando un semplice oggetto di configurazione.

Esempio: Configurazione degli strumenti e del tema della barra degli strumenti (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('Video saved at:', result.exportedVideoUri);
}
})
.catch(console.error);
[/code]

Modifica dell'ordine degli strumenti e abilitazione/disabilitazione delle funzioni

[code]
const config = {
toolsOrder: ['filters', 'trim', 'music'], // riordina i pulsanti della barra degli strumenti
enableTextOverlay: false, // nasconde lo strumento testo
enableARMasks: true, // abilita le maschere AR
};
[/code]

Filtri

Banuba include anteprime dei filtri in tempo reale e filtri AR. È possibile personalizzare i set di filtri che appaiono.

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

Sovrapposizioni

Aggiungete immagini in sovrimpressione o adesivi che gli utenti possono inserire nei video.

[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]

Annotazioni

Supporto per il disegno a mano libera, gli adesivi e le annotazioni di testo.

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

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

Interfaccia nativa Bridge

Avete bisogno di una personalizzazione più profonda a livello nativo? Banuba espone interfacce native su entrambe le piattaforme.

iOS (Objective-C)

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

Android (Kotlin)

[code]
RNVideoEditorModule.editorWillOpenClosure = { editorSettings ->

editorSettings.toolsOrder = listOf("filters", "trim", "music")
editorSettings.theme.primaryColor = Color.parseColor("#FF6347")
// Personalizza altre editorSettings qui
}
[/code]

Come funziona sotto il cofano

Sostituzione dello sfondo in Banuba Video Editor SDK

L'SDK di Banuba utilizza un'architettura a ponte nativo-JavaScript:

• Il livello nativo (Swift/Objective-C per iOS, Kotlin/Java per Android) gestisce l'elaborazione video, gli effetti e il rendering ad alta velocità.

• Il livello JavaScript fornisce l'interfaccia utente e attiva gli eventi tramite il bridge React Native.

• Questa combinazione offre prestazioni di livello nativo senza bloccare il thread JS.

• In questo modo si mantiene una base di codice pulita e orientata a React Native, pur ottenendo una notevole potenza di elaborazione.

Perché usare l'SDK video di Banuba per le applicazioni React Native?

L'SDK React Native Video Editor di Banuba è costruito per semplificare lo sviluppo e offrire un'esperienza utente di alto livello. Sia che stiate costruendo una piattaforma di creazione di contenuti, un'app di social video o qualsiasi altra funzione che coinvolga l'editing, Banuba vi aiuta a lanciarla più velocemente e in modo più intelligente.

• Integrazione che fa risparmiare tempo agli sviluppatori

Banuba elimina il lavoro di integrazione degli editor video. L'interfaccia utente è già presente, la documentazione è chiara e si integra perfettamente con React Native. Si risparmiano ore (forse anche giorni) per rendere le cose pronte per la produzione.

• Elaborazione video ad alte prestazioni

Costruito per la velocità e la precisione, l'SDK video di Banuba offre prestazioni native alla vostra applicazione React Native. Gestisce l'editing in tempo reale e l'audio sincronizzato in modo impeccabile, garantendo un'esperienza di alto livello, anche su dispositivi economici.

• Esperienza utente migliorata

Effetti potenti, design semplice. L'editor video React Native di Banuba combina filtri, sfondi virtuali, AR, controlli reattivi e altro ancora per video dall'aspetto professionale in pochi tap.

Pensieri finali

Se la vostra applicazione ha a che fare con i video e state usando React Native, l'aggiunta di un editor non è solo un "nice-to-have". Sta diventando una priorità.

Con il Video Editor SDK di Banuba, non è necessario diventare un esperto di elaborazione dei media. Basta inserire un editor ben progettato, veloce e ricco di funzionalità e continuare a costruire il resto dell'applicazione.

Provate il Video Editor SDK e iniziate subito la prova gratuita.

Risorse correlate

• Esplora l'SDK Banuba Video Editor
• Prova l'applicazione demo dell'SDK Banuba Video Editor
• Esplora il campione completo di integrazione dell'editor video React Native su GitHub
• Guarda le guide video per l'integrazione:
  • Video integrazioneAndroid
  • Video integrazioneiOS

Elenco di riferimento

Adavelli, M. (2024, 2 gennaio). Statistiche sul consumo di video nel 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 giugno). Le 5 migliori librerie di lettori video nativi React (2025) . https://www.banuba.com/it/blog/best-react-native-video-player-libraries

Sottrazione dello sfondo con Deep Learning - Rilevamento, rimozione. (n.d.). https://www.banuba.com/it/technology/background-subtraction

Banuba. (2022a, 21 giugno). Come integrare Banuba Video Editor SDK in un'applicazione Android [Video]. YouTube. https://www.youtube.com/watch?v=xSMK3gCfRJY

Banuba. (2022b, 21 giugno). Come integrare Banuba Video Editor SDK in un'applicazione iOS [Video]. YouTube. https://www.youtube.com/watch?v=2FsEm_W01to

Banuba. (2022c, 18 agosto). Come sviluppare un'applicazione di video editor mobile. https://www.banuba.com/blog/how-to-develop-a-mobile-video-editor-app

Portale della comunità Banuba. (n.d.). Portale della comunità Banuba. https://community.banuba.com/

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

Team, B. (n.d.-a). AI Video Editor SDK API per Android, IOS. https://www.banuba.com/it/video-editor-sdk

Video Editor SDK - Esempi e guide. (2023, 22 giugno). Portale della comunità Banuba. https://community.banuba.com/t/video-editor-sdk-examples-and-guides/33

Whitney, M., & Whitney, M. (2021, 2 dicembre). 6 modi per utilizzare i video per aumentare i tassi di conversione. 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%.