Forem: Shotstack

How to build an MP4 to GIF converter using Python + Shotstack API

Kushal Magar — Mon, 14 Nov 2022 00:12:19 +0000

Animated GIFs are a fun way to convert videos into a lightweight, short visual media. Often used for memes and humor, GIFs have become a popular method of communication and cultural expression.

This guide will teach you to programmatically convert MP4 to GIF using Python and build a media conversion app.

The Shotstack API and SDK

Shotstack provides a cloud-based video editing API. Rendering video is resource intensive and it can take hours to edit and generate videos at scale. Shotstack's infrastructure makes it possible to concurrently render multiple media files like video, audio, and GIFs in minutes.

You can sign up for a free developer account to get your API key.

Install and configure the Shotstack SDK

If you want to skip ahead you can find the source code for this guide in our GitHub repository. Otherwise, follow the steps below to install dependencies and set up your API key.

First of all, install the Shotstack Python SDK from the command line:

pip install shotstack_sdk

You may need to use pip3 depending on how your environment is configured.

Then, set your API key as an environment variable (Linux/Mac):

export SHOTSTACK_KEY=your_key_here

or, if using Windows (make sure to add the SHOTSTACK_KEY to the path):

set SHOTSTACK_KEY=your_key_here

Replace your_key_here with your provided sandbox API key which is free for testing and development.

Create a Python script to convert MP4 to GIF

Create a file for the script in your favorite IDE or text editor. You can call it whatever you like, but for this tutorial, we created a file called mp4-to-gif.py. Open the file and begin editing.

Import the required modules

Let's import the required modules for the project. We need to import modules from the Shotstack SDK to edit and render our video plus a couple of built-in modules:

import shotstack_sdk as shotstack
import os
import sys

from shotstack_sdk.api import edit_api
from shotstack_sdk.model.clip import Clip
from shotstack_sdk.model.track import Track
from shotstack_sdk.model.timeline import Timeline
from shotstack_sdk.model.output import Output
from shotstack_sdk.model.edit import Edit
from shotstack_sdk.model.video_asset import VideoAsset

Configuring the API client

Next, add the following, which sets up the API client with the API URL and key, this should use the API key added to
your environment variables. If you want, you can hard code the API key here but we recommend environment variables.

host = "https://api.shotstack.io/stage"
configuration = shotstack.Configuration(host = host)
configuration.api_key['DeveloperKey'] = os.getenv('SHOTSTACK_KEY')

with shotstack.ApiClient(configuration) as api_client:
    api_instance = edit_api.EditApi(api_client)

Setting up the video clip

We will convert the following Christian Bale American Psycho meme video hosted on Imgflip at the URL https://i.imgflip.com/66o1m8.mp4. The video needs to be hosted online and accessible via a public or signed URL. You can replace it with your own video URL from any online source.

Add the following code to create a VideoAsset using the video URL:

video_asset = VideoAsset(
    src = "https://i.imgflip.com/66o1m8.mp4"
)

Next, create a Clip. A clip is container for different types of
assets, including the VideoAsset. We can configure different properties
like length (duration to play for) and start time (when on the timeline the clip will play from). For our clip we use
the video_asset we just created, a start of 0 seconds and a length of 3 seconds:

video_clip = Clip(
    asset = video_asset,
    start = 0.0,
    length = 3.0
)

Adding the video clip to the timeline

The Shotstack API follows many of the principles of desktop editing software such as a timeline and tracks. Let's create a timeline, which contains a track, and the track will contain our video clip. Tracks on the timeline allow us to layer clips on each other.

Below we add our video_clip to the Track clips array, and then add our track to the array of tracks of the Timeline:

track = Track(clips=[video_clip])

timeline = Timeline(
    background = "#000000",
    tracks = [track]
)

Configuring the final edit and output

We need to configure the output format and add the timeline and output to create an edit.

We set the output format to gif, which will convert the file from the mp4 format to an animated gif. By selecting repeat to True the gif will loop continuously. We also use a very low frames per second (fps) value and low resolution. These settings help us optimize the file size and rendering time of the gif.

output = Output(
    format = "gif",
    fps = 12.0,
    resolution = "preview",
    repeat = True
)

edit = Edit(
    timeline = timeline,
    output = output
)

Sending the edit for rendering via the API

Finally, we send the edit for processing and rendering using the API. The Shotstack SDK takes care of converting our objects to JSON, adding our key to the request header, and POSTing everything to the API.

try:
    api_response = api_instance.post_render(edit)

    message = api_response['response']['message']
    id = api_response['response']['id']

    print(f"{message}\n")
    print(f">> render id: {id}")
except Exception as e:
    print(f"Unable to resolve API call: {e}")

Final code

The final script is below with a few additional checks and balances:

import shotstack_sdk as shotstack
import os
import sys

from shotstack_sdk.api               import edit_api
from shotstack_sdk.model.clip        import Clip
from shotstack_sdk.model.track       import Track
from shotstack_sdk.model.timeline    import Timeline
from shotstack_sdk.model.output      import Output
from shotstack_sdk.model.edit        import Edit
from shotstack_sdk.model.video_asset import VideoAsset
from shotstack_sdk.model.shotstack_destination import ShotstackDestination

if __name__ == "__main__":
    host = "https://api.shotstack.io/stage"

    if os.getenv("SHOTSTACK_HOST") is not None:
        host =  os.getenv("SHOTSTACK_HOST")

    configuration = shotstack.Configuration(host = host)

    if os.getenv("SHOTSTACK_KEY") is None:
        sys.exit("API Key is required. Set using: export SHOTSTACK_KEY=your_key_here")  

    configuration.api_key['DeveloperKey'] = os.getenv("SHOTSTACK_KEY") 

    with shotstack.ApiClient(configuration) as api_client:
        api_instance = edit_api.EditApi(api_client)

        video_asset = VideoAsset(
            src = "https://i.imgflip.com/66o1m8.mp4"
        )

        video_clip = Clip(
            asset = video_asset,
            start = 0.0,
            length= 3.0
        )

        track = Track(clips=[video_clip])

        timeline = Timeline(
            background = "#000000",
            tracks     = [track]
        )
        output = Output(
            format      = "gif",
            fps         = 12.0,
            resolution = "preview",
            repeat      = True
        )

        edit = Edit(
            timeline = timeline,
            output   = output
        )

        try:
            api_response = api_instance.post_render(edit)

            message = api_response['response']['message']
            id = api_response['response']['id']

            print(f"{message}\n")
            print(f">> render id: {id}")
        except Exception as e:
            print(f"Unable to resolve API call: {e}")

Running the script

Use the python command to run the script.

python mp4-to-gif.py

You may need to use python3 instead of python depending on your configuration.

If the render request is successful, the API will return the render id which we can use to retrieve the status of the
render.

Checking the render status and output URL

To check the status we need another script that will call the API to render the status endpoint. Create a file called status.py and paste the following code:

import sys
import os
import shotstack_sdk as shotstack

from shotstack_sdk.api import edit_api

if __name__ == "__main__":
    host = "https://api.shotstack.io/stage"
    configuration = shotstack.Configuration(host = host)
    configuration.api_key['DeveloperKey'] = os.getenv("SHOTSTACK_KEY")

    with shotstack.ApiClient(configuration) as api_client:
        api_instance = edit_api.EditApi(api_client)
        api_response = api_instance.get_render(sys.argv[1], data=False, merged=True)
        status = api_response['response']['status']

        print(f"Status: {status}")

        if status == "done":
            url = api_response['response']['url']
            print(f">> Asset URL: {url}")

Then run the script using

python status.py {renderId}

Replace {renderId} with the ID returned from the mp4-to-gif.py script.

Re-run the status.py script every couple of seconds until the status is done and a URL is returned. If something goes wrong the status will show as failed.

The final rendered gif is ready to be hosted or transferred to your application:

Accessing your rendered videos using the dashboard

You can view your rendered videos using the dashboard under Renders. Videos are deleted after 24 hours but are available by default in the Shotstack hosting service. You can also send rendered
videos to S3 or
Mux.

Conclusion

This tutorial should have given you a basic understanding of how to programmatically edit and generate videos using Python and the Shotstack video editing API. As a next step, you could learn how to add other assets like text and images to build a simple media application. This is just an introductory tutorial to programmatically working with media but you can do so much more. You can use this for many use cases like:

video automation
video personalization
developing media applications and many more.

You can check out our other Python tutorials and YouTube videos to learn programmatic media and build video apps faster.

Join us to build the future of E-Commerce through automation

Kushal Magar — Thu, 10 Nov 2022 02:10:10 +0000

Join us this November to build a future where e-commerce meets Media Automation. Over the past decade, we’ve witnessed a rapid digital transformation in online commerce. Content like user generated content, testimonials, product images, data-driven creatives, etc in the form of digital media has been a crucial part of marketing for sellers. The demand for product content is only going to grow as more users adopt online shopping.

But what are we doing to solve this demand? Do the brands have the right tools? How can we use the latest technologies like AI and automation to efficiently solve this problem? That is exactly what this hackathon aims to solve - to develop creative applications that can efficiently generate marketing content for e-commerce sellers through automation.

With Shotstack's cloud based video editing API, developers can build media applications faster than ever.

Hackathon details

When?🤔: 11-17th November 2022
Where?🌐: Virtual (You can be literally anywhere)
Prize🏆: Gift worth USD $200 for the winning project

What's in it for you?

🤝 Networking with other innovative developers interested to build apps for e-commerce
😍 Opportunity to receive free Shotstack API rendering credits valued up to $2,000
✅ An opportunity to reshape the future of e-commerce through automation

What can you build for this hackathon?

You can build anything that uses the Shotstack API to generate media and helps the e-commerce sellers. Some project ideas could be:

