Video Editing with Picsart Photo and Video Editor SDK

This section presents an insightful example of how to integrate the Picsart Photo and Video Editor SDK's video editing capabilities into your web application. The provided code snippet is a comprehensive guide, demonstrating the steps required to embed the editor and utilize its powerful video editing features.

Key aspects of the code example include:

SDK Integration: The code shows how to initialize the Picsart Photo and Video Editor SDK with essential configurations such as API key, container ID, and mode selection, focusing specifically on video editing.
Export Settings Configuration: It outlines the process of setting up export formats and parameters, including resolution and frame rate for the output video.
Feature Selection: The example includes a selection of editing tools and functionalities that can be enabled in the editor, like color adjustment, cropping, rotation, trimming, and more, providing users with a comprehensive editing experience.
Handling Exports and Errors: The onExport and onError methods are used to handle the video export process and manage any errors that might occur, ensuring a smooth user experience.
Fetching Rendered Video: A practical demonstration of how to retrieve the exported video using the jobGuid. The example includes a polling mechanism to check the status of the video rendering and fetch the final video once ready.
Customization Options: The script shows how to customize various aspects of the editor, such as theme, text settings, and categories, making it adaptable to different use cases and preferences.
Advanced Features: The code snippet also hints at advanced functionalities like subtitle management and audio layer editing, providing insights into the rich capabilities of the Picsart Photo and Video Editor SDK for video editing.

By examining this code example, you can gain a clear understanding of how to effectively embed and customize the Picsart Photo and Video Editor SDK for video editing purposes in their own web applications. The example serves as a blueprint for creating a versatile and user-friendly video editing tool.

<!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>Video Example</title>
  </head>

  <body>
    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        padding: 20px 20px 0;
        font-family: Helvetica, Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .container {
        background: #ededed;
        width: 100%;
        height: 80%;
        margin-top: 20px;
      }

      .button {
        cursor: pointer;
      }

      iframe {
        border: none;
      }
    </style>

    <!-- container needed for SDK to be added -->
    <div id="containerId" class="container"></div>

    <script src="https://sdk.picsart.io/cdn?v=X.Y.Z&key=sdk"></script>

    <script>
      // Example of how getting the parameters through an url param - no need to use this part
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const videoURL = urlParams.get('videoURL');
      const subtitleURL = urlParams.get('subtitleURL');

      // SDK integration
      const PicsartInstance = new Picsart({
        propertyId: '',
        containerId: 'containerId',
        apiKey: 'Your:_API_KEY',
        mode: 'video',
        exportFormats: ['video/mp4'],
        exportSettings: {
          'video/mp4': {
            fps: 30,
            resolution: '1080p',
          },
        },
        exportType: 'blob',
        theme: 'light',
        usePicsartInventory: true,
        features: {
          pulse: false,
          multiCanvasSupport: false,
          tools: [
            'edit',
            'color',
            'gradient',
            'font',
            'border',
            'outline',
            'shadow',
            'crop',
            'flip_rotate',
            'position',
            'trim',
            'animation',
          ],
        },
        textSettings: {
          fontsFolderView: true,
        },
        categories: {
          layout: {},
          uploads: {
            header: true,
            linkUpload: false,
          },
          background: {
            tabs: ['Color', 'Upload'],
          },
          text: {},
          elements: {},
          uploads: {
            header: true,
            tabs: ['Audio', 'Images'],
          },
          subTitles: {
              uploadDescription: false,
              linkUpload: false,
              uploadButtonLabel: 'Upload subtitle',
              burn: true,
          },
        },
      });

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

      PicsartInstance.onExport((output) => {
        console.log('JOBID:', output.videoData.taskId);
        PicsartInstance.close();
        getExportedVideoURL(output.videoData.taskId, apiKey);
      });

      PicsartInstance.onError((error) => {
        console.log('ERROR: ', error);
      });

      PicsartInstance.open({ videoURL, subtitleURL });

      // 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/v1/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);
      };
    </script>
  </body>
</html>