Deserialization of Video Segments

VideoEditor SDK for React Native supports serialization and deserialization of the video composition segments, 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 previously saved video segments as well as the video size. For this example, we are using hardcoded placeholder values.

To open the editor with the selected segments and videoSize, you need to pass it to the VESDK.openEditor method as the video and videoSize parameters.


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

export const videoSegmentsDeserializationExample = async (): Promise<void> => {
  // Load the serialized segments and the serialized video size.
  const segments: VideoSegment[] = [
    {
      videoURI: require("../../../../assets/vesdk/Skater.mp4"),
      startTime: 1.5,
      endTime: 4,
    },
    {
      videoURI: require("../../../../assets/vesdk/rollerskates.mp4"),
      startTime: 0.5,
      endTime: 1.5,
    },
  ];

  const videoSize = {
    height: 450,
    width: 450,
  };

  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(segments, undefined, undefined, videoSize);

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