All Products
Search
Document Center

ApsaraVideo VOD:Quick integration

Last Updated:Nov 29, 2024

This topic provides an overview of ApsaraVideo Player SDK for Flutter and describes how to integrate ApsaraVideo Player SDK for Flutter.

Environment requirements

Item

Requirement

Flutter version

Flutter 3.22.2 on the Stable channel

Dart version

Dart 3.4.3

Operating system

Android 6.0 or later

Mobile phone processor

Architecture: armeabi-v7a or arm64-v8a

Development tool

Recommended: Android Studio or Visual Studio (VS) Code

SDK download

Note

A specific version of ApsaraVideo Player SDK for Flutter supports specific versions of Flutter SDK. For example, ApsaraVideo Player SDK for Flutter V5.4.0 supports only Flutter SDK 2.0 or later. For more information, see Release notes for ApsaraVideo Player SDK for Flutter.

Project description

The native layer of ApsaraVideo Player SDK for Flutter is developed based on ApsaraVideo Player SDK for Android and ApsaraVideo Player SDK for iOS. The source code is included in the dependencies of the demo. You can modify the source code based on your business requirements.

The following figure shows the directory structure of a project.Flutter目录结构

The following table describes the folders in the directory.

Folder

Description

Required

android

The native code for Android and ApsaraVideo Player SDK for Android.

Yes

ios

The native code for iOS and ApsaraVideo Player SDK for iOS.

Yes

lib

The code of the API for Flutter.

Yes

example

The demo of ApsaraVideo Player for Flutter.

No

ApsaraVideo Player SDK for Flutter supports both the live streaming and player features. If you do not need the live streaming feature, you can change the kernel of ApsaraVideo Player SDK for Flutter from multi-module (live streaming + player) to single-module (player). To do so, perform the following steps:

Android

  1. Add the URL of the Alibaba Cloud Maven repository to the project-level build.gradle file.

    maven { url "https://maven.aliyun.com/nexus/content/repositories/releases" }
  2. Replace the multi-module SDK with the single-module SDK that supports only the player feature.

    dependencies {
      // Multi-module SDK for interactive streaming: ApsaraVideo Player SDK and Push SDK that supports Real-Time Streaming (RTS) and real-time communication (RTC)-based co-streaming
      //implementation 'com.aliyun.aio:AliVCSDK_InteractiveLive:x.x.x'
      // ApsaraVideo Player SDK
      implementation 'com.aliyun.sdk.android:AliyunPlayer:x.x.x-full'
      implementation 'com.google.code.gson:gson:2.8.6'
    }

iOS

In the flutter_aliplayer.podspec file, replace 'AliVCSDK_InteractiveLive', 'x.x.x' with 'AliPlayerSDK_iOS', 'x.x.x'.

Limits

ApsaraVideo Player SDK for Android cannot run on simulators. After you integrate ApsaraVideo Player SDK for Android, you must run the SDK on an Android device.

Integration

Note

The following procedure shows how to integrate ApsaraVideo Player SDK for Flutter in VS Code 1.65.2. The procedure for integrating ApsaraVideo Player SDK for Flutter by using other development tools is similar.

  1. Start VS Code.

  2. Choose View > Command Palette….

  3. Enter flutter and select Flutter: New Project.

  4. Enter a project name such as myapp and press Enter.

  5. Specify the location for storing the project and click OK.

    Wait for the project to be created. When the main.dart file appears, the project is created.

  6. Integrate ApsaraVideo Player SDK for Flutter into your project.

    You can integrate ApsaraVideo Player SDK for Flutter by adding flutter_aliplayer as a dependency to the pubspec.yaml file of the project.

    dependencies:
      flutter_aliplayer: ^version
    # version specifies the version number of ApsaraVideo Player SDK for Flutter, such as 5.4.0. Replace version with the actual version number.
  7. Optional: If your business scenario requires RTS, add the following dependencies. For more information about RTS, see Overview.

    You can use one of the following methods to add the dependencies:

    Note
    • Method 1: Implement integration on the native layer of your Android or iOS device

      Android: Include the dependencies in the build.gradle file. Sample code:

      dependencies{
          implementation 'com.aliyun.sdk.android:AlivcArtc:$version'
          implementation 'com.aliyun.rts.android:RtsSDK:$version'
      }
      # version specifies the version number of ApsaraVideo Player SDK for Android or RTS SDK for Android. Examples: 'com.aliyun.sdk.android:AlivcArtc:5.4.9.1' and 'com.aliyun.rts.android:RtsSDK:2.5.0'.

      iOS: Include the dependencies in the Podfile file. Sample code:

      target 'Runner' do
        flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
      
        pod 'AliPlayerSDK_iOS_ARTC', '$version'  #$version specifies the version number of ApsaraVideo Player SDK for iOS. Example: 5.4.9.1.
        pod 'RtsSDK', '$version'  #$version specifies the version number of RTS SDK for iOS. Example: 2.5.0.
      
      end
    • Method 2: Use the Flutter plug-in (update stopped)

      You can obtain the versions of RTS SDK and ApsaraVideo Player SDK from the CHANGELOG.md file of the flutter_aliplayer project.

       flutter_aliplayer_artc: ^version
       flutter_aliplayer_rts: ^version
      # version specifies the version number. Examples: flutter_aliplayer_artc: ^5.2.3 and flutter_aliplayer_rts: ^1.5.0. Replace version with the actual version number.

FAQ

Can I debug apps on the Xcode simulator after I integrate ApsaraVideo Player SDK on iOS?

We recommend that you use a real iPhone for debugging. If an error similar to the one shown in the following figure occurs when you use Xcode 14 to compile apps on the iOS simulator, comment out setFilterConfig:, updateFilterConfig:, and setFilterInvalid:, and the code that is used to call these operations in ApsaraVideo Player SDK for Flutter.ios常见问题3