Mobile Camera Configuration

import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_reaction_camera_solution = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY',
    userId: 'YOUR_USER_ID'
  };

  const result = await IMGLYCamera.openCamera(
    settings,
    require('MY_VIDEO_SOURCE')
  );
};

import IMGLYCameraModule

import IMGLYEditorModule
import SwiftUI


func useCustomEditor() {
  IMGLYEditorModuleSwiftAdapter.shared.builderClosure = { _, metadata in
    // Make decisions based on your own metadata.
    if metadata?["use_custom_editor"] as? Bool == true {
      // Return your custom editor.
      EditorBuilder.custom { settings, _, _, result in
        CustomEditor(settings: settings, result: result)
      }
    } else {
      // Return a custom or prebuilt editor.
      EditorBuilder.design()
    }
  }
}

func configureCamera() {
  IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in
    // Make decisions based on your own metadata.
    if metadata?["use_custom_camera"] as? Bool == true {
      // Return your custom camera.
      CameraBuilder.custom { settings, url, metadata, result in
        CustomCamera(settings: settings, url: url, metadata: metadata, result: result)
      }
    } else {
      // Return a custom or prebuilt camera.
      CameraBuilder.default()
    }
  }
}

private struct CustomEditor: View {
  init(settings _: EditorSettings, result _: @escaping EditorBuilder.EditorBuilderResult) {}

  var body: some View {
    Text("Custom Editor")
  }
}

private struct CustomCamera: View {
  init(
    settings _: CameraSettings,
    url _: URL?,
    metadata _: [String: Any]?,
    result _: @escaping CameraBuilder.CameraBuilderResult
  ) {}

  var body: some View {
    Text("Custom Camera")
  }
}

@file:Suppress("ktlint:standard:import-ordering")

package ly.img.editor.reactnative.showcases.guides

import androidx.compose.runtime.Composable
import ly.img.camera.core.CaptureVideo
import ly.img.camera.core.EngineConfiguration
import ly.img.camera.reactnative.module.IMGLYCameraModule
import ly.img.camera.reactnative.module.model.CameraResult
import ly.img.editor.reactnative.module.IMGLYEditorModule
import ly.img.editor.reactnative.module.builder.EditorBuilder
import ly.img.editor.reactnative.module.builder.EditorBuilderResult
import ly.img.editor.reactnative.module.model.EditorSettings

private fun useCustomEditor() {
    IMGLYEditorModule.builderClosure = { _, metadata ->
        if (metadata?.get("custom") == true) {
            EditorBuilder.custom {
                CustomEditor(settings, result, onClose)
            }
        } else {
            EditorBuilder.design()
        }
    }
}

private fun customizeCamera() {
    // Configure the [CaptureVideo.Input].
    IMGLYCameraModule.configurationClosure = { metadata ->
        val engineConfiguration = EngineConfiguration("MY_LICENSE")
        CaptureVideo.Input(engineConfiguration)
    }

    // Modify the [CameraResult].
    IMGLYCameraModule.resultClosure = { result ->
        CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE"))
    }
}

@Composable
private fun CustomEditor(
    settings: EditorSettings,
    result: EditorBuilderResult,
    onClose: (Throwable?) -> Unit,
) {}

The @imgly/camera-react-native React Native module is built on top of the native Android and iOS UI implementation and has no dedicated React Native UI. However, you still have access to the same customization options as for iOS and an interface for Android. To use them you need to configure them natively for both platforms. Further, the most important settings can be set from React Native directly.

React Native Customization

From within React Native directly, you can modify the most important camera behavior settings.

CameraSettings

All the basic configuration settings are part of the EngineSettings which are required to initialize the camera.

license – the license to activate the Engine with.
userID – an optional unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU). Especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once. Providing this aids in better data accuracy. The default value is nil.

const settings: CameraSettings = {
  license: 'YOUR_LICENSE_KEY',
  userId: 'YOUR_USER_ID'
};

Reactions

You can optionally provide a video parameter which lets the user react to that video.

const result = await IMGLYCamera.openCamera(
  settings,
  require('MY_VIDEO_SOURCE')
);

Native Customization

In order to fully utilize the natively available customizations, the module comes with native interfaces for both iOS and Android.

iOS

The customization layer for iOS is written in Swift and available via the IMGLYCameraModuleSwiftAdapter.shared instance. The camera that is opened via the IMGLYCameraModuleSwiftAdapter.openCamera() function can be completely customized and exchanged. For this to work you can use the IMGLYCameraModuleSwiftAdapter.builderClosure which provides optional metadata with which you can provide any prebuilt or custom camera view. The metadata parameter of the openCamera function can be utilized to provide customization details from the React Native side of your app to the native side:

You can either use the CameraBuilder.default implementation or in case you want a completely custom UI, you can use the CameraBuilder.custom function that allows you to return a custom View based on a given CameraSettings, URL, metadata and an CameraBuilderResult:

IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in
  // Make decisions based on your own metadata.
  if metadata?["use_custom_camera"] as? Bool == true {
    // Return your custom camera.
    CameraBuilder.custom { settings, url, metadata, result in
      CustomCamera(settings: settings, url: url, metadata: metadata, result: result)
    }
  } else {
    // Return a custom or prebuilt camera.
    CameraBuilder.default()
  }
}

Android

On Android, the module comes with two interfaces for modifications:

CameraInputClosure

The CameraInputClosure can be used to provide a custom CaptureVideo.Input based on given metadata. It is accessible via the IMGLYCameraModule.configurationClosure.

// Configure the [CaptureVideo.Input].
IMGLYCameraModule.configurationClosure = { metadata ->
    val engineConfiguration = EngineConfiguration("MY_LICENSE")
    CaptureVideo.Input(engineConfiguration)
}

CameraResultClosure

The CameraResultClosure can be used to return a custom CameraResult based on the result returned by the camera. It is accessible via the IMGLYCameraModule.resultClosure.

// Modify the [CameraResult].
IMGLYCameraModule.resultClosure = { result ->
    CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE"))
}

Full Code

Here’s the full code for all files.

configured_camera_solution.ts

import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';

export const recordings_reaction_camera_solution = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY',
    userId: 'YOUR_USER_ID',
  };

  const result = await IMGLYCamera.openCamera(
    settings,
    require('MY_VIDEO_SOURCE'),
  );
};

ConfigurationGuide.swift

IMGLYCameraModuleSwiftAdapter.shared.cameraBuilderClosure = { metadata in
  // Make decisions based on your own metadata.
  if metadata?["use_custom_camera"] as? Bool == true {
    // Return your custom camera.
    CameraBuilder.custom { settings, url, metadata, result in
      CustomCamera(settings: settings, url: url, metadata: metadata, result: result)
    }
  } else {
    // Return a custom or prebuilt camera.
    CameraBuilder.default()
  }
}

ConfigurationGuide.kt

// Configure the [CaptureVideo.Input].
IMGLYCameraModule.configurationClosure = { metadata ->
    val engineConfiguration = EngineConfiguration("MY_LICENSE")
    CaptureVideo.Input(engineConfiguration)
}

// Modify the [CameraResult].
IMGLYCameraModule.resultClosure = { result ->
    CameraResult(result?.recording, mapOf("MY_CUSTOM_KEY" to "MY_CUSTOM_VALUE"))
}