To run this demo, you need to set your own player license in the demo_config, and modify the package name and bundleId to your signed package name and bundleId in the Android and iOS configurations.
Quick Integration
Adding the following dependencies to the pubspec.yaml of your project
You can integrate LiteAVSDK_Player or LiteAVSDK_Professional as needed.
1. To integrate the latest version of LiteAVSDK_Player_Premium (player premium version), add configuration in pubspec.yaml：
super_player:
git:
url: https://github.com/LiteAVSDK/Player_Flutter
path: Flutter
ref: Player_Premium
To replace the SDK version series, modify the configuration in pubspec.yaml as follows:
## Integration method after version 13.0. If not specified, the professional version is used by default:
super_player:
sub_spec:'professional'
# player: The basic version of the player, supporting video-on-demand (VOD) and basic live streaming.
# professional: The full-featured version, typically used for integrating multiple Tencent plugins simultaneously.
# premium: The advanced version of the player, including premium player capabilities.
# professional_premium: Combines the full-featured version and the advanced player version, offering compatibility with the full-featured version while utilizing the advanced player features.
dependencies:
super_player:
git:
url: https://github.com/LiteAVSDK/Player_Flutter
path: Flutter
# Integration method before version 13.0:
# Here demonstrates the Professional version
super_player:
git:
url: https://github.com/LiteAVSDK/Player_Flutter
path: Flutter
ref: Professional
To integrate a specified version of the player SDK, specify the corresponding version through the tag that ref depends on as follows:
## Integration method after version 13.0. If not specified, the professional version is used by default:
super_player:
sub_spec:'professional'
# player: The basic version of the player, supporting video-on-demand (VOD) and basic live streaming.
# professional: The full-featured version, typically used for integrating multiple Tencent plugins simultaneously.
# premium: The advanced version of the player, including premium player capabilities.
# professional_premium: Combines the full-featured version and the advanced player version, offering compatibility with the full-featured version while utilizing the advanced player features.
dependencies:
super_player:
git:
url: https://github.com/LiteAVSDK/Player_Flutter
path: release_v13.0.0
# Integration method before version 13.0:
# release_pro_v12.0.0 indicates the integration of Android version
# TXLiteAVSDK_Professional_12.0.0.14681 and iOS version TXLiteAVSDK_Professional_12.0.16292.
## Integration method after version 13.0. If not specified, the professional version is used by default:
super_player:
sub_spec:'professional'
# player: The basic version of the player, supporting video-on-demand (VOD) and basic live streaming.
# professional: The full-featured version, typically used for integrating multiple Tencent plugins simultaneously.
# premium: The advanced version of the player, including premium player capabilities.
# professional_premium: Combines the full-featured version and the advanced player version, offering compatibility with the full-featured version while utilizing the advanced player features.
dependencies:
# Prior to version 13.0, pub integration defaulted to the professional version, whereas after version 13.0, the version can be specified via the sub_spec method mentioned above.
super_player: ^13.0.0
2. After the integration, you can obtain the Flutter dependencies through the UI that comes with the code editor or by directly running the following command:
flutter pub get
3. During use, you can run the following command to update existing Flutter dependencies:
flutter pub upgrade
Adding native configuration
Android configuration
1. Add the following configuration to AndroidManifest.xml.
Network security configuration allows the app to send HTTP requests
For security reasons, starting from Android P, Google requires that all requests made by the app use encrypted connections. The player SDK will start a local server to proxy HTTP requests. If your app's targetSdkVersion is greater than or equal to 28, you can use network security configuration to allow HTTP requests to be sent to 127.0.0.1. Otherwise, you will encounter the error "java.io.IOException: Cleartext HTTP traffic to 127.0.0.1 not permitted" when playing videos, which will prevent the video from playing. The configuration steps are as follows:
1.1 Create a new file network_security_config.xml under res/xml in your project and configure the network security settings.
2. Make sure that the build.gradle in the Android directory uses mavenCenter and can successfully download dependencies.
repositories {
mavenCentral()
}
3. Configure the minimum SDK version for Android. Due to the default configuration of Flutter, the minimum version of Android is too low. You need to manually change it to at least 19. If you want to use the picture-in-picture feature, the compileSdkVersion and targetSdkVersion need to be changed to at least 31.
compileSdkVersion 31
defaultConfig {
applicationId "com.tencent.liteav.demo"
minSdkVersion 19
targetSdkVersion 31
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
4. Add the following configuration xmlns:tools="http://schemas.android.com/tools" to the root manifest tag in the AndroidManifest.xml file. Here is an example:
Add tools:replace="android:label" to the application node. Here is an example:
<application
android:label="super_player_example"
android:icon="@mipmap/ic_launcher"
android:requestLegacyExternalStorage="true"
tools:replace="android:label">
<!-- your config...... -->
</application>
5. To update the dependency version of the native SDK, manually delete the build folder in the Android directory or run the following command to force a refresh.
./gradlew build
iOS configuration
Note: iOS currently does not support project running and debugging in simulators; therefore, we recommend you develop and debug your project on a real device.
1. If your video source uses the HTTP protocol, you need to add the following configuration in Info.plist on iOS:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
2. On the iOS native business side, you can edit the podfile file yourself to specify the version of your player SDK. By default, the Player version SDK is integrated.
pod 'TXLiteAVSDK_Professional' // Professional Edition
If you do not specify the edition, the latest version of TXLiteAVSDK_Player will be installed.
3. In some cases such as new version release, you need to forcibly update the iOS player dependencies by running the following command in the iOS directory:
rm -rf Pods
rm -rf Podfile.lock
pod update
4. Landscape configuration
If your app needs to support landscape mode, you need to set the supported orientations for portrait and landscape in the Deployment Info tab on the General page of the iOS project configuration. You can check all options as shown in the figure below:
5. Picture-in-Picture configuration
If your project needs to support picture-in-picture, you need to check the "Audio, AirPlay, and Picture in Picture" option under the Background Modes tab on the Signing & Capabilities page of the iOS project configuration to enable the picture-in-picture capability for your project, as shown in the figure below:
Integrating the Video Playback License
If you have obtained a license, you can view the license URL and key in the RT-Cube console.
Before you integrate the player, you need to sign up for a Tencent Cloud account, apply for the video playback license, and configure the license as follows (we recommend you do this when the application is launched):
If you don’t configure a license, errors may occur during playback.
String licenceURL = ""; // The license URL obtained
String licenceKey = ""; // The license key obtained
The Flutter plugin of the Player SDK is based on the system’s native player capabilities. You can use either of the following methods for custom development:
Use the VOD playback API class TXVodPlayerController or live playback API class TXLivePlayerController for custom development. You can refer to the demos we provide (DemoTXVodPlayer and DemoTXLivePlayer in example).
The player component SuperPlayerController encapsulates VOD playback and live playback capabilities and includes basic UI elements.
You can copy the code of the player component (in example/lib/superplayer) to your project for custom development.
FAQs
1. Errors about missing APIs such as No visible @interface for 'TXLivePlayer' declares the selector 'startLivePlay:type:' occur on iOS.
Run the following command to update the iOS SDK:
rm -rf Pods
rm -rf Podfile.lock
pod update
2. SDK or symbol conflicts occur when tencent_trtc_cloud and Flutter player are integrated at the same time.
Common exception log: java. lang.RuntimeException: Duplicate class com.tencent.liteav.TXLiteAVCode found in modules classes.jar
In this case, you need to integrate the Professional version of the Flutter player, so that tencent_trtc_cloud and the Flutter player both depend on the same version of LiteAVSDK_Professional.
For example, to depend on TXLiteAVSDK_Professional_10.3.0.11196 for Android or TXLiteAVSDK_Professional to 10.3.12231 for iOS, the dependency declaration is as follows:
tencent_trtc_cloud: 2.3.8
super_player:
git:
url: https://github.com/LiteAVSDK/Player_Flutter
path: Flutter
ref: release_pro_v1.0.3.11196_12231
3. When multiple player instances need to be used at the same time, the video image gets blurry when videos are frequently switched.
When each player component container is terminated, call the dispose method of the player to release the player.
4. Other common issues with Flutter dependencies:
Run the flutter doctor command to check the runtime environment until "No issues found!" is displayed.
Run flutter pub get to ensure that all dependent components have been updated successfully.
5. After integrating SuperPlayer, you may encounter the following manifest error:
Attribute application@label value=(super_player_example) from AndroidManifest.xml:9:9-45
is also present at [com.tencent.liteav:LiteAVSDK_Player:10.8.0.13065] AndroidManifest.xml:22:9-41 value=(@string/app_name).
Suggestion: add 'tools:replace="android:label"' to <application> element at AndroidManifest.xml:8:4-51:1
Solution: The SuperPlayer Android SDK has already defined the label attribute in its AndroidManifest, and when you create a new Flutter project, the AndroidManifest in the Android directory also defines the label attribute. Therefore, it is recommended that you follow the error message and add xmlns:tools="http://schemas.android.com/tools" to the root manifest tag in your Android project directory's AndroidManifest.xml. Then, add tools:replace="android:label" to the application node. This will override the label attribute and resolve the conflict.
6. After integrating SuperPlayer, you may encounter version conflicts with other dependencies. The error message may look like this:
uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:super_player]
Solution: Currently, the minimum supported version for the SuperPlayer Android SDK is Android 19, while some versions of Flutter default to Android 16 as the minimum supported version. It is recommended that you raise the minimum supported version to Android 19. To do this, go to the main module of your Android project, which is usually the app directory, and modify the minSdkVersion in the build.gradle file to 19.
7. How to extract the runtime logs of the player SDK
Solution: The player SDK outputs the runtime logs to a local file by default. Tencent Cloud technical support may need these logs to diagnose issues. On the Android platform, the logs are saved in the directory /sdcard/Android/data/packagename/files/log/tencent/liteav, while on the iOS platform, the logs are saved in the sandbox/Documents/log directory.
8. How to reduce console log output
Solution: You can set the log output level using the following interface: SuperPlayerPlugin.setLogLevel(TXLogLevel.LOG_LEVEL_NULL). The following log levels are supported:
class TXLogLevel {
static const LOG_LEVEL_VERBOSE = 0; // Output logs of all levels.
static const LOG_LEVEL_DEBUG = 1; // Output logs of DEBUG, INFO, WARNING, ERROR, and FATAL levels.
static const LOG_LEVEL_INFO = 2; // Output logs of INFO, WARNING, ERROR, and FATAL levels.
static const LOG_LEVEL_WARN = 3; // Output logs of WARNING, ERROR, and FATAL levels.
static const LOG_LEVEL_ERROR = 4; // Output logs of ERROR and FATAL levels.
static const LOG_LEVEL_FATAL = 5; // Only output logs of FATAL level.
static const LOG_LEVEL_NULL = 6; // Do not output any SDK logs.
}
9. During the use of the project, native-related errors may occur, such as:
Errors :'incompatible types', error: initializing 'BOOL' (aka 'bool') with an expression of incompatible type 'void', etc., are caused by SDK updates, which make the SDK incompatible with the native code in the Flutter end. In this case, you only need to update the SDK version.
Solution: In the project directory, open the terminal and enter the following commands in sequence:
flutter pub cache clean
flutter clean
flutter pub upgrade
flutter pub get
Make sure the commands execute successfully to update the local Flutter dependencies.
Then, in the ios directory, open the terminal and enter the following command to update the iOS dependencies:
rm -rf Pods
rm -rf Podfile.lock
pod update
If the problem still persists, you can try deleting the project's build folder and manually deleting the flutter dependency cache folder .pub-cache on your computer. Then refresh the Flutter pub dependencies and compile and run the project again.
10. When playing a video on the Android on-demand player, the edges of the player appear tiled and stretched.
This issue is caused by the texture rendering problem of the Flutter end sdk. You can upgrade the flutter version to flutter 3.7.0 or above.
11. The flutter debugging and test package runs without any problems, but the official package crashes when it is installed.
Flutter uses obfuscation by default when building a formal package. The player SDK needs to configure the following obfuscation rules:
-keep class com.tencent.**{*;}
12. Unable to play local videos.
The flutter player supports local video playback. You need to pass the correct local video address to the video playback interface. If you encounter playback issues, first check if the local video address is available and if the file is damaged. If the local video is fine, check if the app has storage or image/video reading permissions.
13. When running the iOS project, errors such as CocoaPods could not find compatible versions for pod "Flutter" or similar are reported.
This issue occurs because the high flutter development environment no longer supports lower iOS versions. You can check if the iOS version configured for Minimum Deployments in the project is too low or if it inherits dependencies that only support lower iOS versions.
14. When the player switches the bound texture, the picture often disappears.
Since the Flutter interface often globally refreshes the UI, it causes TXPlayerVideo and the controller to be passively rebound repeatedly, resulting in a texture binding contention issue. It is recommended to use the onRenderViewCreatedListener callback of TXPlayerVideo. After obtaining the viewId, use the setPlayView method of the controller for binding.
More
You can try out all the features by running the example in the project.
The player SDK website provides demos for iOS, Android, and web. Click here to use them.
