Serialization

VideoEditor SDK for React Native supports serialization and deserialization, allowing your users to save and revise their work at any time.

Enable Serialization#

To use the serialization feature, you first need to enable this option within the configuration. Furthermore, you can select the output format of the serialization. For this example, we are retrieving the serialization as an object. However, you can also change this to be a local file URI.

Process Serialization data#

Once the editor has exported the video successfully, the VideoEditorResult also contains a serialization that you can further process.

The next section explains how to restore the editor state by deserializing these settings.


import {
  Configuration,
  SerializationExportType,
  VESDK,
} from "react-native-videoeditorsdk";

export const videoSerializationExample = async (): Promise<void> => {
  // Add a video from the assets directory.
  const video = require("../../../../assets/vesdk/Skater.mp4");

  // Create a `Configuration` object.
  const configuration: Configuration = {
    export: {
      serialization: {
        // Enable the serialization feature.
        enabled: true,

        // For this example, the serialization should be returned
        // as an object to simply logging it in the console.
        exportType: SerializationExportType.OBJECT,
      },
    },
  };

  try {
    // Open the video editor and handle the export as well as any occuring errors.
    // highlight-open-editor
    const result = await VESDK.openEditor(video, configuration);
    // highlight-open-editor

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`
      // and the serialization is located at `result.serialization`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};