Programmable Media Notes: Dec 27 2022

Cloudinary Programmable Media release notes are published periodically and give you a quick overview of all the new features, enhancements, and fixes that have been recently released for Cloudinary developers. When relevant, they may also give sneak previews of upcoming features and/or other important announcements.

New features

New navigation experience

The new, modern navigation experience for Programmable Media offers a user-friendly side menu with quick access to all Programmable Media functions.

If your Console isn't already using the new experience, you can enable it (opt in) now from the Account page of your Console Settings. Learn more.

Fetch for videos

You can now transform and deliver remote videos using fetch in the same way you fetch images. Learn more.

For example, here's a video fetched from wikimedia with some resize, rounding, and automatic format selection (f_auto) transformations applied:

New Vue3 and Flutter SDKs

Vue3 SDK

Use the new url-gen based @cloudinary/vue package to deliver your images and videos directly from your Vue 3.x IDE, including AdvancedImage and responsive methods. Learn more | Quick start.

Flutter SDK (Beta)

Try out our new Dart-based Flutter SDK (currently in Beta) to deliver great mobile image and video experiences using your existing Flutter framework, including a dedicated CldImageWidget that wraps Flutter's authenticated Image widget for easy and convenient integration into your apps. Learn more.

Video generation (Beta)

Using video generation, you can programmatically create videos at scale. You'll first create a flexible and reusable template in the form of a JSON-based manifest that defines tracks, clips, keyframes, durations, transitions, and other video elements. By including variables in your manifest template, you can generate and deliver many different video variations with different values for the above elements. You can generate a video using the new create_video endpoint or use the new fn_render parameter in your URL to generate videos on the fly. Learn more.

Image generation from 3D models

Use the new e_camera effect to set the camera position, zoom, lighting, exposure, and background environment, then take (generate) the perfect shot. Its combination with Texture Swapping to dress up surfaces with fabric, texture, color, or pattern, makes it a very powerful photorealism tool for building multi-variation product displays. Learn more.

For example:

cl_image_tag("docs/foyer-table", :effect=>"camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", :format=>"jpg")

// This code example is not currently available.

cl_image_tag("docs/foyer-table", array("effect"=>"camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", "format"=>"jpg"))

CloudinaryImage("docs/foyer-table").image(effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format="jpg")