An automated product video generator plugin for an e-commerce platform like Shopify, Amazon, Wix, WooCommerce, Ebay, BigCommerce, Magento, Etsy, etc.
Web apps that automatically generate product content tailored for e-commerce.
E-commerce tailored video and graphic design marketplace.
A personalized video bot for e-commerce platforms that automatically generates personalized videos when customers buy.
Data-driven automated media generator for re-marketing based on customer behavior.
Testimonial banner generator that automatically generates content from product reviews for social media marketing

and much more. To see it in action, try our automated product promo video generator from code.

How to participate?

Submit this hackathon entry form
Sign up for a free Shotstack developer account to get your API key
Use Shotstack API to build your submission
Submit your project before 17 November 2022, 11:59 p.m.(PT)

Learn more details about the hackathon on our website.

Join the Shotstack hackathon community forum to join the discussion or ask any other questions.

We can't wait to see what you build!🚀

E-Commerce & Media Automation Virtual Hackathon

Kushal Magar — Fri, 14 Oct 2022 04:04:14 +0000

Join us this Hacktober in our E-commerce Media Automation Hackathon to build the future of for the eCommerce industry.

Over the past decade, we’ve witnessed a rapid digital transformation in online commerce. Digital content like videos and designs have been a crucial part of marketing for brands to communicate with their customers. Companies like Amazon, Shopify, Ebay, Wix, etc have thousands of brands selling millions of products.

But how are we making sure brands are efficiently marketing them? Do we have the right tools? How can the latest technologies like AI and automation help? That's exactly what this hackathon aims to solve - to develop creative applications that helps eCommerce product marketing content through automated media generation.

Shotstack's cloud based video editing API and infrastructure makes it easy, fast, and seamless for developers to build media applications. Visit Shotstack Documentation to learn more.

What can you build for this hackathon?

You can build anything that automates media generation for the eCommerce industry using the Shotstack API. Some examples are plugins for platforms like Shopify, Amazon, Wix, WooCommerce, Ebay, etc. Other few examples are web apps, mobile apps, APIs, etc.

Prizes

As Halloween is almost here, we wanted to help you prepare for it with awesome costume prizes.

First prize: CORSAIR gaming keyboard and mouse bundle - CH-9226965-NA K55 Pro + Katar Pro

Second prize: A Halo Master Chief helmet

Third prize: The iconic Doge mask

How does the hackathon work?

Submit hackathon entry form
Sign up for a free Shotstack developer account to get your API key
Build an eCommerce media app using the Shotstack API
Submit your project before 11:59 pm PT 20th October 2022

Visit Shotstack website for more information.

How To Turn Images Into Slideshow Videos Using Python

Kushal Magar — Thu, 29 Sep 2022 01:20:45 +0000

Slideshow videos are a fantastic way to quickly turn boring images into an exciting piece of content. You compile images, add some music, some effects and you get an awesome video in minutes. It is popularly used for various use cases like marketing videos, invitation cards, celebration videos, and more.

Creating a slideshow video is pretty simple and straightforward with the UI based video editors. However, it gets repetetive and manual once you need to create more than one. That's where using Python to programatically turn images into videos can be powerful and save you hours of work. Afterall, we Python users love to automate everything, don't we?

In this article, you will learn to turn images into a slideshow videos with background music using Python.

Prerequisites

Python 3 or higher
Shotstack API key Shotstack provides a cloud-based video editing
API. Rendering videos is resource intensive and can take hours to edit
and generate videos. Shotstack’s cloud editing-API infrastructure makes it possible to concurrently render multiple
videos in minutes.

We will be using the Shotstack Python SDK for this tutorial. You can sign up for a free developer account to get your Shotstack API key.

Configuring basics

We have made the source code publicly available on the Shotstack Python demo repository. Check out this and other video editing Python demos.

git clone https://github.com/shotstack/python-demos.git

Install dependencies including the Shotstack Python SDK:

pip3 install -r requirements.txt

Set your API key as an environment variable (Linux/Mac):

set SHOTSTACK_KEY=your_key_here

or, if using Windows (Make sure to add the SHOTSTACK_KEY to the path):

set SHOTSTACK_KEY=your_key_here

Replace your_key_here with your provided sandbox API key which is free for testing and development.

Creating a simple slideshow video using Python

At the end of this tutorial, you will generate the following slideshow video using Python:

Importing required modules

Let’s import the required modules for the project. We will be using Shotstack Python SDK to edit and render our video. You can see this documentation page if you first want to learn about the SDK.

import shotstack_sdk as shotstack
import os

from shotstack_sdk.model.soundtrack  import Soundtrack
from shotstack_sdk.model.image_asset import ImageAsset
from shotstack_sdk.api               import edit_api
from shotstack_sdk.model.clip        import Clip
from shotstack_sdk.model.track       import Track
from shotstack_sdk.model.timeline    import Timeline
from shotstack_sdk.model.output      import Output
from shotstack_sdk.model.edit        import Edit

Configuring the API client

Let’s set up the client with the API URL and key. So we can check if SHOTSTACK_KEY was set correctly in the previous
step.

host = "https://api.shotstack.io/stage"

if os.getenv("SHOTSTACK_HOST") is not None:
    host =  os.getenv("SHOTSTACK_HOST")

configuration = shotstack.Configuration(host = host)

if os.getenv('SHOTSTACK_KEY') is None:
    sys.exit("API Key is required. Set using: export SHOTSTACK_KEY=your_key_here")  

configuration.api_key['DeveloperKey'] = os.getenv('SHOTSTACK_KEY')

with shotstack.ApiClient(configuration) as api_client:
    api_instance = edit_api.EditApi(api_client)

Adding images for the slideshow

Let’s define an array of images to use in our slideshow. The images need to be hosted somewhere online and accessible via a public or signed URL. We will be using the following images from Pexels stock library. You can replace it with your own image urls.

images = [
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
          ]

Setting up the video layer

A clip is defined as a type of asset in Shotstack. We can configure different attributes like length and start time.The
clips variable below will be used to combine the list of clips, that are the images in this code. The start and length are defined for each clip.

clips  = []
start  = 0.0
length = 3.0

Adding audio to the slideshow

We use the SDK's Shotstack.Soundtrack model to set the audio file URL and a fadeInFadeOut volume effect. Learn more about the soundtrack model here. Similar to images, you can add URL of the mp3. We will use one from Pixabay’s stock library.

soundtrack = Soundtrack(
    src     = "https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3",
    effect  = "fadeInFadeOut",
    volume  = 1.0
)

Combining images to create a video

Let's use our images to create clips . We will iterate over the images array and create clips, defining the start time, length, and default effect. We use the Shotstack.ImageAsset model to set the image URL and the Shotstack.Clip model to create the clip playback properties and add them to our clips
array we set up earlier.

for image in images:
    imageAsset = ImageAsset(src = image)

    clip    = Clip(
        asset   = imageAsset,
        start   = start,
        length  = length,
        effect  = "zoomIn"
    )

    start = start + length
    clips.append(clip)

Slides begin immediately following the previous one. For the first image we default the start to 0 so it starts playing right away. Each image will appear in the video for a duration of 3 seconds, which we defined earlier.

The zoomIn effect gives an effect to all the images. The following are all the motion effects you can use to enhance
your video slideshow:

zoomIn - slow zoom in
zoomOut - slow zoom out
slideLeft - slow slide (pan) left
slideRight - slow slide (pan) right
slideUp - slow slide (pan) up
slideDown - slow slide (pan) down

Adding the clips to the timeline

The Shotstack API follows many of the principles of desktop editing software such as the use of a timeline, tracks, and clips. Let’s create a timeline, which is like a container for multiple video clips which play over time. Tracks on the timeline allow us to layer clips on top of each other.

for image in images:
    imageAsset = ImageAsset(src = image)

    clip    = Clip(
        asset   = imageAsset,
        start   = start,
        length  = length,
        effect  = "zoomIn"
    )

    start = start + length
    clips.append(clip)

We now add the clips we just created to a track. Then layer the track on the timeline, along with the soundtrack. We use the Shotstack.Track from the SDK and the Shotstack.Timeline:

Configuring output

Lastly, we configure the output format and add the timeline and output to create an edit. We use the Shotstack.Output and Shotstack.Edit models.

output = Output(
    format      = "mp4",
    resolution  = "sd",
    fps         = 30.0
)

edit = Edit(
    timeline = timeline,
    output   = output
)

Sending the edit to the Shotstack API

Finally, we send the data to the video editing API for processing and rendering. The Shotstack SDK takes care of converting our objects to JSON, including our key to the request header, and sending everything to the API.

try:
    api_response = api_instance.post_render(edit)

    message = api_response['response']['message']
    id = api_response['response']['id']

    print(f"{message}\n")
    print(">> Now check the progress of your render by running:")
    print(f">> python examples/status.py {id}")
except Exception as e:
    print(f"Unable to resolve API call: {e}")

Final code

import shotstack_sdk as shotstack
import os

from shotstack_sdk.model.soundtrack  import Soundtrack
from shotstack_sdk.model.image_asset import ImageAsset
from shotstack_sdk.api               import edit_api
from shotstack_sdk.model.clip        import Clip
from shotstack_sdk.model.track       import Track
from shotstack_sdk.model.timeline    import Timeline
from shotstack_sdk.model.output      import Output
from shotstack_sdk.model.edit        import Edit

