From Remote URL

VideoEditor SDK supports loading frames from a remote URL, this can be a resource hosted by a photo hosting provider or your servers.

Although the editor supports adding assets with remote URLs, we highly recommend that you manage the download of remote resources yourself, since this gives you more control over the whole process. In this example, we add a custom dynamic frame by directly passing the remote URLs in the configuration. For an example of how to download the remote resources in advance see the font example.

Dynamic frame#

Dynamic frames consist 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 dynamic frames for an in-depth explanation.

We create a dynamic frame using FrameAsset. It takes in a unique identifier (used for serialization/deserialization purposes), CustomPatchFrameAsset, and relative scale. A CustomPatchFrameAsset takes in the frame layout mode (HorizontalInside or VerticalInside), and the four image groups (top, left, right, bottom). The relative scale is used to describe how big the frame should be with respect to the video it will be applied to.

Add frame to `AssetConfig`#

To use the frame, it must first be available in the SDK's backend. This is done by adding the frame to the AssetConfig.

Configure `UiConfigFrame`#

Here, we configure UiConfigFrame and add the custom FrameItem to the frameList.


class VideoAddFramesFromRemoteURL(private val activity: AppCompatActivity) : Example(activity) {

    // Although the editor supports adding assets with remote URLs, we highly recommend
    // that you manage the download of remote resources yourself, since this
    // gives you more control over the whole process.
    // In this example, we directly pass the remote URLs in the configuration.
    override fun invoke() {
        // In this example, we do not need access to the Uri(s) after the editor is closed
        // so we pass false in the constructor
        val settingsList = VideoEditorSettingsList(false)
            // Set the source as the Uri of the video to be loaded
            .configure<LoadSettings> {
                it.source = activity.resourceUri(R.raw.skater)
            }

        // Create a custom dynamic frame
        // A dynamic FrameAsset takes in a unique identifier (used for serialization/deserialization purposes), CustomPatchFrameAsset, and relative scale
        // A CustomPatchFrameAsset takes in the frame layout mode (HorizontalInside or VerticalInside), and the four image groups (top, left, right, bottom)
        // The relative scale is used to describe how big the frame should be in relation to the video it will be applied to
        val customDynamicFrame = FrameAsset(
            "custom_dynamic_frame",
            CustomPatchFrameAsset(
                FrameLayoutMode.HorizontalInside,
                FrameImageGroup(
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_top_left.png")),
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_top.png")),
                    FrameTileMode.Stretch,
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_top_right.png"))
                ),
                FrameImageGroup(
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_left.png")),
                    FrameTileMode.Repeat
                ),
                FrameImageGroup(
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_right.png")),
                    FrameTileMode.Repeat
                ),
                FrameImageGroup(
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_bottom_left.png")),
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_bottom.png")),
                    FrameTileMode.Stretch,
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_bottom_right.png"))
                )
            ),
            0.075f
        )

        // Add asset to AssetConfig
        settingsList.config.addAsset(customDynamicFrame)

        settingsList.configure<UiConfigFrame> {
            // Add custom frame to the UI
            it.frameList.add(
                FrameItem(
                    "custom_dynamic_frame",
                    "Dynamic Rainbow",
                    ImageSource.create(Uri.parse("https://img.ly/static/example-assets/imgly_frame_lowpoly_thumbnail.png"))
                )
            )
        }

        // Start the video editor using VideoEditorBuilder
        // The result will be obtained in onActivityResult() corresponding to EDITOR_REQUEST_CODE
        VideoEditorBuilder(activity)
            .setSettingsList(settingsList)
            .startActivityForResult(activity, EDITOR_REQUEST_CODE)

        // Release the SettingsList once done
        settingsList.release()
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {
        intent ?: return
        if (requestCode == EDITOR_REQUEST_CODE) {
            // Wrap the intent into an EditorSDKResult
            val result = EditorSDKResult(intent)
            when (result.resultStatus) {
                EditorSDKResult.Status.CANCELED -> showMessage("Editor cancelled")
                EditorSDKResult.Status.EXPORT_DONE -> showMessage("Result saved at ${result.resultUri}")
                else -> {
                }
            }
        }
    }
}

From Remote URL

Dynamic frame#

Add frame to AssetConfig#

Configure UiConfigFrame#

Add frame to `AssetConfig`#

Configure `UiConfigFrame`#