Deserialization

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

Loading a serialization#

To restore a previously saved state, we first need to retrieve the serialization. For this example, we have a local serialization file that should be used.

To open the editor with the selected serialization, you need to pass it to the VESDK.openEditor method as the serialization parameter.


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

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

  // Load the serialized settings from the app bundle. You could also load this from a remote URL for example.
  const serialization = require("../../../../assets/vesdk/video_serialization.json");

  try {
    // Open the video editor and handle the export as well as any occuring errors.
    // Pass the serialization to the editor as well.
    const result = await VESDK.openEditor(video, undefined, serialization);

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      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);
  }
};