if __name__ == "__main__":
    host = "https://api.shotstack.io/stage"

    if os.getenv("SHOTSTACK_HOST") is not None:
        host =  os.getenv("SHOTSTACK_HOST")

    configuration = shotstack.Configuration(host = host)

    if os.getenv('SHOTSTACK_KEY') is None:
        sys.exit("API Key is required. Set using: export SHOTSTACK_KEY=your_key_here")  

    configuration.api_key['DeveloperKey'] = os.getenv('SHOTSTACK_KEY')

    with shotstack.ApiClient(configuration) as api_client:
        api_instance = edit_api.EditApi(api_client)

        images = [
           "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg",
          "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg",
          "https://images.pexels.com/photos/2079246/pexels-photo-2079246.jpeg"
        ]

        clips  = []
        start  = 0.0
        length = 1.5

        soundtrack = Soundtrack(
            src     = "https://cdn.pixabay.com /audio/2022/03/23/audio_07b2a04be3.mp3",
            effect  = "fadeInFadeOut",
            volume  = 1.0,
        )

        for image in images:
            imageAsset = ImageAsset(src = image)

            clip    = Clip(
                asset   = imageAsset,
                start   = start,
                length  = length,
                effect  = "zoomIn"
            )

            start = start + length
            clips.append(clip)

        track = Track(clips = clips)

        timeline = Timeline(
            background = "#000000",
            soundtrack = soundtrack,
            tracks     = [track]
        )

        output = Output(
            format      = "mp4",
            resolution  = "sd",
            fps         = 30.0
        )

        edit = Edit(
            timeline = timeline,
            output   = output
        )

        try:
            api_response = api_instance.post_render(edit)

            message = api_response['response']['message']
            id = api_response['response']['id']

            print(f"{message}\n")
            print(">> Now check the progress of your render by running:")
            print(f">> python examples/status.py {id}")
        except Exception as e:
            print(f"Unable to resolve API call: {e}")

Running the script

Use the python command to run the script.

python3 examples/images.py

If the render request is successful, the API will return the rendered id which we can use to retrieve the status of the render.

For this, you can run a different script included in our Python sample repo:

python3 examples/status.py {renderId}

Replace {renderId} with the ID returned from the first command. Re-run the status.py script every 4-5 seconds until either a video URL is returned or there is an error message.

Accessing your rendered videos

You can view your rendered videos inside Shotstack dashboard under Renders. Videos on Shotstack servers will be deleted after 24 hours. You can additionally configure your custom destination like YouTube, Amazon S3, etc… Learn more about the Shotstack destinations

Final thoughts

This tutorial should have given you a basic understanding of how to programmatically edit and create multiple videos using Python and the Shotstack video-editing API.

You can also add other dynamic assets like text, html tags, and more that can be programmatically replaced using merge-fields.

This allows for a fully automated video editing process for different video use cases like real estate, automotive, marketing, sports highlights, etc… The Shotstack API architecture makes it effortless to integrate videos into your application. See our other learn articles on automating videos using Python.

Shotstack Virtual Hackathon: Build Awesome Media Apps

Kushal Magar — Fri, 23 Sep 2022 04:49:16 +0000

We're excited to announce the Shotstack's first ever virtual hackathon is starting on 26th September 2022. Shotstack is inviting builders to join us to build awesome media applications.

Digital media is an integral part of our lives. With the rise of AI and automation, it is evolving as fast as ever. Shotstack API enables builders to rapidly develop and launch media apps so you get to build the next big media product.

Shotstack's virtual hackathon is a great way to showcase your idea, skills, and get along with the community that have similar interest.

Visit our website to learn about the hackathon.

What is Video Automation and how does it work?

Kushal Magar — Wed, 14 Sep 2022 00:57:08 +0000

A recent survey shows video marketing has the highest customer
engagement compared to other forms of marketing. More than 82% of all internet traffic is videos and it is only growing.
Companies are spending a significant amount on creating high-quality content.

But the way we create videos hasn't really changed. Most of the video editing process is still manual and slow. That's
where video automation can significantly improve the process.

What is video automation?

Video automation is automatically editing and generating rendering videos with specific software or workflow.

Traditional video production methods can be costly and time-consuming. It requires an editor to spend hours editing and
refining. That's where video automation is helpful. With a proper workflow, one can edit and generate thousands of
high-quality videos in minutes.

Let's say you own a clothing brand and you find that using product videos for marketing improves revenue. So you decide
to create short videos for all your products.

First, you need to create a design for your video. Maybe you want to show the price, product image, and other
information, and add effects based on the story. Then you need to resize, crop, and tweak all of them to fit various
marketing channels like social media, email, etc...

An average fashion brand sells more than 1,000 SKUs every month. That will take a long time and cost a lot of money to
generate videos for every item.

That's when video automation can help you. A well-designed workflow can simultaneously edit and generate thousands of
high-quality product videos for your brand.

Here is a simple video example that automatically generates birthday cards for your customers with discount codes that you can integrate into your CRM and use it to increase sales:

Different ways to automate videos

The automation process can be unique to one's requirements and skills. It can be briefly divided into 3 different
segments:

Code:

If you know how to code, then chances are you have already tried to automate editing videos. Libraries such as
MoviePy for Python and FFmpeg allow you to programmatically
edit videos. If you require a customizable, scalable, and powerful solution, developing your own video automation
workflow is the way to go.

However, using these libraries on a single computer is not scalable and efficient. Editing videos is a
resource-intensive process. It may take hours to edit and generate a single video using a standard computer. Setting up
your own cloud server is not easy or cost-effective.

That's where solutions like Shotstack can help. Shotstack provides a cloud based video editing
API and a robust hosting infrastructure. This allows you to
simultaneously edit and render multiple videos in a powerful cloud infrastructure while not having to worry about
setting up your own servers. You can use SDK for Python, Nodejs, Ruby, or PHP to develop your automation.

Low code:

Another method to automate videos is by using low-code tools. Leveraging integration tools like
Zapier or Make for automation with products like Shotstack, Rocketium,
etc.. to create a powerful automation workflow.

Creating a workflow may require a little bit of programming. The downside of this method is the limitation due to
pre-built integration between the two applications.

No code:

The final method to automate videos is by using pre-built software.
Adobe, Biteable, and similar
UI-based tools that offer video editing. Not all tools have automation features but some tools allow limited automation
by integrating another application like Zapier.

However, these types of software will have limited automation features as they are not designed for bulk automation. As
it requires an automated process to replace data, the integration methods can be limited.

Using a video editing API like Shotstack with code/low-code methods seems to be the most efficient and sustainable
approach to automating video generation. The result is a powerful process that allows full control over the entire
workflow, including integrations and destinations with most external software. This way, you are not stuck with features
of one particular tool and can scale without a problem.

Is video automation right for you?

Although the video automation process is more efficient than traditional video editing processes, it still needs to
progress to be a full-service solution. After all, videos are a form of creative expression.

Hence differentiating your requirements and planning ahead can help you understand if video automation is the right
solution for you. The following questions can help you decide:

What type of video is it? Illustrated, animated, story-based, etc
Do the videos have repetitive design patterns? Example: Real estate videos, automotive listing videos, sports highlights, etc.. have repetitive patterns which make them easy to automate
How long are the videos?
How many similar videos do you need to produce?
Where is the video going to be used?
Is precision important? Video attributes like color correction, effects, etc

The future of video automation

As we move into the age of automation with evolving technologies like AI and Robotic Process Automation it is fair to
say automation will largely impact the future of media generation. That said, we will still need professional video
producers, designers, and editors for originality and creativity.

For high-volume, short, similar videos used in marketing, video automation can be an ideal companion. Industries such as
real estate, travel, automotive, sports, media, news, etc… that continuously need to produce content can significantly
improve their workflow through video automation.

Programatically turn images into slideshow videos using Python

Kushal Magar — Tue, 13 Sep 2022 12:12:04 +0000

Slideshow videos are a fantastic way to quickly turn boring images into an exciting piece of content. You compile
images, add some music, some effects and you get an awesome video in minutes. It is popularly used for various use cases
like marketing videos, invitation cards, celebration videos, and more.

Creating a slideshow video is pretty simple and straightforward with the UI based video editors. However, it gets repetitive and manual once you need to create more than one. That's where using Python to programatically create slideshow videos can be powerful and save you hours of work. Afterall, we Python users love to automate everything, don't we?

In this article, you will learn to programatically turn images into a slideshow video with background music using
Python.

Prerequisites

Python 3 or higher
Shotstack API key Shotstack provides a cloud-based video editing
API. Rendering videos is resource intensive and can take hours to edit
and generate videos. Shotstack’s cloud editing-API infrastructure makes it possible to concurrently render multiple
videos in minutes.

We will be using the Shotstack Python SDK for this tutorial. You can sign
up for a free developer account to get your Shotstack API key.

Configuring basics

We have made the source code publicly available on the Shotstack Python demo repository. Check out this and other Python
demos here.

git clone https://github.com/shotstack/python-demos.git

Install dependencies including the Shotstack Python SDK:

pip3 install -r requirements.txt

Set your API key as an environment variable (Linux/Mac):

set SHOTSTACK_KEY=your_key_here

or, if using Windows (Make sure to add the SHOTSTACK_KEY to the path):

set SHOTSTACK_KEY=your_key_here

Replace your_key_here with your provided sandbox API key which is free for testing and development.

Creating a simple slideshow video using Python

At the end of this tutorial, you will generate the following slideshow video using Python:

Importing required modules

Let’s import the required modules for the project. We will be using Shotstack Python SDK to edit and render our video.
You can see this documentation page if you first want to learn about the SDK.

import shotstack_sdk as shotstack
import os

from shotstack_sdk.model.soundtrack  import Soundtrack
from shotstack_sdk.model.image_asset import ImageAsset
from shotstack_sdk.api               import edit_api
from shotstack_sdk.model.clip        import Clip
from shotstack_sdk.model.track       import Track
from shotstack_sdk.model.timeline    import Timeline
from shotstack_sdk.model.output      import Output
from shotstack_sdk.model.edit        import Edit

Configuring the API client

