Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

From Remote URL

VideoEditor SDK supports loading overlays 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.

Download overlay#

For each remote resource, we create a File in the cache directory and download the remote resource. Since file handling and downloading are IO operations, we do this inside a coroutine using the IO dispatcher.

Create OverlayAsset#

Here, we construct an OverlayAsset object using the file downloaded above, providing it a unique id, blend mode, and intensity.

Add overlay to AssetConfig#

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

Configure UiConfigOverlay#

Here, we configure UiConfigOverlay and add a custom OverlayItem to the overlayList. Note how the OverlayItem uses the same id as the OverlayAsset. We also provide a name and a thumbnail ImageSource for the overlay.

File:
class VideoAddOverlayFromRemoteURL(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.
    override fun invoke() {


        // Filenames of remote assets
        val overlayFilename = "imgly_overlay_grain.jpg"
        val overlayThumbFilename = "imgly_overlay_grain_thumb.jpg"


        // All available filenames of the assets
        val assetFilenames = arrayOf(overlayFilename, overlayThumbFilename)


        activity.lifecycleScope.launch {
            showLoader(true)
            val files = runCatching {
                coroutineScope {
                    // Download each of the remote resources
                    assetFilenames.map {
                        async(Dispatchers.IO) {
                            // Create file in cache directory
                            val file = File(activity.cacheDir, it)
                            if (file.exists()) file.delete()
                            file.createNewFile()
                            // Save remote resource to file
                            URL("https://img.ly/static/example-assets/$it").openStream().use { input ->
                                file.outputStream().use { output ->
                                    input.copyTo(output)
                                }
                            }
                            file
                        }
                    }.awaitAll() // Wait for all downloads to finish
                }
            }.getOrNull()
            showLoader(false)
            files?.let {
                startEditor(it)
            } ?: showMessage("Error downloading the file")
        }
    }


    private fun startEditor(files: List<File>) {
        // 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 overlay using the downloaded file
        val customOverlay = OverlayAsset("imgly_overlay_grain", ImageSource.create(files[0]), BlendMode.HARD_LIGHT, 0.4f)


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


        settingsList.configure<UiConfigOverlay> {
            it.overlayList.add(OverlayItem("imgly_overlay_grain", "Grain", ImageSource.create(files[1])))
        }


        // 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 -> {
                }
            }
        }
    }
}