cloudinary.image("docs/foyer-table", {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"})

cloudinary.url().transformation(new Transformation().effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).format("jpg").imageTag("docs/foyer-table");

// This code example is not currently available.

cloudinary.imageTag('docs/foyer-table', {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"}).toHtml();

$.cloudinary.image("docs/foyer-table", {effect: "camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4", format: "jpg"})

// This code example is not currently available.

<Image publicId="docs/foyer-table" format="jpg">
  <Transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4" />
</Image>

// This code example is not currently available.

<cld-image public-id="docs/foyer-table" format="jpg">
  <cld-transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4" />
</cld-image>

// This code example is not currently available.

<cl-image public-id="docs/foyer-table" format="jpg">
  <cl-transformation effect="camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).Format("jpg").BuildImageTag("docs/foyer-table")

imageView.cldSetImage(cloudinary.createUrl().setFormat("jpg").setTransformation(CLDTransformation().setEffect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).generate("docs/foyer-table")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().effect("camera:up_20;right_-30;zoom_1.1;env_pillars;exposure_1.4")).format("jpg").generate("docs/foyer-table");

// This code example is not currently available.

// This code example is not currently available.

// This code example is not currently available.

Remove backgrounds using on-the-fly transformations

Cloudinary's powerful background removal add-on can now be applied as an on-the-fly transformation: e_background_removal. For example:

https://res.cloudinary.com/demo/image/upload/e_background_removal/w_200/docs/dog_couch_orig

Learn more.

Original With background removal With an underlay background

e_background_removal also supports the fine edges and hints parameters, which can be used to ensure the best possible results when relevant characteristics or subjects of the image content are known in advance. For example: e_background_removal:fineedges_y;hints_(person;bird).

Automatic profile selection for HLS streaming

Let Cloudinary automatically determine and render the best streaming profile for your HLS adaptive bitrate videos by delivering them using sp_auto with m3u8 format. Learn more.

cloudinary_url("docs/waterfall.m3u8", :streaming_profile=>"auto", :resource_type=>"video")

(new VideoTag('docs/waterfall.m3u8'))
  ->transcode(Transcode::streamingProfile("auto"));

Cloudinary::cloudinary_url("docs/waterfall.m3u8", array("streaming_profile"=>"auto", "resource_type"=>"video"))

cloudinary.utils.cloudinary_url("docs/waterfall.m3u8", streaming_profile="auto", resource_type="video")

cloudinary.url("docs/waterfall.m3u8", {streaming_profile: "auto", resource_type: "video"})

cloudinary.url().transformation(new Transformation().streamingProfile("auto")).resourceType("video").generate("docs/waterfall.m3u8")

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/waterfall.m3u8").transcode(streamingProfile("auto"));

cloudinary.url('docs/waterfall.m3u8', {streamingProfile: "auto"}, {resource_type: 'video'});

$.cloudinary.url("docs/waterfall.m3u8", {streaming_profile: "auto", resource_type: "video"})

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/waterfall.m3u8").transcode(streamingProfile("auto"));

cloudinary.url('docs/waterfall.m3u8', {streamingProfile: "auto"}, {resource_type: 'video'});

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/waterfall.m3u8").transcode(streamingProfile("auto"));

cloudinary.url('docs/waterfall.m3u8', {streamingProfile: "auto"}, {resource_type: 'video'});

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("docs/waterfall.m3u8").transcode(streamingProfile("auto"));

cloudinary.url('docs/waterfall.m3u8', {streamingProfile: "auto"}, {resource_type: 'video'});

cloudinary.Api.UrlVideoUp.Transform(new Transformation().StreamingProfile("auto")).BuildUrl("docs/waterfall.m3u8")

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setStreamingProfile("auto")).generate("docs/waterfall.m3u8")

MediaManager.get().url().transformation(new Transformation().streamingProfile("auto")).resourceType("video").generate("docs/waterfall.m3u8");

cloudinary.video {
  publicId("docs/waterfall.m3u8")
   transcode(Transcode.streamingProfile("auto")) 
}.generate()

cloudinary.video('docs/waterfall.m3u8').transformation(Transformation()
  .transcode(Transcode.streamingProfile("auto")));

cloudinary.video('docs/waterfall.m3u8').transformation(Transformation()
  .transcode(Transcode.streamingProfile("auto")));

Create collage API

Use the new create_collage API to programmatically create image collages that combine assets you've already uploaded to Cloudinary. You can use pre-defined or custom templates to define spacing, colors, and composition. Learn more | Read blog post | Try the demo.

Sensitive data control

Enterprise customers can now restrict Cloudinary employee access to their data. When this option is enabled and Cloudinary employees access your account to provide support:

• They won't be able to view thumbnails or previews of your assets, the assets' public IDs or URLs, or the names of your folders & collections.
• They won't be able to perform asset searches or use the Bulk Delete UI and your API keys/secret values are obfuscated.

If a support engineer can't provide the level of support required without having access to the above, they will ask you to manually activate an option on your side that will allow temporary visibility for a specified time period.

To enable this feature for your Enterprise account, contact customer support or your Cloudinary Customer Success Manager.

Learn more.

Enhancements

File format enhancements

• Transparent animated AVIFs are now fully supported. That means you can convert your transparent animated GIFs to AVIF format using f_avif to maximize the load speed of your transparent animated images.
  For example: https://res.cloudinary.com/dxuiuruim/image/upload/f_avif/49Ers.gif

AI enhancements

• The Cloudinary Content Analysis add-on now supports content-aware cropping and automatic tagging based on objects from the Unidet model. This model combines several datasets, including Objects365, which focuses on diverse objects from nature. This new model also supports a large variety of new objects within categories such as furniture and indoor, food, human body, sports, accessories, and more. Learn more.

• You can now use automatic or face(s) gravity (g_auto / g_face(s)) or a content analysis add-on gravity (g_<model-object>) with the zoompan effect to zoom and pan on or between specific objects in your generated animation or video.

  For example, this zoompan transformation generates a video that zooms in on and pans from the detected hat to the detected pants of a clothing.jpg still image.

  Learn more.

New response fields

• Webhook notification responses now include a new notification_context section with the following entries:
  • triggered_at: A timestamp indicating when the operation was triggered. For example, for asynchronous uploads, the webhook response is sent when the request is complete, but you can use this value to check when the original upload was triggered.
  • triggered_by: Indicates which Console user email (for UI operations) or which API key (for code operations) triggered the operation.

New Transformation Builder options

• You can now change the order of actions in the Transformation Builder using drag & drop or up/down right-click options.
• You can now disable/re-enable parameters in the Transformation Builder instead of deleting and re-adding them. This can be helpful with debugging complex transformations and provides an easy way to see the impact of specific actions

Drag & Drop Show/Hide Params

Fixes

• When an asynchronous job is referred from an online request after an initial 423 (locked) response and a processing error occurs, the correct 4xx error code is now returned. (Previously, the 423 error was always returned.)
• In the Upgrade Plan credit card details form, the American Express logo and name is now displayed, making it more clear that Cloudinary accepts American Express in addition to MasterCard and Visa.

Coming soon

• New 'last updated' asset attributes and response schema: Cloudinary will begin storing data with every asset detailing the last date and time each of the following was updated: public ID, tags, contextual metadata, structured metadata, and access control settings. These fields will be added to the /resources and /search API responses.
• Programmatically define asset relationships: A new POST /resources/related_assets method will enable you to associate assets with each other and then retrieve those relationships to implement features in your app, such as recommending related products, showing events on a similar topic, offering to show a video related to a selected image, and more.
• Better background removal for cars: The Cloudinary AI Background Removal Add-on will soon include special handling for cars, including removing background content displayed through car windows.
• More automatic adaptive bitrate streaming features: You'll soon be able to enjoy several features when using sp_auto, including new seek-bar thubnails in the Cloudinary Video Player, support for HLS subtitles from webvtt files, video trimming, and adding image watermarks to videos.
• Usage reports: Account admins will be able to generate transformation, storage, and bandwidth, and cumulative usage reports at the product-environment (sub-account) level and export the generated data as CSV files.
• Granular API permissions: Enterprise accounts will soon have the option to request different API permissions for different API key/secret pairs, all the way down to the level of specific API endpoint methods. For example, one API key/secret could be set up to allow usage of all endpoints, but only the GET methods of those endpoints, another could be set to allow all methods, but for a specific set of endpoints, and another could be set to allow full access to all endpoints and methods.

Register for notifications

Make sure you always know when new release notes are published:

• Programmable Media release notes RSS feed: Grab this RSS link to watch for new Programmable Media release notes in your favorite RSS reader.

• Cloudinary Discord: Join the Cloudinary Discord server and keep an eye on the #release-notes channel. Our RSS feeds will automatically be pushed there whenever new release notes are published.