Start typing to search...

UI.capture

Captures user input on the frontend of your Koji app.

Methods

.audio(options, verbose)

Prompts the user to select a sound by selecting from the available asset packs, by uploading a file, or by entering a URL. Use this method when you want to limit the user to selecting a sound.

To allow multiple types of media assets, see [[media]]. To allow upload of raw files of any type, see [[file]].

Parameters

  • options - CaptureAudioOptions, Configuration options for an [[audio]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the URL to the audio asset as a string.

Returns

Promise<CaptureResult>, URL to the audio asset as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const audio = await Koji.ui.capture.audio();

// Hide asset packs and return an object
const audio = await Koji.ui.capture.audio({ hideExtensions: true }, true);

Source: frontend/ui/capture/index.ts#L316

.color(options, verbose)

Prompts the user to select a color, either from a swatch or by entering a color code. Supports HEX, RGB, or HSL by default. Supports RBGA or HSLA, if transparency is enabled in the capture options.

Parameters

  • options - CaptureColorOptions, Configuration options for a [[color]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the color code as a string.

Returns

Promise<CaptureResult>, Color code as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const color = await Koji.ui.capture.color();

// Enable transparency and return an object
const color = await Koji.ui.capture.color({ allowAlpha: true }, true);

Source: frontend/ui/capture/index.ts#L375

.custom(options, verbose)

Prompts the user to select a value from a custom control. To build a custom control, use the {@doclink withkoji-custom-vcc-sdk | @withkoji/custom-vcc-sdk package}.

Parameters

  • options - CaptureCustomOptions, Configuration options for a [[custom]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the value captured by the custom control.

Returns

Promise<Any>, Color code as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const music = await Koji.ui.capture.custom({ name: 'scloud' });

Source: frontend/ui/capture/index.ts#L410

.file(options, verbose)

Prompts the user to upload a file of any type. Use this method to allow the user to upload raw files in their original format. For example, use this to capture high-resolution images for download rather than for display in a browser.

To apply automatic transcoding and transformations for specific file types, use the associated method. See [[image]], [[video]], [[audio]], or [[media]].

To provide a custom upload experience or to upload media created or captured during the app experience, use {@doclink core-frontend-ui-upload#uploadFile | Upload.uploadFile}.

Parameters

  • options - CaptureFileOptions, Configuration options for a [[file]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the URL to the file as a string.

Returns

Promise<CaptureResult>, URL to the file as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const file = await Koji.ui.capture.file();

// Return an object
const file = await Koji.ui.capture.file({}, true);

Source: frontend/ui/capture/index.ts#L458

.image(options, verbose)

Prompts the user to select an image by selecting from the available asset packs, by uploading a file, or by entering a URL. Use this method when you want to limit the user to selecting an image.

To allow multiple types of media assets, see [[media]]. To allow upload of raw files of any type, see [[file]].

Parameters

  • options - CaptureImageOptions, Configuration options for an [[image]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the URL to the image asset as a string.

Returns

Promise<CaptureResult>, URL to the image asset as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const image = await Koji.ui.capture.image();

// Hide asset packs and return an object
const image = await Koji.ui.capture.image({ hideExtensions: true }, true);

Source: frontend/ui/capture/index.ts#L516

Prompts the user to paste an external URL, create a new app, or select an existing app from their profile.

Parameters

  • options - CaptureLinkOptions, Configuration options for a [[link]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the URL as a string.

Returns

Promise<CaptureResult>, URL as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const link = await Koji.ui.capture.link();

// Return an object
const link = await Koji.ui.capture.link({}, true);

Source: frontend/ui/capture/index.ts#L575

.media(options, verbose)

Prompts the user to select an image, file, audio, or video by selecting from the available asset packs, by uploading a file, or by entering a URL. Use this method to allow the user to select from more than one type of media with a single control. For example, allow the user to select an image or a video. You can limit the types of media to allow and configure options for each allowed type.

Parameters

  • options - CaptureMediaOptions, Configuration options for a [[media]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns only the value of the media capture.

Returns

Promise<CaptureResult>, Value of the media capture, which is either the URL to the media as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const media = await Koji.ui.capture.media();

// Limit to image or video, hide asset packs,
// return an object with extended metadata, transcode videos for HLS
const media = await Koji.ui.capture.media({
   acceptOnly: ['image', 'video'],
   hideExtensions: true,
   videoOptions: { hls: true }
 }, true);

Source: frontend/ui/capture/index.ts#L616

.range(options, verbose)

Prompts the user to select a numeric value within a certain range. You can configure the minimum value, maximum value, and default increment, as well as an initial value for the control.

Parameters

  • options - CaptureRangeOptions, Configuration options for a [[range]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the numeric value as a string.

Returns

Promise<CaptureResult>, Numeric value as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const size = await Koji.ui.capture.range();

// Return an object
const size = await Koji.ui.capture.range({ min: 0, max: 60, step: 3 }, true);

Source: frontend/ui/capture/index.ts#L672

.select(options, verbose)

Prompts the user to select from a predefined list of options.

Parameters

  • options - CaptureSelectOptions, Configuration options for a [[select]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the option as a string.

Returns

Promise<CaptureResult>, Value of the predefined option as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const option = await Koji.ui.capture.select();

// Select from three options
const option = await Koji.ui.capture.select(
 { options: [
   { value: "one", label: "Option one" },
   { value: "two", label: "Option two" },
   { value: "three", label: "Option three" }],
   placeholder: "Choose an option"});

Source: frontend/ui/capture/index.ts#L715

.video(options, verbose)

Prompts the user to upload a video. Use this method when you want to limit the user to uploading a video file.

To allow multiple types of media assets, see [[media]]. To allow upload of raw files of any type, see [[file]].

Parameters

  • options - CaptureVideoOptions, Configuration options for a [[video]] capture.

  • verbose - Boolean (Optional), Indicates whether to return additional metadata about the capture event. If `false` or not specified, returns the URL to the video asset as a string.

Returns

Promise<CaptureResult>, URL to the video asset as a string or the [[VerboseCapture]] object, if `verbose` is `true`.

Example

const video = await Koji.ui.capture.video();

// Transcode for HLS and return an object
const video = await Koji.ui.capture.video({ hls: true }, true);

Source: frontend/ui/capture/index.ts#L755

Enums

CaptureStatus

Whether the user completed the selection (`succeeded`) or exited the control without selecting a value (`cancelled`).

Possible values

  • CANCELLED = 'cancelled'
  • SUCCEEDED = 'succeeded'

CaptureType

Capture method types.

Possible values

  • COLOR = 'color'
  • FILE = 'file'
  • IMAGE = 'image'
  • LINK = 'link'
  • MEDIA = 'media'
  • RANGE = 'range'
  • SELECT = 'select'
  • SOUND = 'audio'
  • VIDEO = 'video'

Interfaces

AudioMetadata

Metadata for an audio file.

Properties

  • durationSeconds - Number, Duration in seconds for an audio file.

CaptureAudioOptions

Configuration options for an [[audio]] capture.

Properties

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium audios).

CaptureColorOptions

Configuration options for a [[color]] capture.

Properties

  • allowAlpha - Boolean (Optional), Indicates whether to support transparency (`false`, by default).

  • initialValue - String (Optional), Default value for the color capture control.

CaptureCustomOptions

Configuration options for a [[custom]] capture.

Properties

  • appId - String (Optional), App ID of the custom control.

  • name - String (Optional), Short name for the custom control. (to be depreciated)

  • typeOptions - Any (Optional), Type options specific to the custom control.

  • url - String (Optional), URL where the custom control is hosted. (to be depreciated)

CaptureFileOptions

Configuration options for a [[file]] capture.

CaptureImageOptions

Configuration options for an [[image]] capture.

Properties

  • auto - 'webp' (Optional), Enables image optimizations based on content negotiation.

    For more information, see the [[https://developer.fastly.com/reference/io/auto | Fastly auto reference]].

    Note
    Although the WebP format produces images at a higher compression ratio with a lower loss of quality, it is not supported in all browsers.
  • bg-color - String (Optional), Sets the background color to use when applying padding or when replacing transparent pixels in the image.

    The value can be in HEX 3- and 6-digit format (for example, a22 or cf23a5), RGB format (for example, 255,0,0), or RGBA format (for example, 0,255,0,0.5).

    For more information, see the [[https://developer.fastly.com/reference/io/bg-color | Fastly bg-color reference]].

  • blur - String (Optional), Applies a Gaussian blur filter to the image.

    The value can be a number of pixels between 0.5 and 1000 (for example, 50), or a percentage followed by p (for example, 1p for 1%).

    For more information, see the [[https://developer.fastly.com/reference/io/blur | Fastly blur reference]].

  • brightness - String (Optional), Increases or decreases the brightness of the image.

    The value can be a number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • 100 – Results in a fully white image.

    • -100 – Results in a fully black image.

    For more information, see the [[https://developer.fastly.com/reference/io/brightness | Fastly brightness reference]].

  • contrast - String (Optional), Increases or decreases the difference between the darkest and lightest tones in the image.

    The value can be a number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • -100 – Results in a fully grey image.

    For more information, see the [[https://developer.fastly.com/reference/io/contrast | Fastly contrast reference]].

  • crop - String (Optional), Removes pixels from an image.

    The value starts with the desired width and height of the final image. The rest of the value determines the position of the cropped region within the existing image. For example: 150,100,x50,y50 crops the image to 150px by 100px and selects the starting sub region x coordinate to be 50px and the y coordinate to be 50px. 16:9 crops the image to an aspect ratio of 16:9.

    For more information, see the [[https://developer.fastly.com/reference/io/crop | Fastly crop reference]].

  • dpr - String (Optional), Serves correctly sized images for devices that expose a device pixel ratio.

    The value can be any number between 1 and 10.

    For more information, see the [[https://developer.fastly.com/reference/io/dpr | Fastly dpr reference]].

  • fit - 'bounds' | 'cover' | 'crop' (Optional), Controls how the image will be constrained within the provided size (width and height) values to maintain the correct proportions.

    For more information, see the [[https://developer.fastly.com/reference/io/fit | Fastly fit reference]].

  • format - 'webp' | 'gif' | 'png' | 'png8' | 'jpg' | 'pjpg' | 'bjpg' | 'webpll' | 'webply' | 'mp4' (Optional), Converts the image to the specified encoded format.

    For more information, see the [[https://developer.fastly.com/reference/io/format | Fastly format reference]].

  • frame - '1' (Optional), Extracts the first frame from an animated image sequence.

    For more information, see the [[https://developer.fastly.com/reference/io/frame | Fastly frame reference]].

  • height - String (Optional), Resizes the height of the image based on pixels or percent.

    For absolute heights, set an integer number of pixels. For relative heights (percent), set a value between 0 and 1 or a value between 0 and 100 followed by p (for example, 0.5 or 50p for 50 percent).

    For more information, see the [[https://developer.fastly.com/reference/io/height | Fastly height reference]].

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium images).

  • optimize - 'low' | 'medium' | 'high' (Optional), Applies optimal quality compression to produce an output image with as much visual fidelity as possible, while minimizing the file size.

    For more information, see the [[https://developer.fastly.com/reference/io/optimize | Fastly optimize reference]].

  • orient - '1' | 'r' | 'l' | 'h' | 'v' | 'hv' | '2' | '3' | '4' | '5' | '6' | '7' | '8' (Optional), Changes the cardinal orientation of the image.

    The value can orient the image right or left, flip it horizontally, flip it vertically, or apply a combination of these options.

    For more information, see the [[https://developer.fastly.com/reference/io/orient | Fastly orient reference]].

  • pad - String (Optional), Adds pixels to the edge of an image.

    For more information, see the [[https://developer.fastly.com/reference/io/pad | Fastly pad reference]].

  • precrop - String (Optional), Removes pixels from an image before any other transformations occur.

    The value is specified in the same way as crop, except that precrop is performed before any other transformations.

    For more information, see the [[https://developer.fastly.com/reference/io/precrop | Fastly precrop reference]].

  • quality - String (Optional), Optimizes the image to the given compression level for lossy file formatted images.

    The value can be any integer between 1 and 100, where 1 is a lower quality image and a smaller file and 100 is the highest quality image and larger file. An optional second quality level can be specified for use when auto=webp is enabled and a WebP output format has been selected.

    For more information, see the [[https://developer.fastly.com/reference/io/quality | Fastly quality reference]].

  • resize-filter - 'nearest' | 'linear' | 'cubic' | 'lanczos2' | 'lanczos3' (Optional), Controls the filter used to resize an image to a higher or lower number of pixels.

    For more information, see the [[https://developer.fastly.com/reference/io/resize-filter | Fastly resize-filter reference]].

  • saturation - String (Optional), Sets the intensity of the colors in the image.

    The value can be any number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • -100 – Generates a grayscale image.

    For more information, see the [[https://developer.fastly.com/reference/io/saturation | Fastly saturation reference]].

  • sharpen - String (Optional), Increases the definition of the edges of objects in the image.

    The value specifies the amount, radius, and threshold for an unsharp mask (for example, a5,r2,t0).

    For more information, see the [[https://developer.fastly.com/reference/io/sharpen | Fastly sharpen reference]].

  • trim - String (Optional), Removes pixels from the edge of the image.

    The value can be specified in pixels or percent. For example: 25,50,75,100 trims the top edge 25px, right edge 50px, bottom edge 75px, and left edge 100px. 0.25 trims all edges by 25 percent.

    For more information, see the [[https://developer.fastly.com/reference/io/trim | Fastly trim reference]].

  • width - String (Optional), Resizes the width of the image based on pixels or percent.

    For absolute widths, set an integer number of pixels between 1 and 8192. For relative widths (percent), set a value between 0 and 1 or a value between 0 and 100 followed by p (for example, 0.5 or 50p for 50 percent).

    For more information, see the [[https://developer.fastly.com/reference/io/width | Fastly width reference]].

CaptureLinkOptions

Configuration options for a [[link]] capture.

Properties

  • disableExternalLinks - Boolean (Optional), Whether to prevent users from pasting an external link. If `true`, users can select only one of their Koji apps.

  • kojiTemplateId - String (Optional), App Store ID of a Koji app. Include this value to enable the user to create a new Koji from the link control.

CaptureMediaOptions

Configuration options for a [[media]] capture.

Properties

  • acceptOnly - CaptureMediaAcceptOnly[] (Optional), Specifies the types of media files to allow. If empty or not specified, any type of file is allowed.

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium media files).

  • imageOptions - CaptureImageOptions (Optional), Specifies the configuration options for image files.

  • videoOptions - CaptureVideoOptions (Optional), Specifies the configuration options for video files.

CaptureRangeOptions

Configuration options for a [[range]] capture.

Properties

  • initialValue - Number (Optional), Default value for the range capture control.

  • max - Number (Optional), Maximum value. Default is `100`.

  • min - Number (Optional), Minimum value. Default is `0`.

  • step - Number (Optional), Default increment/step size. Default is `1`.

CaptureSelectOptions

Configuration options for a [[select]] capture.

Properties

  • initialValue - String (Optional), Default value for the select capture control.

  • options - SelectOption[] (Optional), List of predefined options.

  • placeholder - String (Optional), Description of the selection for users.

CaptureVideoOptions

Configuration options for a [[video]] capture.

Properties

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium videos).

  • hls - Boolean (Optional), Enables HTTP Live Streaming (HLS) for delivery of longer content. When enabled, uploaded videos are transcoded for HLS and return an m3u8 playlist. Use this feature in conjunction with [[https://github.com/video-dev/hls.js/ | hls.js]] for controlling playback.

  • remux - Boolean (Optional), Remuxes video files constructed from getUserMedia MediaStreams, which ensures these files contain correct duration headers before they are delivered.

  • remuxPreset - RemuxPreset (Optional), Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.

  • watermark - Watermark (Optional), Applies a watermark to the uploaded image. Available only with HLS transcoding.

ExtendedLinkResult

Extended metadata for a [[link]] capture.

Properties

  • description - String, Sharing metadata description (`og:description`) of the content at the URL, if available.

  • sourceName - String, If the resource is a Koji app, the app’s name, if available.

  • sourceThumbnailUrl - String, If the resource is a Koji app, the URL of the Koji app’s thumbnail image, if available.

  • thumbnailUrl - String, Sharing metadata image (`og:image`) of the content at the URL, if available.

  • title - String, Sharing metadata title (`og:title`) of the content at the URL, if available.

  • url - String, Full URL of the selected Koji or pasted link resource.

ExtendedMediaResult

Extended metadata for a [[media]] capture.

Properties

  • audioMetadata - AudioMetadata (Optional), Metadata for an audio file.

  • imageMetadata - ImageMetadata (Optional), Metadata for an image file.

  • sizeBytes - String (Optional), Size in bytes of the media file.

  • type - String (Optional), Type of media: `image`, `video`, `audio`, or `file`.

  • url - String (Optional), URL of the selected media file.

  • videoMetadata - VideoMetadata (Optional), Metadata for a video file.

ImageMetadata

Metadata for an image file.

Properties

  • naturalHeight - Number, Natural height of the image in pixels.

  • naturalWidth - Number, Natural width of the image in pixels.

SelectOption

One of the predefined options for a [[select]] capture.

Properties

  • label - String, Description of the option for users.

  • value - String, Value to return if the option is selected.

VerboseCapture

Extended result of a user input capture.

Properties

  • captureStatus - CaptureStatus, Whether the user completed the selection (`succeeded`) or exited the control without selecting a value (`cancelled`).

  • captureType - CaptureType, Capture method type (for example, `color` or `file`).

  • result - String | Number | null (Optional), Value captured from the user.

  • resultMetadata - ExtendedMediaResult | ExtendedLinkResult | null (Optional), Metadata associated with the captured result.

VideoMetadata

Metadata for a video file.

Properties

  • thumbnailUrl - String, URL for the video thumbnail.

RemuxPreset

Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.

Properties

  • aspectRatio - '16:9' | '9:16' | '4:5' | '1:1' | 'passthrough', Desired aspect ratio.

  • sizePolicy - 'fill' | 'fit', How the image will be constrained within the provided size.

Watermark

Applies a watermark to the uploaded image. Available only with HLS transcoding.

Properties

  • type - 'creatorProfileUrl', Type of the watermark. `creatorProfileUrl` watermarks the image with `koji.to/@creatorUsername`.

AudioMetadata

Metadata for an audio file.

Properties

  • durationSeconds - Number, Duration in seconds for an audio file.

CaptureImageOptions

Configuration options for an [[image]] capture.

Properties

  • auto - 'webp' (Optional), Enables image optimizations based on content negotiation.

    For more information, see the [[https://developer.fastly.com/reference/io/auto | Fastly auto reference]].

    Note
    Although the WebP format produces images at a higher compression ratio with a lower loss of quality, it is not supported in all browsers.
  • bg-color - String (Optional), Sets the background color to use when applying padding or when replacing transparent pixels in the image.

    The value can be in HEX 3- and 6-digit format (for example, a22 or cf23a5), RGB format (for example, 255,0,0), or RGBA format (for example, 0,255,0,0.5).

    For more information, see the [[https://developer.fastly.com/reference/io/bg-color | Fastly bg-color reference]].

  • blur - String (Optional), Applies a Gaussian blur filter to the image.

    The value can be a number of pixels between 0.5 and 1000 (for example, 50), or a percentage followed by p (for example, 1p for 1%).

    For more information, see the [[https://developer.fastly.com/reference/io/blur | Fastly blur reference]].

  • brightness - String (Optional), Increases or decreases the brightness of the image.

    The value can be a number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • 100 – Results in a fully white image.

    • -100 – Results in a fully black image.

    For more information, see the [[https://developer.fastly.com/reference/io/brightness | Fastly brightness reference]].

  • contrast - String (Optional), Increases or decreases the difference between the darkest and lightest tones in the image.

    The value can be a number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • -100 – Results in a fully grey image.

    For more information, see the [[https://developer.fastly.com/reference/io/contrast | Fastly contrast reference]].

  • crop - String (Optional), Removes pixels from an image.

    The value starts with the desired width and height of the final image. The rest of the value determines the position of the cropped region within the existing image. For example: 150,100,x50,y50 crops the image to 150px by 100px and selects the starting sub region x coordinate to be 50px and the y coordinate to be 50px. 16:9 crops the image to an aspect ratio of 16:9.

    For more information, see the [[https://developer.fastly.com/reference/io/crop | Fastly crop reference]].

  • dpr - String (Optional), Serves correctly sized images for devices that expose a device pixel ratio.

    The value can be any number between 1 and 10.

    For more information, see the [[https://developer.fastly.com/reference/io/dpr | Fastly dpr reference]].

  • fit - 'bounds' | 'cover' | 'crop' (Optional), Controls how the image will be constrained within the provided size (width and height) values to maintain the correct proportions.

    For more information, see the [[https://developer.fastly.com/reference/io/fit | Fastly fit reference]].

  • format - 'webp' | 'gif' | 'png' | 'png8' | 'jpg' | 'pjpg' | 'bjpg' | 'webpll' | 'webply' | 'mp4' (Optional), Converts the image to the specified encoded format.

    For more information, see the [[https://developer.fastly.com/reference/io/format | Fastly format reference]].

  • frame - '1' (Optional), Extracts the first frame from an animated image sequence.

    For more information, see the [[https://developer.fastly.com/reference/io/frame | Fastly frame reference]].

  • height - String (Optional), Resizes the height of the image based on pixels or percent.

    For absolute heights, set an integer number of pixels. For relative heights (percent), set a value between 0 and 1 or a value between 0 and 100 followed by p (for example, 0.5 or 50p for 50 percent).

    For more information, see the [[https://developer.fastly.com/reference/io/height | Fastly height reference]].

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium images).

  • optimize - 'low' | 'medium' | 'high' (Optional), Applies optimal quality compression to produce an output image with as much visual fidelity as possible, while minimizing the file size.

    For more information, see the [[https://developer.fastly.com/reference/io/optimize | Fastly optimize reference]].

  • orient - '1' | 'r' | 'l' | 'h' | 'v' | 'hv' | '2' | '3' | '4' | '5' | '6' | '7' | '8' (Optional), Changes the cardinal orientation of the image.

    The value can orient the image right or left, flip it horizontally, flip it vertically, or apply a combination of these options.

    For more information, see the [[https://developer.fastly.com/reference/io/orient | Fastly orient reference]].

  • pad - String (Optional), Adds pixels to the edge of an image.

    For more information, see the [[https://developer.fastly.com/reference/io/pad | Fastly pad reference]].

  • precrop - String (Optional), Removes pixels from an image before any other transformations occur.

    The value is specified in the same way as crop, except that precrop is performed before any other transformations.

    For more information, see the [[https://developer.fastly.com/reference/io/precrop | Fastly precrop reference]].

  • quality - String (Optional), Optimizes the image to the given compression level for lossy file formatted images.

    The value can be any integer between 1 and 100, where 1 is a lower quality image and a smaller file and 100 is the highest quality image and larger file. An optional second quality level can be specified for use when auto=webp is enabled and a WebP output format has been selected.

    For more information, see the [[https://developer.fastly.com/reference/io/quality | Fastly quality reference]].

  • resize-filter - 'nearest' | 'linear' | 'cubic' | 'lanczos2' | 'lanczos3' (Optional), Controls the filter used to resize an image to a higher or lower number of pixels.

    For more information, see the [[https://developer.fastly.com/reference/io/resize-filter | Fastly resize-filter reference]].

  • saturation - String (Optional), Sets the intensity of the colors in the image.

    The value can be any number between -100 and 100, as follows:

    • 0 (default) – Leaves the image unchanged.

    • -100 – Generates a grayscale image.

    For more information, see the [[https://developer.fastly.com/reference/io/saturation | Fastly saturation reference]].

  • sharpen - String (Optional), Increases the definition of the edges of objects in the image.

    The value specifies the amount, radius, and threshold for an unsharp mask (for example, a5,r2,t0).

    For more information, see the [[https://developer.fastly.com/reference/io/sharpen | Fastly sharpen reference]].

  • trim - String (Optional), Removes pixels from the edge of the image.

    The value can be specified in pixels or percent. For example: 25,50,75,100 trims the top edge 25px, right edge 50px, bottom edge 75px, and left edge 100px. 0.25 trims all edges by 25 percent.

    For more information, see the [[https://developer.fastly.com/reference/io/trim | Fastly trim reference]].

  • width - String (Optional), Resizes the width of the image based on pixels or percent.

    For absolute widths, set an integer number of pixels between 1 and 8192. For relative widths (percent), set a value between 0 and 1 or a value between 0 and 100 followed by p (for example, 0.5 or 50p for 50 percent).

    For more information, see the [[https://developer.fastly.com/reference/io/width | Fastly width reference]].

CaptureVideoOptions

Configuration options for a [[video]] capture.

Properties

  • hideExtensions - Boolean (Optional), Whether to hide all asset packs and VCC extensions. Enable this option in cases where they do not make sense (for example, Koji apps that sell premium videos).

  • hls - Boolean (Optional), Enables HTTP Live Streaming (HLS) for delivery of longer content. When enabled, uploaded videos are transcoded for HLS and return an m3u8 playlist. Use this feature in conjunction with [[https://github.com/video-dev/hls.js/ | hls.js]] for controlling playback.

  • remux - Boolean (Optional), Remuxes video files constructed from getUserMedia MediaStreams, which ensures these files contain correct duration headers before they are delivered.

  • remuxPreset - RemuxPreset (Optional), Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.

  • watermark - Watermark (Optional), Applies a watermark to the uploaded image. Available only with HLS transcoding.

ExtendedLinkResult

Extended metadata for a [[link]] capture.

Properties

  • description - String, Sharing metadata description (`og:description`) of the content at the URL, if available.

  • sourceName - String, If the resource is a Koji app, the app’s name, if available.

  • sourceThumbnailUrl - String, If the resource is a Koji app, the URL of the Koji app’s thumbnail image, if available.

  • thumbnailUrl - String, Sharing metadata image (`og:image`) of the content at the URL, if available.

  • title - String, Sharing metadata title (`og:title`) of the content at the URL, if available.

  • url - String, Full URL of the selected Koji or pasted link resource.

ExtendedMediaResult

Extended metadata for a [[media]] capture.

Properties

  • audioMetadata - AudioMetadata (Optional), Metadata for an audio file.

  • imageMetadata - ImageMetadata (Optional), Metadata for an image file.

  • sizeBytes - String (Optional), Size in bytes of the media file.

  • type - String (Optional), Type of media: `image`, `video`, `audio`, or `file`.

  • url - String (Optional), URL of the selected media file.

  • videoMetadata - VideoMetadata (Optional), Metadata for a video file.

ImageMetadata

Metadata for an image file.

Properties

  • naturalHeight - Number, Natural height of the image in pixels.

  • naturalWidth - Number, Natural width of the image in pixels.

SelectOption

One of the predefined options for a [[select]] capture.

Properties

  • label - String, Description of the option for users.

  • value - String, Value to return if the option is selected.

VideoMetadata

Metadata for a video file.

Properties

  • thumbnailUrl - String, URL for the video thumbnail.

RemuxPreset

Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.

Properties

  • aspectRatio - '16:9' | '9:16' | '4:5' | '1:1' | 'passthrough', Desired aspect ratio.

  • sizePolicy - 'fill' | 'fit', How the image will be constrained within the provided size.

Watermark

Applies a watermark to the uploaded image. Available only with HLS transcoding.

Properties

  • type - 'creatorProfileUrl', Type of the watermark. `creatorProfileUrl` watermarks the image with `koji.to/@creatorUsername`.

Type aliases

CaptureMediaAcceptOnly

Types of files to allow for a [[media]] capture. The [[CaptureMediaOptions | configuration options]] vary by media type.

Possible values

  • 'image'
  • 'video'
  • 'audio'
  • 'file'

CaptureResult

Result of a user input capture.

Possible values