Let’s set up the client with the API URL and key. So we can check if SHOTSTACK_KEY was set correctly in the previous
step.

host = "https://api.shotstack.io/stage"

if os.getenv("SHOTSTACK_HOST") is not None:
    host =  os.getenv("SHOTSTACK_HOST")

configuration = shotstack.Configuration(host = host)

if os.getenv('SHOTSTACK_KEY') is None:
    sys.exit("API Key is required. Set using: export SHOTSTACK_KEY=your_key_here")  

configuration.api_key['DeveloperKey'] = os.getenv('SHOTSTACK_KEY')

with shotstack.ApiClient(configuration) as api_client:
    api_instance = edit_api.EditApi(api_client)

Adding images for the slideshow

Let’s define an array of images to use in our slideshow. The images need to be hosted somewhere online and accessible
via a public or signed URL. We will be using the following images from Pexels stock library. You can replace it with
your own image urls.

images = [
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
          ]

Setting up the video layer

A clip is defined as a type of asset in Shotstack. We can configure different attributes like length and start time. The
clips variable below will be used to combine the list of clips, that are the images in this code. The start and
length are defined for each clip

clips  = []
start  = 0.0
length = 3.0

Adding audio to the slideshow

We use the SDK's Shotstack.Soundtrack model to set the audio file URL and a fadeInFadeOut volume effect. Learn more
about the soundtrack model here. Similar to images, you can add URL of the mp3. We will use one from Pixabay’s stock
library.

soundtrack = Soundtrack(
    src     = "https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3",
    effect  = "fadeInFadeOut",
    volume  = 1.0
)

Combining images to create a video

Let's use our images to create clips . We will iterate over the images
array and create clips, defining the start time, length, and default effect. We use the Shotstack.ImageAsset model to
set the image URL and the Shotstack.Clip model to create the clip playback properties and add them to our clips
array we set up earlier.

for image in images:
    imageAsset = ImageAsset(src = image)

    clip    = Clip(
        asset   = imageAsset,
        start   = start,
        length  = length,
        effect  = "zoomIn"
    )

    start = start + length
    clips.append(clip)

Slides begin immediately following the previous one. For the first image we default the start to 0 so it starts
playing right away. Each image will appear in the video for a duration of 3 seconds, which we defined earlier.

The zoomIn effect gives an effect to all the images. The following are all the motion effects you can use to enhance
your video slideshow:

zoomIn - slow zoom in
zoomOut - slow zoom out
slideLeft - slow slide (pan) left
slideRight - slow slide (pan) right
slideUp - slow slide (pan) up
slideDown - slow slide (pan) down

Adding the clips to the timeline

The Shotstack API follows many of the principles of desktop editing software such as the use of a timeline, tracks, and
clips. Let’s create a timeline, which is like a container for multiple
video clips which play over time. Tracks on the timeline allow us to layer clips on top of each other.

for image in images:
    imageAsset = ImageAsset(src = image)

    clip    = Clip(
        asset   = imageAsset,
        start   = start,
        length  = length,
        effect  = "zoomIn"
    )

    start = start + length
    clips.append(clip)

We now add the clips we just created to a track. Then layer the track on the timeline, along with the soundtrack. We use
the Shotstack.Track from the SDK and the Shotstack.Timeline:

Configuring output

Lastly, we configure the output format and add the timeline and output to
create an edit. We use the Shotstack.Output and Shotstack.Edit models.

output = Output(
    format      = "mp4",
    resolution  = "sd",
    fps         = 30.0
)

edit = Edit(
    timeline = timeline,
    output   = output
)

Sending the edit to the Shotstack API

Finally, we send the data to the video editing API for processing and rendering. The Shotstack SDK takes care of
converting our objects to JSON, including our key to the request header, and sending everything to the API.

try:
    api_response = api_instance.post_render(edit)

    message = api_response['response']['message']
    id = api_response['response']['id']

    print(f"{message}\n")
    print(">> Now check the progress of your render by running:")
    print(f">> python examples/status.py {id}")
except Exception as e:
    print(f"Unable to resolve API call: {e}")

Final code

import shotstack_sdk as shotstack
import os

from shotstack_sdk.model.soundtrack  import Soundtrack
from shotstack_sdk.model.image_asset import ImageAsset
from shotstack_sdk.api               import edit_api
from shotstack_sdk.model.clip        import Clip
from shotstack_sdk.model.track       import Track
from shotstack_sdk.model.timeline    import Timeline
from shotstack_sdk.model.output      import Output
from shotstack_sdk.model.edit        import Edit

if __name__ == "__main__":
    host = "https://api.shotstack.io/stage"

    if os.getenv("SHOTSTACK_HOST") is not None:
        host =  os.getenv("SHOTSTACK_HOST")

    configuration = shotstack.Configuration(host = host)

    if os.getenv('SHOTSTACK_KEY') is None:
        sys.exit("API Key is required. Set using: export SHOTSTACK_KEY=your_key_here")  

    configuration.api_key['DeveloperKey'] = os.getenv('SHOTSTACK_KEY')

    with shotstack.ApiClient(configuration) as api_client:
        api_instance = edit_api.EditApi(api_client)

        images = [
           "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
          "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg",
          "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg",
          "https://images.pexels.com/photos/2079246/pexels-photo-2079246.jpeg"
        ]

        clips  = []
        start  = 0.0
        length = 1.5

        soundtrack = Soundtrack(
            src     = "https://cdn.pixabay.com /audio/2022/03/23/audio_07b2a04be3.mp3",
            effect  = "fadeInFadeOut",
            volume  = 1.0,
        )

        for image in images:
            imageAsset = ImageAsset(src = image)

            clip    = Clip(
                asset   = imageAsset,
                start   = start,
                length  = length,
                effect  = "zoomIn"
            )

            start = start + length
            clips.append(clip)

        track = Track(clips = clips)

        timeline = Timeline(
            background = "#000000",
            soundtrack = soundtrack,
            tracks     = [track]
        )

        output = Output(
            format      = "mp4",
            resolution  = "sd",
            fps         = 30.0
        )

        edit = Edit(
            timeline = timeline,
            output   = output
        )

        try:
            api_response = api_instance.post_render(edit)

            message = api_response['response']['message']
            id = api_response['response']['id']

            print(f"{message}\n")
            print(">> Now check the progress of your render by running:")
            print(f">> python examples/status.py {id}")
        except Exception as e:
            print(f"Unable to resolve API call: {e}")

Running the script

Use the python command to run the script.

python3 examples/images.py

If the render request is successful, the API will return the rendered id which we can use to retrieve the status of the
render.

For this, you can run a different script included in our sample
repo:

python3 examples/status.py {renderId}

Replace {renderId} with the ID returned from the first command. Re-run the status.py script every 4-5 seconds until
either a video URL is returned or there is an error message.

Accessing your rendered videos

You can view your rendered videos inside Shotstack dashboard under Renders. Videos on Shotstack servers will be deleted
after 24 hours. You can additionally configure your custom destination like YouTube, Amazon
S3, etc… Learn more about destinations
here.

Final thoughts

This tutorial should have given you a basic understanding of how to programmatically edit and create multiple videos
using Python and Shotstack video-editing API.

You can also add other dynamic assets like text, html tags, and more that can be programmatically replaced using
merge-fields.

Add Picture-In-Picture To Your Videos With Node.js

Kushal Magar — Tue, 26 Jul 2022 01:35:00 +0000

Before getting started you might want to see an example application
that we built that will layer videos to create a picture-in-picture effect.

Picture-in-picture has become quite ubiquitous across the media landscape with the functionality being available on
browsers to allow for the watching of a video while scrolling a web page, and as insets on many YouTube videos for
creators to provide commentary on their videos.

This guide will walk you through creating a simple application that can be used to add picture-in-picture
functionality to your videos. For this tutorial we are using Node.js.

Please note that a newer article looks at creating PiP videos through the use of dynamic video templates.

Prequesites

Node.js

Our script will be written in Node.js and we'll keep it as simple as possible with minimum
dependencies.

Shotstack Developer Account

The Shotstack API allows you to render tens of thousands of videos in the cloud, and personalise each individual video with the Node.js SDK. With API capable of rendering hundreds videos concurrently in the cloud, you can automate generation hundreds of similar videos. After registering just log in to receive your API key.

Setting the scene

We're going to build a YouTube listicle video discussing my top 5 favorite games for OSX. We have a
bunch of media assets such as game footage and video commentary of different aspect ratio's, resolutions and filetypes
which we will assemble into a composited video.

JSON

A Shotstack video edit is simply a JSON file comprising of a timeline, clips, transitions and effects that is posted to
the API which takes care of the rendering process producing an mp4 video file.

In the JSON below, we place part of our game footage in series, and place our scaled video commentary on the bottom
left hand of those videos.

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                 "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/deponia_pip.mov"
                        },
                        "start": 0,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/hacknet_pip.mov"
                        },
                        "start": 10,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/beholder_pip.mov"
                        },
                        "start": 20,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/pinstripe_pip.mov"
                        },
                        "start": 30,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/thimbleweed_pip.mov"
                        },
                        "start": 40,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/deponia.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 0,
                        "length": 10
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/hacknet.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 10,
                        "length": 10
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/beholder.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 20,
                        "length": 10
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/pinstripe.mkv",
                            "volume": 0.1,
                            "trim": 40
                        },
                        "start": 30,
                        "length": 10
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/thimbleweed.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 40,
                        "length": 10
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

You could submit this JSON payload directly to the API using Curl or Postman but for this tutorial we will save the
JSON in a file called template.json and read it in using our Node.js script.

Node.js application

Create a new Node.js script file and add the code below. The script will read the JSON template file, POST it to the
API render endpoint and then poll the API to retrieve the render status. It will take around 30 seconds to render the
video and a URL will be output to the console which you can download and view. You will need to install the dotenv
and axios node modules before running the script.

