Create Timeline with Shotstack API on New Clip By Streamer from Twitch API

Pipedream makes it easy to connect APIs for Shotstack, Twitch and 2,400+ other apps remarkably fast.

Trigger workflow on

New Clip By Streamer from the Twitch API

Next, do this

Create Timeline with the Shotstack API

No credit card required

▶

Watch us build a workflow

8 min

Watch now ➜

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a Twitch trigger and Shotstack action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Clip By Streamer trigger
1. Connect your Twitch account
2. Configure timer
3. Configure Streamer
4. Configure Max Items
Configure the Create Timeline action
1. Connect your Shotstack account
2. Configure How Many Tracks?
3. Optional- Configure Soundtrack Source
4. Optional- Select a Soundtrack Effect
5. Optional- Configure Background
6. Optional- Configure Fonts
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

New Clip By Streamer on Twitch

Description:Emit new event when there is a new clip for the specified streamer.

Version:0.1.2

Key:twitch-new-clip-by-streamer

View on GitHub

Twitch Overview#

The Twitch API unlocks a world of possibilities for engaging with live streaming communities and understanding audience behaviors. With Pipedream, you can harness this API to automate many aspects of Twitch interaction and analysis. From tracking stream stats to automating chat messages, the Twitch API lets you create workflows that interact with Twitch's vast live streaming ecosystem. Pipedream's serverless platform streamlines these tasks, making it simple to connect Twitch with other services for enhanced functionalities.

Trigger Code#

import common from "../common-polling.mjs";
import twitch from "../../twitch.app.mjs";

export default {
  ...common,
  name: "New Clip By Streamer",
  key: "twitch-new-clip-by-streamer",
  description: "Emit new event when there is a new clip for the specified streamer.",
  version: "0.1.2",
  type: "source",
  props: {
    ...common.props,
    streamer: {
      type: "string",
      label: "Streamer",
      description: "The name of the streamer to watch for new clips.",
    },
    max: {
      propDefinition: [
        twitch,
        "max",
      ],
    },
  },
  hooks: {
    async deploy() {
      // Fetching clips from yesterday
      const date = new Date();
      date.setDate(date.getDate() - 1);
      this.setLastEvent(date);

      console.log("Starting to fetch clips from yesterday");
      await this.fetchEvents();
    },
  },
  methods: {
    ...common.methods,
    getMeta({
      id,
      title,
      created_at: createdAt,
      creator_name: creatorName,
    }) {
      const ts = new Date(createdAt).getTime();
      return {
        id,
        summary: `${creatorName} - ${title}`,
        ts,
      };
    },
    async fetchEvents() {
      // Get streamer id
      const res = await this.twitch.getMultipleUsers({
        login: this.streamer,
      });
      if (!res.data.data || res.data.data.length == 0) {
        console.log(`No streamer found with the name "${this.streamer}"`);
        return;
      }

      const lastEvent = this.getLastEvent();
      const params = {
        broadcaster_id: res.data.data[0].id,
        started_at: lastEvent
          ? new Date(lastEvent)
          : new Date(),
      };

      const clips = await this.paginate(
        this.twitch.getClips.bind(this),
        params,
        this.max,
      );
      for await (const clip of clips) {
        this.$emit(clip, this.getMeta(clip));
      }

      this.setLastEvent(Date.now());
    },
  },
  async run() {
    await this.fetchEvents();
  },
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
Twitch	`twitch`	`app`	This component uses the Twitch app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
	`timer`	`$.interface.timer`
Streamer	`streamer`	`string`	The name of the streamer to watch for new clips.
Max Items	`max`	`integer`	The maximum number of items to return at one time. Streams are returned sorted by number of viewers, in descending order. Videos and Clips are returned sorted by publish date.

Trigger Authentication#

Twitch uses OAuth authentication. When you connect your Twitch account, Pipedream will open a popup window where you can sign into Twitch and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Twitch API.

Pipedream requests the following authorization scopes when you connect your account:

analytics:read:extensionsanalytics:read:gamesbits:readchannel:read:subscriptionsclips:edituser:edituser:edit:broadcastuser:read:broadcastuser:read:emailuser:read:followsuser:read:blocked_usersuser:manage:blocked_usersmoderator:read:followerschannel:read:editorschannel:manage:videosuser:read:subscriptions

About Twitch#

Twitch is an interactive livestreaming service for content spanning gaming, entertainment, sports, music, and more.

Action#

Create Timeline on Shotstack

Description:Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).

Version:0.0.1

Key:shotstack-create-timeline

View on GitHub

Shotstack Overview#

The Shotstack API is a video editing platform that allows you to automate the creation and production of videos. With it, you can edit clips, add transitions, overlays, and backgrounds, and even include music in your videos. Integrating Shotstack with Pipedream can supercharge your workflow by automating the video creation process. You can trigger video edits in response to various events, manage assets, or even kick off rendering jobs based on data from other apps and services.

Action Code#

import app from "../../shotstack.app.mjs";
import constants from "../../common/constants.mjs";

const { SEP } = constants;

