Could Someone Give me Advice with Integrating Shotstack API into My Application?

Shotstack API
1

Hello there, :wave:

I am working on a project where I need to integrate Shotstacks video editing capabilities into my application. While I have gone through the documentation, I’m still encountering a few challenges that I could really use some help with.

I am using the Shotstack API to automate video generation, and my app is built on a Node.js backend. The main issue I am facing is with understanding how to properly structure the request body when sending a video template with dynamic content. Specificall; I am trying to insert user uploaded images and text into a template, but I am not entirely sure how to reference the uploaded files within the API call.

What is the best way to dynamically insert user content into a predefined video template using Shotstack? :thinking:
How can I apply custom transitions or effects to specific segments of the video? :thinking:

Also, I have gone through this post; https://community.shotstack.io/t/how-to-optimize-video-rendering-workflows-using-shotstack-api-aws-devops which definitely helped me out a lot.

Are there any common pitfalls or best practices when integrating the Shotstack API into a Node.js environment that I should be aware of? :thinking:

Thank you in advance for your help and assistance. :innocent:

2

Hi @matthew ,

To dynamically insert user-uploaded images and text into a predefined video template using the Shotstack API, here’s how you can structure the request:

1. Uploading Files:

First, you need to upload the user’s images to a public storage service (like AWS S3, Google Cloud Storage, etc.) and obtain the URLs for those files.

2. Template Request Structure:

Once you have the image URLs, you can structure the request body to reference those images in your video template using [merge fields](https://shotstack.io/docs/guide/architecting-an-application/merging-data/). For text, you can directly insert dynamic text into the template.

Here’s an example of how to reference the uploaded files and text in the API call:

{
  "timeline": {
    "background": "#FFFFFF",
    "tracks": [
      {
        "clips": [
          {
            "length": "auto",
            "asset": {
              "type": "image",
              "src": "{{ USER_IMAGE_URL }}"
            },
            "start": 0,
            "effect": "zoomInSlow",
            "transition": {
              "out": "slideRight"
            }
          },
          {
            "length": "auto",
            "asset": {
              "type": "text",
              "text": "{{ USER_TEXT }}"
            },
            "start": 1,
            "effect": "fadeIn"
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "fps": 25,
    "size": {
      "width": 1080,
      "height": 1920
    },
    "thumbnail": {
      "capture": 1,
      "scale": 1
    }
  },
  "merge": [
    {
      "find": "USER_IMAGE_URL",
      "replace": "https://your-image-url.com/user-uploaded-image.png"
    },
    {
      "find": "USER_TEXT",
      "replace": "User's Dynamic Text Here"
    }
  ]
}

In your Node.js backend:

  • Replace the "src" URL with the actual URL of the user-uploaded image.
  • Replace "text" with the dynamic content provided by the user (e.g., a custom message or title).

You should populate these values with the actual data before sending the API request.

3. Custom Transitions and Effects for Specific Segments:

You can apply custom transitions and effects to individual segments of your video by modifying the clip properties within the timeline.

Here’s how to customize each clip with different effects and transitions.

  • Effect: You can apply various effects to a clip, such as zoom, fade, or rotation. For instance, using "effect": "zoomInSlow" creates a slow zoom-in effect on the image.

  • Transition: Transitions control how one clip moves in or out of the frame. For example, "transition": {"out": "slideRight"} means that when the clip ends, it will slide out to the right. You can also use in transitions like "slideLeft" or "fadeIn" for the clip entry.

Example:

Here’s an example of how to add custom transitions and effects to different segments:

"timeline": {
  "background": "#FFFFFF",
  "tracks": [
    {
      "clips": [
        {
          "length": "auto",
          "asset": {
            "type": "image",
            "src": "{{ IMAGE1 }}"
          },
          "start": 0,
          "effect": "zoomInSlow",   // Effect applied to the first clip (Zoom In)
          "transition": {
            "out": "slideRight"      // Slide transition when the clip exits
          }
        },
        {
          "length": "auto",
          "asset": {
            "type": "image",
            "src": "{{ IMAGE2 }}"
          },
          "start": 1,                // Start after the first clip
          "effect": "fadeIn",        // Fade-in effect for the second clip
          "transition": {
            "in": "fade"             // Fade transition when the clip enters
          }
        }
      ]
    }
  ]
}

{{ IMAGE1 }} has a "zoomInSlow" effect and will slide out to the right ("slideRight") when it ends.

{{ IMAGE2 }} will fade in at the start ("fadeIn") and use a "fade" transition as it enters the frame.

Tell me if you have any other questions.