require('dotenv').config();
const axios = require('axios');

const shotstackUrl = 'https://api.shotstack.io/stage/';
const shotstackApiKey = process.env.SHOTSTACK_API_KEY; // Either declare your API key in your .env file, or set this variable with your API key right here.

const json = require('./template.json');

/**
 * Post the JSON video edit to the Shotstack API
 * 
 * @param {String} json  The JSON edit read from template.json
 */
const renderVideo = async (json) => {
    const response = await axios({
        method: 'post',
        url: shotstackUrl + 'render',
        headers: {
            'x-api-key': shotstackApiKey,
            'content-type': 'application/json'
        },
        data: json
    });

    return response.data;
}

/**
 * Get the status of the render task from the Shotstack API
 * 
 * @param {String} uuid  The render id of the current video render task 
 */
const pollVideoStatus = async (uuid) => {
    const response = await axios({
        method: 'get',
        url: shotstackUrl + 'render/' + uuid,
        headers: {
            'x-api-key': shotstackApiKey,
            'content-type': 'application/json'
        },
    });

    if (!(response.data.response.status === 'done' || response.data.response.status === 'failed')) {
        setTimeout(() => {
            console.log(response.data.response.status + '...');
            pollVideoStatus(uuid);
        }, 3000);
    } else if (response.data.response.status === 'failed') {
        console.error('Failed with the following error: ' + response.data.response.error);
    } else {
        console.log('Succeeded: ' + response.data.response.url);
    }
}

// Run the script
(async () => {
    try {
        const render = await renderVideo(JSON.stringify(json));
        pollVideoStatus(render.response.id);
    } catch (err) {
        console.error(err);
    }
})();

Initial result

Our first draft will look like the video below:

Pretty straightforward right! We can add some improvements to make it clearer what the video is about and it doesn't yet
feel like a listicle at all. The different clips don't transition very nicely, and there's generally no context
on what's going on outside of the commentary.

Final touches

The JSON below adds a couple of HTML assets. These assets use HTML and CSS to build basic animations that provide
context on the game that is being discussed. We'll also add some transitions to the game footage to more organically
transition from one item to the next and include an initial title scene that makes it clear what the video is all about.

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "Top 5 Steam games on OSX",
                            "style": "blockbuster",
                            "color": "#ffffff",
                            "size": "large",
                            "background": "#000000",
                            "position": "center"
                        },
                        "start": 0,
                        "length": 3,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>5</div>",
                            "css": "div {font-family: \"Lato\";font-size: 90px; font-weight: bold; padding: 5%;}",
                            "width": 150,
                            "height": 150,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideRight",
                            "out": "slideLeft"
                        },
                        "start": 3,
                        "length": 4,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.05,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Daedalic Entertainment, 2012</div>",
                            "css": "div {font-family: \"Lato\";font-size: 18px; font-weight: bold; padding: 5%;}",
                            "width": 300,
                            "height": 50,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        },
                        "start": 3,
                        "length": 4,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Deponia</div>",
                            "css": "div {font-family: \"Lato\";font-size: 60px; font-weight: bold; padding: 5%;}",
                            "width": 400,
                            "height": 100,
                            "background": "#bdc3c7",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideDown",
                            "out": "slideUp"
                        },
                        "start": 3,
                        "length": 4,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.219
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>4</div>",
                            "css": "div {font-family: \"Lato\";font-size: 90px; font-weight: bold; padding: 5%;}",
                            "width": 150,
                            "height": 150,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideRight",
                            "out": "slideLeft"
                        },
                        "start": 11,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.05,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Fractal Alligator, 2015</div>",
                            "css": "div {font-family: \"Lato\";font-size: 18px; font-weight: bold; padding: 5%;}",
                            "width": 300,
                            "height": 50,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        },
                        "start": 11,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Hacknet</div>",
                            "css": "div {font-family: \"Lato\";font-size: 60px; font-weight: bold; padding: 5%;}",
                            "width": 400,
                            "height": 100,
                            "background": "#bdc3c7",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideDown",
                            "out": "slideUp"
                        },
                        "start": 11,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.219
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>3</div>",
                            "css": "div {font-family: \"Lato\";font-size: 90px; font-weight: bold; padding: 5%;}",
                            "width": 150,
                            "height": 150,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideRight",
                            "out": "slideLeft"
                        },
                        "start": 21,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.05,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Warm Lamp Games, 2016</div>",
                            "css": "div {font-family: \"Lato\";font-size: 18px; font-weight: bold; padding: 5%;}",
                            "width": 300,
                            "height": 50,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        },
                        "start": 21,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Beholder</div>",
                            "css": "div {font-family: \"Lato\";font-size: 60px; font-weight: bold; padding: 5%;}",
                            "width": 400,
                            "height": 100,
                            "background": "#bdc3c7",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideDown",
                            "out": "slideUp"
                        },
                        "start": 21,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.219
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>2</div>",
                            "css": "div {font-family: \"Lato\";font-size: 90px; font-weight: bold; padding: 5%;}",
                            "width": 150,
                            "height": 150,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideRight",
                            "out": "slideLeft"
                        },
                        "start": 31,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.05,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Atmos Games, 2017</div>",
                            "css": "div {font-family: \"Lato\";font-size: 18px; font-weight: bold; padding: 5%;}",
                            "width": 300,
                            "height": 50,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        },
                        "start": 31,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Pinstripe</div>",
                            "css": "div {font-family: \"Lato\";font-size: 60px; font-weight: bold; padding: 5%;}",
                            "width": 400,
                            "height": 100,
                            "background": "#bdc3c7",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideDown",
                            "out": "slideUp"
                        },
                        "start": 31,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.219
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>1</div>",
                            "css": "div {font-family: \"Lato\";font-size: 90px; font-weight: bold; padding: 5%;}",
                            "width": 150,
                            "height": 150,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideRight",
                            "out": "slideLeft"
                        },
                        "start": 41,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.05,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Terrible Toybox, 2017</div>",
                            "css": "div {font-family: \"Lato\";font-size: 18px; font-weight: bold; padding: 5%;}",
                            "width": 300,
                            "height": 50,
                            "background": "#ecf0f1",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        },
                        "start": 41,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.15
                        }
                    },
                    {
                        "asset": {
                            "type": "html",
                            "html": "<div>Thimbleweed Park</div>",
                            "css": "div {font-family: \"Lato\";font-size: 40px; font-weight: bold; padding: 5%;}",
                            "width": 400,
                            "height": 100,
                            "background": "#bdc3c7",
                            "position": "center"
                        },
                        "transition": {
                            "in": "slideDown",
                            "out": "slideUp"
                        },
                        "start": 41,
                        "length": 5,
                        "position": "bottomLeft",
                        "offset":{
                            "x": 0.18,
                            "y": 0.219
                        }
                    }
                ]
            },
            {
                 "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/deponia_pip.mov"
                        },
                        "start": 3,
                        "length": 7,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/hacknet_pip.mov"
                        },
                        "start": 10,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/beholder_pip.mov"
                        },
                        "start": 20,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/pinstripe_pip.mov"
                        },
                        "start": 30,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/thimbleweed_pip.mov"
                        },
                        "start": 40,
                        "length": 10,
                        "scale": 0.2,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.05,
                            "y": 0.1
                        },
                        "transition":{
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/deponia.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 3,
                        "length": 7,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/hacknet.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 10,
                        "length": 10,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/beholder.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 20,
                        "length": 10,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/pinstripe.mkv",
                            "volume": 0.1,
                            "trim": 40
                        },
                        "start": 30,
                        "length": 10,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/pip/thimbleweed.mkv",
                            "volume": 0.1,
                            "trim": 10
                        },
                        "start": 40,
                        "length": 10,
                        "transition":{
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ],
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Lato-Bold.ttf"
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

Final result

The final output is a professionally edited listicle video with picture-in-picture video commentary. PewDiePie
would be jealous.

Conclusion

This guide shows you how to build an application that places a scaled video on top of another video; creating a
picture-in-picture effect. We also used the HTML asset type and the built in slide transitions to add animated lower
third titles.

To demonstrate how you could use the techniques described in this how to guide we have built our own
open-source picture-in-picture generator which you can use to generate
picture-in-picture videos. The complete source code is available
on GitHub, which you could use as a starting point to build your own application.

Follow Shotstack to learn about programmable videos and video applications. Start with our learn resources to learn to start programmable videos. Sign up for free to start building awesome video applications.

How To Turn Images Into Interactive Slideshow Videos With Node.js & Shotstack API

Kushal Magar — Thu, 14 Jul 2022 03:14:30 +0000

A basic slideshow is a sequence of still images that change at regular time intervals. With modern video editing
software you can go beyond the classical definition by adding motion effects and transitions to capture your audience's
interest.

The possibilities with video slideshows are infinite. They are perfectly suited for for storytelling, showcasing a
product, highlighting aspects of physical locations (real estate tours, venues etc), step-by-step tutorials or different
albums such as personal or event photography.

One of the most common effects you can add to your video slideshows is the
Ken Burns effect - a simple, elegant
transition effect that gives the illusion of motion on static images by zooming and panning around an image.

In this article we'll go through the basis of creating video slideshows using Node.js and the Shotstack cloud video
editing API and then add some effects to keep the viewers engaged, similar to the Ken Burns effect.

Prerequisites

Shotstack Free Developer Account:
The Shotstack API allows you to render tens of thousands of videos in the cloud, and personalise each individual video with the Node.js SDK. With API capable of rendering hundreds videos concurrently in the cloud, you can automate generation hundreds of similar videos. After registering just log in to receive your API key.
Node.js:
We'll be using Node.js to build our application. No fancy routing, just the basics.

