From Remote URL

VideoEditor SDK supports loading audio files from a remote URL this can be a resource hosted by a hosting provider or your own servers.

Download remote resource#

For each audio clip, we construct a remote URL from the clip identifier and create a download promise using the expo-file-system module. Upon successful download, we save it to a temporary location.

Create Audio Clips#

Once the audio files have been downloaded, we iterate over them and create valid AudioClip objects. Each of the clips needs an identifier as well as an audioURI. Optionally, you can also add a duration, a thumbnailURI, an artist and a title. If these are not specified, the SDK tries to fetch the relevant information from the clip's metadata.

Add to Configuration#

The previously created AudioClips can now be added to custom AudioClipCategory objects that are passed to the Configuration. Each category needs an identifier, a name, an optional thumbnailURI and optional items - an array of AudioClips.

Handle user interaction#

For this example, we are disabling user interaction while the download task is executing. In production, you might want to indicate download progress here. When the download has finished, we can reenable user interaction and dismiss the progress indicator.


import 'dart:io';

import 'package:catalog/bloc/interaction_bloc.dart';
import 'package:catalog/models/code_example.dart';
import 'package:flutter/foundation.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:path_provider/path_provider.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

class VideoAudioRemoteExample extends CodeExample {
  /// Downloads the file from the [url] to the local temporary directory.
  Future<String> _download(String url, String filename) async {
    final client = HttpClient();
    final request = await client.getUrl(Uri.parse(url));
    final response = await request.close();
    final bytes = await consolidateHttpClientResponseBytes(response);
    final outputDirectory = await getTemporaryDirectory();
    final outputFile =
        File.fromUri(Uri.parse("${outputDirectory.uri}/$filename"));
    await outputFile.writeAsBytes(bytes);
    return outputFile.uri.toString();
  }

  @override
  void invoke() async {
    // Disable user interaction.
    InteractionBloc.shared.disable();

    // Add a video from the assets directory.
    final video = Video("assets/Skater.mp4");

    // Sources of the local audio clips.
    final audioSources = [
      "elsewhere",
      "trapped_in_the_upside_down",
      "dance_harder",
      "far_from_home"
    ];

    final List<Future<String>> downloads = audioSources
        .map((e) =>
            _download("https://img.ly/static/example-assets/$e.mp3", "$e.mp3"))
        .toList();
    final List<String> localPaths = await Future.wait(downloads);

    // Convert the sources to valid `AudioClip`s.
    final List<AudioClip> audioClips = audioSources
        .asMap()
        .entries
        .map((clip) => AudioClip(clip.value, localPaths[clip.key]))
        .toList();

    // Create [AudioOptions] to customize the audio tool.
    final audioOptions = AudioOptions(
      categories: [
        AudioClipCategory("elsewhere", "Elsewhere",
            items: audioClips.sublist(0, 2)),
        AudioClipCategory("other", "Other", items: audioClips.sublist(2))
      ],
    );

    // Create a [Configuration] instance.
    final configuration = Configuration(audio: audioOptions);

    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);
    } finally {
      // Enable user interaction.
      InteractionBloc.shared.enable();
    }
  }
}