Integration

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.

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

Integration method

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.

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.