Giter VIP home page Giter VIP logo

banuba / ve-sdk-react-native-cli-integration-sample Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 56.01 MB

Home Page: https://www.banuba.com/video-editor-sdk

JavaScript 15.19% Ruby 1.80% Starlark 0.51% Java 3.29% GLSL 40.59% Kotlin 19.92% Objective-C 1.42% Swift 17.29%
background-remover remove-background-video sdk video-crop video-editing video-editing-sdk video-editor video-manipulation video-sdk video-trimmer

ve-sdk-react-native-cli-integration-sample's Introduction

Banuba Video and Photo Editor SDK - React Native CLI integration sample

Overview

Video Editor SDK allows you to quickly add short video functionality and possibly AR filters and effects into your mobile app.
AR Photo Editor SDK allows you to quickly add the photo editing capabilities to your app.
The sample demonstrates how to integrate Video and Photo Editor SDK to React Native project.

Documentation

Usage

License

Before you commit to a license, you are free to test all the features of the SDK for free.
The trial period lasts 14 days. To start it, send us a message.
We will get back to you with the trial token.

Feel free to contact us if you have any questions.

Installation

  1. Complete React Native Environment setup and Running On Device
  2. Run npm install or yarn install in Terminal to install dependencies. Please check yarn --version and make sure you use the latest yarn version i.e.4.1.1 .

Launch

Set Banuba license token within the app.

Android

  1. Make sure variable ANDROID_SDK_ROOT is set in your environment or configure sdk.dir.
  2. Run npm run android in Terminal to launch the sample app on a device or launch the app in IDE i.e. Intellij, VC, etc.
  3. Follow Video Editor and Photo Editor quickstart guides to quickly integrate Video and Photo Editor SDK into your React Native project on Android.

iOS

  1. Install CocoaPods dependencies. Open ios directory and run in terminal pod install.
  2. Open Signing & Capabilities tab in Target settings and select your Development Team.
  3. Run npm run ios in Terminal to launch the sample on a device or launch the app in IDE i.e. XCode, Intellij, VC, etc.
  4. Follow Video Editor and Photo Editor quickstart guides to quickly integrate Video and Photo Editor SDK into your React Native project on iOS.

Dependencies

Version
Yarn 4.1.1
React Native 0.73.5
Android 6.0+
iOS 14.0+

ve-sdk-react-native-cli-integration-sample's People

Contributors

akarabach avatar glebpbanuba avatar glebpryshchepabanuba avatar heliocosta-dev avatar hermankhodyrevbanubatechsupport avatar sakandrei avatar sdk-banuba avatar ve-sdk-android avatar ve-sdk-ios avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

edicon

ve-sdk-react-native-cli-integration-sample's Issues

How to pass custom mp3 file path in VideoEditorModule.applyAudioTrack()

Need to modify applyAudioTrack function in VideoEditorModule.swift to working dynamic mp3 file path

// Applies audio track from custom audio browser
  @objc func applyAudioTrack(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    self.currentResolve = resolve
    self.currentReject = reject
    
    // Specify audio track URL. Video Editor SDK can apply tracks stored on the device.
    // In this sample we use audio file stored in the project.
    let audioURL = Bundle.main.url(forResource: "sample_audio", withExtension: "mp3")
    
    if (audioURL == nil) {
      let errMessage = "Failed to apply audio track. Unknow file"
      print(errMessage)
      self.currentReject!("", errMessage, nil)
      return
    }
    
    // Specify custom track name and additional data
    let trackName = "Track Name"
    let additionTitle = "Awesome artist"
    
    DispatchQueue.main.async {
      self.customAudioTrackUUID = UUID()
      let audioBrowserModule = self.getAudioBrowserModule()
      
      // Apply audio in Video Editor SDK
      audioBrowserModule.trackSelectionDelegate?.trackSelectionViewController(
        viewController: audioBrowserModule,
        didSelectFile: audioURL!,
        isEditable: true,
        title: trackName,
        additionalTitle: additionTitle,
        uuid: self.customAudioTrackUUID!
      )
      
      print("Audio track is applied")
      
      self.currentResolve!(nil)
    }
  }

so i can pass directly mp3 path from JS, something like this

return await VideoEditorModule.applyAudioTrack(
    "file:///Users/miteshkalal/Library/Developer/CoreSimulator/Devices/CAB59D05-4642-41F1-B9C1-C22D5892E263/data/Containers/Data/Application/5E7C48C9-83E9-42DB-9989-7669199AB6DC/Library/Caches/music.mp3"
  );

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.