This topic provides an overview of ApsaraVideo Player SDK for Flutter and describes how to integrate ApsaraVideo Player SDK for Flutter. The Android Studio is used as an example to show how to integrate the SDK.

Project description

The native layer of Flutter is developed on top of ApsaraVideo Player SDK for Android and ApsaraVideo Player SDK for iOS. The source code is included in the dependencies of the demo. Developers can tweak the source code as required. For the source code, see ApsaraVideo Player SDK for Flutter.

The following figure shows the directory structure of a project.Directory structure of ApsaraVideo Player SDK for Flutter

The following table lists the names and contents of the files in the directory.

File name 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 API for Flutter. Yes
extra The RTS SDK. No
example The demo of ApsaraVideo Player SDK for Flutter. No

Integration method

You can integrate Flutter by adding flutter_aliplayer as a dependency to the pubspec.yaml project file.
dependencies:
  flutter_aliplayer: ^version
# version indicates the version number of ApsaraVideo Player SDK for Flutter, such as 5.4.0. You can select a version based on your business requirements. 

How to integrate Flutter Player

The Android Studio 3.6.3 is used as an example to show you how to integrate Flutter Player.

Environment preparation
  • Download the Flutter plug-in on the Plugin page. If you use a version earlier than Flutter V1.21, you also need to configure Dart SDK.
  • Install Flutter: To download Flutter, see Flutter SDK releases.

Procedure

  1. Open the Android Studio and click Start a new Flutter project.
  2. Select Flutter Application and click Next.
  3. Select Flutter SDK path (the directory to which Flutter is downloaded) and click Next.
  4. Click Finish.
  5. Add flutter_aliplayer as a dependency in the pubspec.yaml file.
    dependencies:
      flutter_aliplayer: ^version
    # version indicates the version number of ApsaraVideo Player SDK for Flutter, such as 5.4.0. You can select a version based on your business requirements. 
    If you need to integrate RTS SDK into ApsaraVideo Player SDK for Flutter, add the following dependencies:
     flutter_aliplayer_artc: ^version
     flutter_aliplayer_rts: ^version
    # version is the version number. For example, flutter_aliplayer_artc: ^5.2.3 and flutter_aliplayer_rts: ^1.5.0. You can select a version based on your business requirements. 

After dependencies are integrated, you can use the following code to build the Flutter player.

  1. Create a dart file under the lib folder, and then create and configure the player.
    import 'package:flutter/material.dart';
    import 'package:flutter_aliplayer/flutter_aliplayer.dart';
    import 'package:flutter_aliplayer/flutter_aliplayer_factory.dart';
    
    class MyTest extends StatefulWidget {
      const MyTest({Key? key}) : super(key: key);
    
      @override
      _MyTestState createState() => _MyTestState();
    }
    
    class _MyTestState extends State<MyTest> {
    
      late FlutterAliplayer fAliplayer;
    
      @override
      void initState() {
        super.initState();
        // Create a player.
        fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
      }
    
      // Configure a render view.
      @override
      Widget build(BuildContext context) {
        var x = 0.0;
        var y = 0.0;
        Orientation orientation = MediaQuery.of(context).orientation;
        var width = MediaQuery.of(context).size.width;
    
        var height;
        if (orientation == Orientation.portrait) {
          height = width * 9.0 / 16.0;
        } else {
          height = MediaQuery.of(context).size.height;
        }
        AliPlayerView aliPlayerView = AliPlayerView(
            onCreated: onViewPlayerCreated,
            x: x,
            y: y,
            width: width,
            height: height);
        return OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            return Scaffold(
              body: Column(
                children: [
                  Container(
                      color: Colors.black,
                      child: aliPlayerView,
                      width: width,
                      height: height),
                ],
              ),
            );
          },
        );
      }
    
        void onViewPlayerCreated(viewId) async {
        // Assign the render view to the player.
        fAliplayer.setPlayerView(viewId);
        // Set the playback source and URL playback mode.
        fAliplayer.setUrl("https://vidoe/test.mp4");
        // Enable autoplay.
        fAliplayer.setAutoPlay(true);
        fAliplayer.prepare();
      }
    }
  2. Under the lib folder, select the dart file to push. The dart file specifies the method to build the Flutter player. The main.dart file is used in this example.

    The following code is for reference only.

    Navigator.push(context, MaterialPageRoute(builder: (context) => MyTest())); //MyTest() is the method name, which can be modified. 
  3. In the top navigation bar, select a device and click Run.
    Note ApsaraVideo Player SDK for Android does not support emulators.