export default {
  key: "shotstack-create-timeline",
  name: "Create Timeline",
  description: "Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).",
  type: "action",
  version: "0.0.1",
  props: {
    app,
    howManyTracks: {
      type: "integer",
      label: "How Many Tracks?",
      description: "The number of tracks to create.",
      reloadProps: true,
      min: 1,
    },
    soundtrackSrc: {
      type: "string",
      label: "Soundtrack Source",
      description: "The URL of the soundtrack to use.",
      optional: true,
    },
    soundtrackEffect: {
      type: "string",
      label: "Soundtrack Effect",
      description: "The effect to apply to the soundtrack.",
      optional: true,
      options: Object.values(constants.SOUNDTRACK_EFFECT),
    },
    background: {
      type: "string",
      label: "Background",
      description: "A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).",
      optional: true,
    },
    fonts: {
      type: "string[]",
      label: "Fonts",
      description: "An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`",
      optional: true,
    },
  },
  methods: {
    getClip({
      start, length, type, src, text, html,
    }) {
      return {
        start,
        length,
        asset: {
          src,
          html,
          text,
          type,
        },
      };
    },
    getClips(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const clipAssetSrc = `${clipName}${SEP}src`;
        const clipAssetText = `${clipName}${SEP}text`;
        const clipAssetHtml = `${clipName}${SEP}html`;
        return this.getClip({
          start: this[clipAssetStart],
          length: this[clipAssetLength],
          type: assetType,
          src: this[clipAssetSrc],
          text: this[clipAssetText],
          html: this[clipAssetHtml],
        });
      });
    },
    getTracks(length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const trackNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
        const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
        const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
        const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
        const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
        const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
        return {
          clips: [
            ...this.getClips(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
          ],
        };
      });
    },
    getClipProps(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const description = `Track ${trackNumber} - ${assetType} clip ${clipNumber}.`;

        const commonProps = {
          [clipAssetStart]: {
            type: "integer",
            label: "Start",
            description: `${description} The start time of the asset`,
          },
          [clipAssetLength]: {
            type: "integer",
            label: "Length",
            description: `${description} The length of the asset.`,
          },
        };

        if (assetType === constants.ASSET_TYPE.TITLE) {
          return {
            ...commonProps,
            [`${clipName}${SEP}text`]: {
              type: "string",
              label: "Text",
              description: `${description} The text of the title.`,
            },
          };
        }

        if (assetType === constants.ASSET_TYPE.HTML) {
          return {
            ...commonProps,
            [`${clipName}${SEP}html`]: {
              type: "string",
              label: "HTML",
              description: `${description} The HTML of the asset.`,
            },
          };
        }

        return {
          ...commonProps,
          [`${clipName}${SEP}src`]: {
            type: "string",
            label: "Source",
            description: `${description} The source url of the asset.`,
          },
        };
      })
        .reduce((acc, next) => ({
          ...acc,
          ...next,
        }), {});
    },
  },
  additionalProps() {
    return Array.from({
      length: this.howManyTracks,
    }).reduce((acc, _, index) => {
      const trackNumber = index + 1;
      const trackName = `track${trackNumber}`;
      const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
      const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
      const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
      const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
      const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
      const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
      const commonDescription = `Track ${trackNumber}:`;

      return {
        ...acc,
        [trackHowManyVideoClips]: {
          type: "integer",
          label: "How Many Video Clips?",
          description: `${commonDescription} The number of video clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyImageClips]: {
          type: "integer",
          label: "How Many Image Clips?",
          description: `${commonDescription} The number of image clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyAudioClips]: {
          type: "integer",
          label: "How Many Audio Clips?",
          description: `${commonDescription} The number of audio clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyTitleClips]: {
          type: "integer",
          label: "How Many Title Clips?",
          description: `${commonDescription} The number of title clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyHtmlClips]: {
          type: "integer",
          label: "How Many HTML Clips?",
          description: `${commonDescription} The number of HTML clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyLumaClips]: {
          type: "integer",
          label: "How Many Luma Clips?",
          description: `${commonDescription} The number of luma clips to create.`,
          reloadProps: true,
          optional: true,
        },
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
      };
    }, {});
  },
  async run({ $: step }) {
    const {
      howManyTracks,
      soundtrackSrc,
      soundtrackEffect,
      background,
      fonts,
    } = this;

    const timeline = {
      soundtrack: {
        src: soundtrackSrc,
        effect: soundtrackEffect,
      },
      background,
      fonts: Array.isArray(fonts)
        ? fonts.map((src) => ({
          src,
        }))
        : fonts?.split(",").map((src) => ({
          src,
        })),
      tracks: this.getTracks(howManyTracks),
    };

    step.export("$summary", "Successfully created a timeline.");

    return timeline;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Shotstack	`app`	`app`	This component uses the Shotstack app.
How Many Tracks?	`howManyTracks`	`integer`	The number of tracks to create.
Soundtrack Source	`soundtrackSrc`	`string`	The URL of the soundtrack to use.
Soundtrack Effect	`soundtrackEffect`	`string`	Select a value from the drop down menu:`{ "label": "Fade volume in only", "value": "fadeIn" }{ "label": "Fade volume out only", "value": "fadeOut" }{ "label": "Fade volume in and out", "value": "fadeInFadeOut" }`
Background	`background`	`string`	A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).
Fonts	`fonts`	`string[]`	An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`

Create Timeline with Shotstack API on New Clip By Streamer from Twitch API

Pipedream makes it easy to connect APIs for Shotstack, Twitch and 2,400+ other apps remarkably fast.

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

1-24of2,400+apps by most popular

1
-
24
of
2,400+
apps by most popular