Getting started

In order to help you get started quickly, we prepared a Shotstack Node.js demo project which is open source and publicly
available on GitHub.

Checkout the shotstack/node-demos project:

git clone https://github.com/shotstack/node-demos.git

Install the dependencies including the Shotstack Node.js video editor SDK:

npm install

Set your API key as an environment variable (Linux/Mac):

export SHOTSTACK_KEY=your_key_here

or, if using Windows:

set SHOTSTACK_KEY=your_key_here

Replace your_key_here with your provided sandbox API key which is free for testing and development.

Creating a simple video slideshow using code

We are going to generate the slideshow video below using Node.js and the built in video editing API functionality.

First, open the file examples/images.js from the demo project. This simple Node.js script takes an
array of images, loops through them to create video clip and prepares an a JSON payload. Finally the payload is sent to
the Shotstack API to be rendered.

We will use the Shotstack Node.js SDK which help us configure the API client and interact with the API features using
models, getter and setter functions.

Configure the API client

The first few lines setup the client with the the API url and key, making sure the SHOTSTACK_KEY was set correctly in
the previous step.

const Shotstack = require('shotstack-sdk');

const defaultClient = Shotstack.ApiClient.instance;
const DeveloperKey = defaultClient.authentications['DeveloperKey'];
const api = new Shotstack.EditApi();

let apiUrl = 'https://api.shotstack.io/stage';

if (!process.env.SHOTSTACK_KEY) {
    console.log('API Key is required. Set using: export SHOTSTACK_KEY=your_key_here');
    process.exit(1);
}

if (process.env.SHOTSTACK_HOST) {
    apiUrl = process.env.SHOTSTACK_HOST;
}

defaultClient.basePath = apiUrl;
DeveloperKey.apiKey = process.env.SHOTSTACK_KEY;

Defining the slideshow images

We need to define an array of images to use in our slideshow, the images need to be hosted somewhere online and be
accessible via a public or signed URL. For this tutorial we are using some photos we downloaded from the
Pexels stock photo library.

const images = [
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-712850.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-867452.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-752036.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-572487.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-114977.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-347143.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-206290.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-940301.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-266583.jpeg',
    'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-539432.jpeg'
];

Basic config

We will now define an empty array holder for our clips, in Shotstack a clip defines the type of asset, when it starts
playing and how long it plays for:

let clips = [];

We need to control the duration of each slide and the time when it starts. We'll set default duration to
1.5 seconds.

let start = 0;
const length = 1.5;

We will come back to these setting in one of the next steps.

Adding audio to the slideshow

A stunning slideshow should not miss an audio track - it can be music you like, some specific sounds that help the
visuals or even a voice-over. We use the SDK's Shotstack.Soundtrack model to set the audio file URL and a
fadeInFadeOut volume effect.

let soundtrack = new Shotstack.Soundtrack;
soundtrack
    .setSrc('https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/music/gangsta.mp3')
    .setEffect('fadeInFadeOut');

Creating video clips from each image

Let's now use our images to create clips. We will iterate over the images array and create clips, defining the start
time, length and a default effect. We use the Shotstack.ImageAsset model to set the image URL and the
Shotstack.Clip model to create the clip playback properties and add them to our clips array we set up earlier.

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image);

    let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(length)
        .setEffect('zoomIn');

    start = start + length;
    clips.push(clip);
});

Each slide starts immediately after the previous one ends. For the first image we default the start to 0 so it starts
playing right away. We then add the length which we defined as 1.5 seconds, so each image will appear in the video
for that duration.

Here is the full list of motion effects you can use to enhance your video slideshows:

zoomIn - slow zoom in
zoomOut - slow zoom out
slideLeft - slow slide (pan) left
slideRight - slow slide (pan) right
slideUp - slow slide (pan) up
slideDown - slow slide (pan) down

Adding the clips to the timeline

Shotstack API uses a timeline, which is like a container for multiple video clips which play over time.
The timeline contains tracks which allow us to layer clips over one another.

In our case, the clips we just created are added to a track and then we add the track to the timeline, along
with the soundtrack. We use the Shotstack.Track from the SDK and the Shotstack.Timeline:

let track = new Shotstack.Track;
track
    .setClips(clips);

let timeline = new Shotstack.Timeline;
timeline
    .setBackground('#000000')
    .setSoundtrack(soundtrack)
    .setTracks([track]);

Configuring the output video

Finally we configure the output format and add the timeline
and output to create an edit. Using the SDK again we use the
Shotstack.Output and Shotstack.Edit models.

let output = new Shotstack.Output;
output
    .setFormat('mp4')
    .setResolution('sd')
    .setFps(30);

let edit = new Shotstack.Edit;
edit
    .setTimeline(timeline)
    .setOutput(output);

Sending the edit to the Shotstack API

The final step in our script is to send the data to the video editing API for processing and rendering. The Shotstack
SDK takes care of converting our objects to JSON, adding our key to the request header and sending everything to the
API.

api.postRender(edit).then((data) => {
    let message = data.response.message;
    let id = data.response.id

    console.log(message + '\n');
    console.log('>> Now check the progress of your render by running:');
    console.log('>> node examples/status.js ' + id);

}, (error) => {
    console.error('Request failed: ', error);
    process.exit(1);
});

Running the script

To run the script use the node command from the root folder of the project:

node examples/images.js

If the render request is successful, the API will return the render id which we can use to retrieve the status of the
render.

For this, you can run a different script included in our sample repo:

node examples/status.js {renderId}

Replace {renderId} with the ID returned from the first command.

Re-run the status.js script every 4-5 seconds until either a video URL is returned or there is an error message.

Recreating the Ken Burns effect using code

If you want to have a Ken Burs style effect with random transition between the slides, we can define an array to hold
the pool of effects we want to use and use a randomizer function.

You can add the code below before defining the image constant:

const effects = ['zoomIn', 'zoomOut', 'slideLeft', 'slideRight', 'slideUp', 'slideDown'];

const getRandomEffect = () => {
    return effects[Math.floor(Math.random() * effects.length)]
}

const images = [
    ...
]

All we need to do is replace the zoomIn effect in the clip creation code with the call to the getRandomEffect
method.

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image);

    let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(length)
        .setEffect(getRandomEffect());

    start = start + length;
    clips.push(clip);
});

Our randomised Ken Burns style slideshow video will look something like the video below.

Controlling the motion effect for each image

If you want to have more control on each of the slides, you can configure the duration and effect individually when
defining the images constant and use an array of objects instead:

const images = [
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-712850.jpeg',
        length: 2,
        effect: 'zoomIn'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-867452.jpeg',
        length: 5,
        effect: 'slideLeft'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-752036.jpeg',
        length: 1.5,
        effect: 'slideDown'
    },
    {
        src: 'https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-572487.jpeg',
        length: 2,
        effect: 'slideRight'
    }
];

We now need to alter the clip creation code; we'll ignore the default length constant we defined in the first part
and instead use the value defined for each object in the array:

images.forEach((image) => {
    let imageAsset = new Shotstack.ImageAsset;
    imageAsset
        .setSrc(image.src);

    let clip = new Shotstack.Clip;
    clip
        .setAsset(imageAsset)
        .setStart(start)
        .setLength(image.length)
        .setEffect(image.effect);

    start = start + image.length;
    clips.push(clip);
});

Our final programmatically generated slideshow video looks like below.

Final thoughts

I hope this tutorial has given you a basic understanding of how to use the Shotstack
video editing API to automatically generate a video slideshow using code, in this case
Node.js. The same demo code is also available in
PHP and
Ruby.

You can also build out from this example and create out an entire application that uses images from different sources
such as user uploaded images or user generated content, image scraping or integrate with an image hosting service like
Google Photos, Google Drive, Drop Box or Microsoft OneDrive.

Follow Shotstack to get similar articles about programmable videos and applications. Start with our learn resources to learn to start programmable videos. Sign up for free to start building awesome video applications.

How To Watermark Videos With Node.js & Shotstack API

Kushal Magar — Wed, 13 Jul 2022 11:15:18 +0000

For anyone not interested in learning how to build an application that watermarks your videos and just wants a simple
way to add a watermark to a video; this watermarker utility will do just
that!

Today we use watermarks for a wide variety of applications, with the majority of watermarks now being off the digital
variety. It provides for a clear, yet relatively unobtrusive way, to show original authorship. This is particularly
important in the age of the internet where it is easy to copy and appropriate media without permission.

This guide has been written to show a quick and easy way to develop an application that can add watermarks to your
videos using the Shotstack API. This API allows you to describe a video edit in JSON, and then use your favourite
programming language to render thousands of videos concurrently in the cloud.

Prequsites

Sign up for an API key

The Shotstack API allows you to render tens of thousands of videos in the cloud, and personalise each individual video through small changes to a JSON file. With API capable of rendering hundreds videos concurrently in the cloud. After registering just log in to receive your API key.

The free version provides you with free use of the API, but does embed a small watermark into your video. You can get
rid of this by adding in your payment information and using your production key.

Node.js

We'll be using Node.js to build our application. No fancy routing, just the basics.

Setting the scene

For this example we'll be pretending we shot some great footage of an open house, and are keen to have this watermarked
so prospective buyers know where to look. We'll use three video clips from Pexels that together will paint a beautiful
picture of what's for sale:

As our watermark we'll be using the logo of our real estate company; Block real estate:

The code

For this guide I won't go in too much depth how the API exactly works and what different effects and transitions are
available, but if you're in need of a primer please take a quick look at
this guide.

JSON

The Shotstack API works by sending a JSON string to the API endpoint. The JSON provides a timeline of clips,
transitions and effects that are converted into an output file such as an MP4 or a GIF.

