From Remote URL

VideoEditor SDK supports adding custom frames from a remote URL, this can be a resource hosted by a hosting provider or your servers. The frame tool is optimized for remote resources. This allows directly integrating a remote URL instead of downloading the asset before. For an example of how to download the remote resources in advance and use the local downloaded resources, see the font example.

Adding Frames#

Custom frames can be added by specifying them in the configuration.frame.items array. Each frame takes a unique identifier, a name, a relativeScale, an optional thumbnailUri as well as an optional layoutMode.

Image Groups#

To add the images for each frame tile, you can specify them inside the imageGroups property. Each frame consists of four groups corresponding to each side of the frame. In our example, we opt for the "horizontal inside" mode of arranging image tiles providing only a middle image for the left and right parts of the frame and a start, middle and end image for the top and bottom parts. Refer to the guide on frames for an in-depth explanation.

Image Modes#

By default, the midMode is set to FrameTileMode.repeat which repeats the middle image to fill out the entire space. For this example, it is set to FrameTileMode.stretch for all image groups to keep the correct pattern. In this mode, the middle image is stretched to fill out the entire space.


import 'package:catalog/models/code_example.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

class VideoFramesRemoteExample extends CodeExample {
  @override
  void invoke() async {
    // Add a video from the assets directory.
    final video = Video("assets/Skater.mp4");

    // For the sake of readability, the base URL of all remote URLs is
    // extracted in this example.
    const baseUrl = "https://img.ly/static/example-assets";

    // Create an [ImageGroupSet] to assign the local assets for
    // a custom frame.
    //
    // The frame tool is optimized for remote resources which allows to directly
    // integrate a remote URL instead of downloading the asset before. For an
    // example on how to download the remote resources in advance and use the local
    // downloaded resources, see: src/examples/text/addFonts/fromRemoteURL.
    //
    // By default the `midMode` is set to `FrameTileMode.REPEAT` which repeats
    // the middle image to fill out the entire space.
    // For this example it is set to `FrameTileMode.STRETCH` for all image groups
    // to keep the correct pattern. In this mode, the middle image is
    // stretched to fill out the entire space.
    final imageGroupSet = ImageGroupSet(
        top: FrameImageGroup("$baseUrl/imgly_frame_lowpoly_top.png",
            startUri: "$baseUrl/imgly_frame_lowpoly_top_left.png",
            endUri: "$baseUrl/imgly_frame_lowpoly_top_right.png",
            midMode: FrameTileMode.stretch
            ),
        left: FrameImageGroup("$baseUrl/imgly_frame_lowpoly_left.png",
            midMode: FrameTileMode.stretch
            ),
        right: FrameImageGroup("$baseUrl/imgly_frame_lowpoly_right.png",
            midMode: FrameTileMode.stretch
            ),
        bottom: FrameImageGroup("$baseUrl/imgly_frame_lowpoly_bottom.png",
            startUri: "$baseUrl/imgly_frame_lowpoly_bottom_left.png",
            endUri: "$baseUrl/imgly_frame_lowpoly_bottom_right.png",
            midMode: FrameTileMode.stretch
            ));

    // Create [FrameOptions] to customize the frame tool.
    final frameOptions = FrameOptions(items: [
      Frame("custom_frame", "Custom", imageGroupSet, 0.1,
          "$baseUrl/imgly_frame_lowpoly_thumbnail.png",
          layoutMode: FrameLayoutMode.horizontalInside)
    ]);

    // Create a [Configuration] instance.
    final configuration = Configuration(frame: frameOptions);
    try {
      // Open the video editor and handle the export as well as any occurring errors.
      final result =
          await VESDK.openEditor(video, configuration: configuration);

      if (result != null) {
        // The user exported a new video successfully and the newly generated video is located at `result.video`.
        print(result.video);
      } else {
        // The user tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the video.
      print(error);
    }
  }
}