Language:

Serialization of Video Segments

VideoEditor SDK for React Native supports serialization and deserialization of the individual video segments of a video composition, allowing your users to save and revise their work at any time.

Enable Serialization#

To use the serialization feature for video segments, you first need to enable this option within the configuration.

Process Serialization data#

Once the editor has exported the video successfully, the VideoEditorResult also contains the segments as well as the videoSize that you can further process. The segments represent all of the composition parts. In order to reuse the segments you need to save them in a persistent location. The videoSize embodies the size of the initial video and is needed to restore the state.

Once processed, you need to release the VideoEditorResult using the VideoEditorResult.release() function. This will remove the temporary resources.

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

File:

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

export const videoSegmentsSerializationExample = 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: {
      video: {
        segments: true,
      },
    },
  };

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

    if (result != null) {
      // The user exported a new video successfully and the newly generated video
      // is located at `result.video`, the segments are located at `result.segments`
      // and the size of the video is located at `result.videoSize`.
      console.log(result);

      // Once you have processed the serialized segments, you need to release the
      // result.
      if (result.release != null) {
        result.release();
      }
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};