In the example below we composite our watermark (a PNG file) on top of the three videos. The scale, opacity, position
and offset properties then allow us to position the watermark exactly where we want it to be placed.

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
                        },
                        "start": 0,
                        "length": 13,
                        "fit": "none",
                        "scale": 0.33,
                        "opacity": 0.5,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.04,
                            "y": 0.04
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/suburbia-aerial.mp4"
                        },
                        "start": 0,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-1.mp4"
                        },
                        "start": 4,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-2.mp4"
                        },
                        "start": 8,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

You can submit this JSON to the API using Curl or an application like Postman (see our
Hello World tutorial on how to use Curl to post directly to the API), but
for this tutorial we will create a simple application using a Node.js script. Save the above JSON in a file called
template.json which our script will read.

Node.js application

The Node.js script below takes the JSON, and sends it to the API. It then polls the API to retrieve the render status.
After about 30 seconds it logs the video URL for you to use. Before running the script you will need to install the
dotenv and axios libraries using npm or yarn.

require('dotenv').config();
const axios = require('axios');

const shotstackUrl = 'https://api.shotstack.io/stage/';
const shotstackApiKey = process.env.SHOTSTACK_API_KEY; // Either declare your API key in your .env file, or set this variable with your API key right here.

const json = require('./template.json');

/**
 * Post the JSON video edit to the Shotstack API
 * 
 * @param {String} json  The JSON edit read from template.json
 */
const renderVideo = async (json) => {
    const response = await axios({
        method: 'post',
        url: shotstackUrl + 'render',
        headers: {
            'x-api-key': shotstackApiKey,
            'content-type': 'application/json'
        },
        data: json
    });

    return response.data;
}

/**
 * Get the status of the render task from the Shotstack API
 * 
 * @param {String} uuid  The render id of the current video render task 
 */
const pollVideoStatus = async (uuid) => {
    const response = await axios({
        method: 'get',
        url: shotstackUrl + 'render/' + uuid,
        headers: {
            'x-api-key': shotstackApiKey,
            'content-type': 'application/json'
        },
    });

    if (!(response.data.response.status === 'done' || response.data.response.status === 'failed')) {
        setTimeout(() => {
            console.log(response.data.response.status + '...');
            pollVideoStatus(uuid);
        }, 3000);
    } else if (response.data.response.status === 'failed') {
        console.error('Failed with the following error: ' + response.data.response.error);
    } else {
        console.log('Succeeded: ' + response.data.response.url);
    }
}

// Run the script
(async () => {
    try {
        const render = await renderVideo(JSON.stringify(json));
        pollVideoStatus(render.response.id);
    } catch (err) {
        console.error(err);
    }
})();

Initial result

Once we run the Node.js application and the render is complete we should be left with the following video:

This is already looking pretty good, but the black watermark in the first scene isn't very clear. It would be helpful
if we can change the watermark we use based on the scene.

Final touches

We'll add a few final touches such as transitions, a title, some tunes, and switch our watermark image colour based on
the scene.

{
    "timeline": {
        "soundtrack": {
            "src": "https://feeds.soundcloud.com/stream/267703548-unminus-white.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "273 Murcheson Drive, East Hampton, NY",
                            "style": "future",
                            "size": "x-small",
                            "position": "bottomLeft",
                            "offset": {
                                "x": 0.6,
                                "y": -0.2
                            }
                        },
                        "start": 1,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-white.png"
                        },
                        "start": 0,
                        "length": 5,
                        "fit": "none",
                        "scale": 0.33,
                        "opacity": 0.5,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.04,
                            "y": 0.04
                        },
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
                        },
                        "start": 4,
                        "length": 5,
                        "fit": "none",
                        "scale": 0.33,
                        "opacity": 0.5,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.04,
                            "y": 0.04
                        },
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
                        },
                        "start": 8,
                        "length": 5,
                        "fit": "none",
                        "scale": 0.33,
                        "opacity": 0.5,
                        "position": "bottomRight",
                        "offset": {
                            "x": -0.04,
                            "y": 0.04
                        },
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/suburbia-aerial.mp4"
                        },
                        "start": 0,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-1.mp4"
                        },
                        "start": 4,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-2.mp4"
                        },
                        "start": 8,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

Final result

See below our final result — a professionally edited real estate video with watermarks to show off your creation!

Conclusion

The code in this guide provides for a straightforward way to build an application that takes an image to act as a
watermark and composite it on top of a video.

We've built a more comprehensive open-source watermarker application which you
can use to watermark your videos, with the
complete source code
available on GitHub.

Hopefully, this article has inspired you to start using code to manipulate video. This code could easily be further
adapted to use a video watermark instead of a static image, use HTML to
personalise it even further, among many other manipulations at scale that would not be possible using an old fashioned
video editor.

Follow Shotstack to get similar articles about programmable videos and applications. Start with our learn resources to learn to start programmable videos. Sign up for free to start building today!

How To Generate 1,000 Personalized Videos With Node.js Within 1 Minute

Kushal Magar — Sun, 10 Jul 2022 12:23:36 +0000

In this article, we will show you how to build 1,000 personalized birthday videos for 1,000 different people. This is close to impossible to do using traditional video editors such as Adobe Premiere
and After Effects, with specialized personalization agencies
charging tens of thousands of dollars for this type of service.

Prerequisites

Shotstack API key

The Shotstack API allows you to render tens of thousands of videos in the cloud, and personalise each individual video through small changes to a JSON file. With API capable of rendering hundreds videos concurrently in the cloud, the ability to work at enormous scale allows you to render all 1,000 of our videos in less than 30 seconds.

The speed behind this example was made possible through a Shotstack Enterprise account, but you can sign up for a
free account that provides you with all the same functionalities
and allows you to test the service.

Node.js

I'll use vanilla javascript through Node.js to build the application, but feel free to use what
works for you. We have SDKs available for PHP, Node, and Ruby.

Choosing our footage

I built a promotional video which we'll use to offer our fictitious customers a discount on their birthday. This video has
been completely built within Shotstack, but you can achieve the same result using a pre-rendered video built in a video editing
solution such as After Effects.

We'll remove some of the video's content, and use those empty spaces for our personalised data. This data will be placed into
a JSON file, and will place back all of those missing items with new values and animations.

For this particular template we'll personalise the name, age, their younger "fake" age, the discount code, and the discount
amount.

Shotstack uses a JSON object that acts like an editable timeline. This works in a similar fashion to how any desktop video
editing solution would work, with a timeline representing the video duration, and individual clips allowing you to manipulate its content.

For this article I won't go into how this video was built, but if you're interested in understanding how this particular video
was edited you can take a closer look at the JSON template.
And if you're really keen this tutorial goes a little deeper into how you can design these videos yourself.

For this example we'll use a simplified template where the animations have been pre-rendered, making it easy for us to add in
specific HTML assets where our personalised content should go:

{
  "timeline": {
    "fonts": [
      {
        "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/FiraCode-Regular.ttf"
      },
      {
        "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Nexa-Bold.otf"
      }
    ],
    "background": "#000000",
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "html",
              "html": "<p>firstName</p>",
              "css": "p { font-family: \"Nexa Bold\"; font-size: 128px; color: #ffffff; text-align: left; }"
            },
            "start": 2.35,
            "length": 1.45,
            "offset": {
              "y": -0.23,
              "x": 0.05
            },
            "transition": {
              "out": "carouselDown"
            }
          },
          {
            "asset": {
              "type": "html",
              "html": "<p><b>age</b></p>",
              "css": "p { font-family: \"Nexa Bold\"; font-size: 149px; color: white; text-align: left; }"
            },
            "position": "center",
            "start": 5.2,
            "length": 1.3,
            "offset": {
              "y": -0.23,
              "x": 0.05
            },
            "transition": {
              "in": "zoom",
              "out": "zoom"
            }
          },
          {
            "asset": {
              "type": "html",
              "html": "<p><b>fakeAge</b></p>",
              "css": "p { font-family: \"Nexa Bold\"; font-size: 384px; color: #ffffff; text-align: left;}"
            },
            "position": "center",
            "start": 11.15,
            "length": 2.5,
            "offset": {
              "y": -0.05,
              "x": 0.05
            },
            "transition": {
              "out": "carouselLeft"
            }
          },
          {
            "asset": {
              "type": "html",
              "html": "<p>discountCode</p>",
              "css": "p { font-family: \"Fira Coda\"; font-size: 42px; color: #3498db; text-align: center; background-color: #ffffff; padding: 32px; line-height: 106px; }",
              "width": 320,
              "height": 107
            },
            "start": 17.2,
            "length": 4.8,
            "offset": {
              "y": -0.05,
              "x": 0
            }
          },
          {
            "asset": {
              "type": "html",
              "html": "<p>For discount Off</p>",
              "css": "p { font-family: \"Nexa Bold\"; font-size: 58px; color: #3498db; text-align: left;} span { color: #e74c3c; }"
            },
            "start": 19.2,
            "length": 1.2,
            "offset": {
              "y": -0.302,
              "x": 0.04
            }
          },
          {
            "asset": {
              "type": "html",
              "html": "<p>For <span>discount Off</span></p>",
              "css": "p { font-family: \"Nexa Bold\"; font-size: 58px; color: #3498db; text-align: left;} span { color: #e74c3c; }"
            },
            "start": 20.3,
            "length": 1.7,
            "offset": {
              "y": -0.302,
              "x": 0.04
            }
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-content.s3-ap-southeast-2.amazonaws.com/birthday/birthday-template.mp4",
              "volume": 1
            },
            "start": 0,
            "length": 22
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "resolution": "sd"
  }
}

Personalise videos using a spreadsheet

For our customers we'll use a dataset with information on about 1,000 concocted users. This will include their name, age, fake age,
their discount code, and the discount amount. We will then use the data in this CSV to fill in the JSON template and send it to the
API. You can find the complete spreadsheet on GitHub.

