How to setup video editing

In this page we will see how Photo and Video Editor SDK can be setup for video editing. This requires the Configurable plan.

Before we go forward, let's quickly go over the differences between the basic and configurable plans.

The highlight is that the basic plan is designed for an easy start and simple photo editing experiences. In contrast, the configurable package allows for more advanced configuration options, in particular, you can set it up for video editing or print design and can control almost all features.

This page assumes you already checked out the video editing capabilities, as well as how to set up for the configurable plan.

Let's now get to configuring the editor for video editing use case.

Load the editor and set the access up

At this stage, the most important thing is to switch the mode to video.

const PicsartInstance = new Picsart({
      propertyId: 'yourdomainaddress.com', // example: 'picsart.com'
      containerId: 'videoEditorContainer',
      apiKey: 'Your API Key here',
      mode: 'video',
      video: true,
      logo: 'Your logo URL here',
      usePicsartInventory: true,
      videoURL: 'https://static.pexels.com/lib/videos/free-videos.mp4',
      ...
});

Note, you should provide the URL to the video file that should be edited. Use the parameter videoURL as shown above.

Control your features

Now that we have the editor's basic setup, let's also have a little extra control over what shows up on your screens.

const PicsartInstance = new Picsart({
      mode: 'video',
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
            'edit',
            'color',
            'gradient',
            'eraser',
            'duplicate',
            'adjust',
            'font',
            'border',
            'outline',
            'shadow',
            'flip_rotate',
            'position',
            'tool_removeBG',
            'animation',
            'trim'
          ],
      },
      ...
});

See the new tools animation and trim that are available in features>tools that are meant for videos only.

Control what to export, handle the result

Now, let's see how we can control what files should be exported. The full list of export formats can be found here and here we will show how to export in MP4.

const PicsartInstance = new Picsart({
      ...
      exportFormats: ['video/mp4'],
      ...
});

And there are options to choose from, what to expect, a blob, base64 or buffer (read more about all export types here).

const PicsartInstance = new Picsart({
      ...
      exportType: 'blob',
      ...
});

PicsartInstance.onExport((output) => {
      PicsartInstance.close();
debugger;
      getExportedVideoURL(output.data.videoData.taskId, apiKey);
    });

    // Example to pull video render
    const getExportedVideoURL = async (jobGuid, apiKey) => {
      ....
      // see the full implementation  below
    };
}

To learn more about additional configuration options for the print ready pdf setup see this document.

Step 5 - Two more little things

Almost there, let's also see how you should provide the list of shapes as well as hot to control the label on the next button.

PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });

PicsartInstance.provideLabels({
      nextButton: 'Export Video',
});

Summary

As we have gone through the whole setup process, let's see how the final HTML file should look like.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Your company name]</title>
</head>

<body>
  <style>
    body {
      padding: 100px;
      font-family: Helvetica, Arial, sans-serif;
    }

    .container {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      pointer-events: none;
    }

    iframe {
      border: none;
      border-radius: 4px;
      box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.4);
      border-radius: 4px;
    }
  </style>
  <div id="videoEditorContainer" class="container"></div>
  <script src="https://sdk.picsart.io/cdn?v=1.8&key=sdk"></script>
  <script>
    const downloadFile = (blob, fileName) => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      document.body.append(link);
      link.click();
      link.remove();
    };

    const PicsartInstance = new Picsart({
      propertyId: 'yourdomainaddress.com', // example: 'picsart.com'
      containerId: 'videoEditorContainer',
      apiKey: 'Your API Key Here',
      logo: 'Your Logo URL Here',
      videoURL: 'https://static.pexels.com/lib/videos/free-videos.mp4',
      usePicsartInventory: true,
      exportFormats: ['video/mp4'],
      exportType: 'blob',
      mode: 'video',
      video: true,
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
            'edit',
            'color',
            'gradient',
            'eraser',
            'duplicate',
            'adjust',
            'effects',
            'font',
            'border',
            'outline',
            'shadow',
            'flip_rotate',
            'position',
            'tool_removeBG',
            'animation',
            'trim'
          ],
          multiCanvasSupport: false,
      },
      textSettings: {
        fontsFolderView: true,
      },
      categories: {
        layout: {
          title: true,
        },
        photos: {
          thumbnailHeader: true,
        },
        text: {
          title: true,
        },
        uploads: {
          title: true,
          tabs: ['Images'],
        },
        elements: {
          smallTitle: true,
        },
        background: {
          header: true,
          tabs: ['Color', 'Upload', 'Library']
        },
      },
    });

    PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });
    PicsartInstance.provideLabels({
      nextButton: 'Export Video',
    });

    PicsartInstance.onExport((output) => {
      PicsartInstance.close();
debugger;
      getExportedVideoURL(output.data.videoData.taskId, apiKey);
    });

    // Example to pull video render
    const getExportedVideoURL = async (jobGuid, apiKey) => {
      const delay = (ms) =>
        new Promise((resolve) => {
          setTimeout(resolve, ms);
        });
      const fetchTask = (jobGuid, apiKey) => {
        const requestOptions = {
          headers: {
            'X-Picsart-API-Key': apiKey,
          },
        };
        return fetch(
          `https://video-api.picsart.io/v2/renders/jobs?guid=${jobGuid}`,
          requestOptions
        ).then((res) => {
          if (res.status > 199 && res.status < 300) {
            return res.json();
          }
          throw Error('Failed to fetch VideoSdkApi ');
        });
      };
      const getData = (data) =>
        data.jobs.find((item) => item.id === jobGuid);
      const getVideoURL = async (jobGuid, apiKey) => {
        try {
          const data = await fetchTask(jobGuid, apiKey);
          const { status, progress, result } = getData(data);
          console.log('status=', status);
          console.log('progress=', progress);
          if (!result) {
            await delay(3000);
            return await getVideoURL(jobGuid, apiKey);
          }
          window.open(result, '_blank');
          return;
        } catch (e) {
          console.log(
            '-----> error while fetching result video url <------',
            e
          );
        }
      };

      await getVideoURL(jobGuid, apiKey);
    };


    PicsartInstance.open({ 
      selectedTool: 'layout',
      title: 'Picsart Video Editor'
    });

  </script>
</body>

</html>

After all, you can simply save this code to your local drive and open the HTML file to get how things come together.

Should you have any issue or any question in regards to this setup process, we would be happy to hear your feedback. Don't hesitate to contact us.