Video Editing with Picsart Create Editor

Suggest Edits
<!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>

Updated 4 days ago