Create videos from CSV data

The only thing you need to do now is iterate over the CSV file, add those personalised datapoints to the JSON template, and send
each video edit to the API for rendering.

The below script works using an .env environment file with the Shotstack API key details in it. You can take a look at my
.env file to see how we can use environment
variables in our script.

require("dotenv").config();

const fs = require("fs");
const axios = require("axios").default;
const csv = require("fast-csv");
const argv = require("yargs").argv;
const numWords = require("num-words");
const getAge = require("get-age");
const capitalize = require("capitalize");
const Throttle = require("throttle-stream");

const USER_LIST = "./user-list-test.csv";
const VIDEO_LIST = "./video-list.csv";
const API_KEY = process.env.SHOTSTACK_KEY;
const ENDPOINT = process.env.SHOTSTACK_ENDPOINT;
const CUSTOMER_ID = process.env.SHOTSTACK_CUSTOMER_ID;
const PREVIEW_URL = process.env.SHOTSTACK_PREVIEW_URL;
const TEMPLATE = fs.readFileSync("./template.json", "utf8");
const fileStream = fs.createWriteStream(VIDEO_LIST, { flags: "a" });

let count = 0;

fs.createReadStream(USER_LIST)
  .pipe(new Throttle({ bytes: 200, interval: 1000 }))
  .pipe(csv.parse())
  .on("data", (row) => {
    let age = getAge(row[1]);
    let ageInWords = capitalize.words(numWords(age));

    var mapObj = {
      firstName: row[0],
      age: ageInWords,
      fakeAge: row[2],
      discountCode: row[3],
      discount: row[4],
    };

    let template = JSON.parse(
      JSON.stringify(TEMPLATE).replace(
        /firstName|age|fakeAge|discountCode|discount/gi,
        function (matched) {
          return mapObj[matched];
        }
      )
    );

    axios({
      method: "post",
      url: ENDPOINT,
      headers: {
        "x-api-key": API_KEY,
        "content-type": "application/json",
      },
      data: template,
    }).then(
      (response) => {
        if (response.status !== 201) {
          console.log(row[0], response.data.response.id);
          return;
        }

        let video = response.data.response.id + ".mp4";
        fileStream.write(`${row[0]},${PREVIEW_URL}${CUSTOMER_ID}/${video}\n`);
        console.log("Video queued for: " + row[0]);
      },
      (error) => {
        throw error;
      }
    );
  });

The result - 1000 personalised videos

Once you run the script you'll see all thousand personalised templates be sent through to the API for rendering, and all output
data will end up in a CSV file called video-list.csv, which will include the urls for each individual video.
Image for post

The below list contains the first 20 videos, but if you don't believe me you can find the whole list here.

So what next?

Personalised marketing has shown
to lead to higher email open rates, higher click-through rates, better engagement, and provides you with a new way to build relationships with your audience.

The above only shows you a small example of what can be done by personalizing videos at scale. You can use Shotstack to build
personalized media experiences for your customers and automate your customer engagement by linking Shotstack to Sendgrid via
Integromat, or many other hyper-personalised automations that takes your customer engagement strategy to the next level.

Follow Shotstack to get similar articles about programmable videos and applications. Start with our learn resources to learn to start programmable videos. Sign up for free to start building today!

Add Video Subtitles To Videos Using PHP

Kushal Magar — Sat, 09 Jul 2022 09:05:11 +0000

Video captions, often referred to as subtitles, are more important than ever. Not only do they assist hearing impaired
users but some estimates claim that up to 80% of videos online are watched on mute or with the volume disabled. To
learn more, check out our captions and subtitles guide.

Prerequisites

Shotstack API

Shotstack.io provides a video-editing API which that makes it easy to programmatically edit videos. The Shotstack PHP API enables you to automatically apply text and titles to a video with just a few lines of code. Using this feature and a simple SRT file you can create applications, scripts and workflows that will automatically transcribe your videos and add captions or subtitles. Sign up for the free developer account to get started.

PHP

PHP (>= 7.2) is a powerful general purpose scripting language. We'll be using PHP to edit the video.

Git

Basic understanding of using git and version control system.

For this guide we already have our SRT file available, but if you are looking at creating SRT files based on your own videos you should take a look at some of our other articles on how you can to use AWS Transcribe to generate audio transcriptions and convert these transcriptions to SRT files.

Using the PHP SDK to apply subtitles to your videos

For this demo we will be using PHP, the Shotstack PHP video editor library (SDK) and a video and
SRT file from our Test Media GitHub project. Technically
speaking we are adding captions, but the exact same code would be used to add subtitles.

This is the source video we will apply captions to:

Setup

For this guide we'll use an existing PHP script from the Shotstack PHP demos project which is open source and publicly
available on GitHub.

Checkout the shotstack/php-demos project:

git clone https://github.com/shotstack/php-demos.git

Install dependencies including the Shotstack SDK and SRT Parser library:

composer install

Set your API key as an environment variable (Linux/Mac):

export SHOTSTACK_KEY=your_key_here

or, if using Windows:

set SHOTSTACK_KEY=your_key_here

Replace your_key_here with your provided API key.

PHP video captions script

Open the file examples/captions.php
from the php-demos project. This script loads our video and applies the captions. Below we walk through how the script
automatically adds captions to a video.

Adding the video file

The video asset is used to load videos and add them to our
edit. In this example we use the URL of our video on GitHub.

$videoAsset = new VideoAsset();
$videoAsset
    ->setSrc('https://github.com/shotstack/test-media/raw/main/captioning/scott-ko.mp4')
    ->setVolume(1);

A clip is a container for an asset, i.e. a title, image or video.
In this example we will use our video asset with our GitHub video. We set the length to the duration of the video
(25.85 seconds) and the start to 0 so it starts playing straight away.

$videoClip = new Clip();
$videoClip
    ->setAsset($videoAsset)
    ->setLength(25.85)
    ->setStart(0);

Adding the captions

Next, we'll need to load the SRT file and add the captions. For this, we use the SRT Parser
library.

$parser = new Parser();
$parser->loadFile(__DIR__ . '/assets/transcript.srt');
$captions = $parser->parse();


 returns an array of captions, so we're going to iterate over this array to process the items. Each caption
entry will be converted to a [title asset](/docs/api/#tocs_titleasset) and added to a 
clip.

We set the font style, background and position of the text to make it look like captions and also use the PHP 
`wordwrap` function to make sure our text stays on screen. We also use some basic maths from the timestamps returned in 
the parser to calculate when to start and stop displaying the subtitle.



```php
foreach ($captions as $index => $caption) {
    $captionAsset = new TitleAsset();
    $captionAsset
        ->setText(wordwrap($caption->text, 80, "\n"))
        ->setStyle('subtitle')
        ->setBackground('#000000')
        ->setPosition('bottom')
        ->setOffset((new Offset)->setY(-0.4))
        ->setSize('small');

    $clip = new Clip();
    $clip
        ->setAsset($captionAsset)
        ->setLength($caption->endTime - ($caption->startTime + 0.1) )
        ->setStart($caption->startTime);

    $clips[] = $clip;
}

Adding the clips to a timeline

Shotstack API uses a timeline, which represents the
contents of a video edit over time, in seconds, and tracks
which allow us to layer clips over one another.

We'll now combine the initial video asset, with the clips generated from the SRT files, and use tracks to layer them on
top of the video. $track1 contains the subtitle clips and $track2 is the background video.

$track1 = new Track();
$track1
    ->setClips($clips);

$track2 = new Track();
$track2
    ->setClips([$videoClip]);

$timeline = new Timeline();
$timeline
    ->setTracks([$track1,$track2]);

Configure the output

Finally we configure the output format and add the timeline and
output to create an Edit.

$output = new Output();
$output
    ->setFormat('mp4')
    ->setResolution('sd');

$edit = new Edit();
$edit
    ->setTimeline($timeline)
    ->setOutput($output);

Sending the edit to the Shotstack API

The final step in our script is to send the data to the API for processing. The Shotstack SDK takes care of converting
our PHP objects to JSON, adding our key to the request header and sending everything to the API.

try {
    $response = $client->postRender($edit)->getResponse();
} catch (Exception $e) {
    print_r($e->getMessage());
    die('Request failed: ' . $e->getMessage());
}

Running the script

To run the script use the php command from the root folder of the project:

php examples/captions.php

If the render request is successful, the API will return the render id we can use to retrieve the status of the render.

For this, you can run a different script included in our sample repo:

php examples/status.php {renderId}

Replace {renderId} with the ID returned from the first step.

Depending on the progress of the video render, the output will be one of:

>> Video URL: <url to download your file>

>> Something went wrong, rendering has terminated and will not continue.

>> Rendering in progress, please try again shortly.
>> Note: Rendering may take up to 1 minute to complete.

Re-run the status.php script every 4-5 seconds until either a video URL is returned or there is an error message.

The final result

After about 30 seconds, the video should be rendered with the captions rendered in to the video, as shown below:

Building an automated subtitle video app using PHP

You can use this example as a starting point to build out an automated subtitle or caption application or create a
workflow to generate and add captions to your videos.

Combine the Shotstack API with the power of AI audio-to-text services such as
AWS Transcribe and you can quickly and easily add powerful, scalable, caption
functionality to your videos.

There are also AI translation services like AWS Translate which could be used to
add foreign subtitles automatically to a video.

The possibilities of what you can do with the Shotstack video editing API are many, captions
and subtitles are just one of the use cases. I hope this article inspires you to explore the API and see what you can
build.

Follow Shotstack to get similar articles about programmable videos and applications. Start with our learn resources to learn to start programmable videos. Sign up for free to start building today!