本文介绍如何跑通 Flutter 直播间观播 SDK 的 Demo，从而实现：

• 纯净播放器：适用于将纯净播放器嵌入 Flutter 页面的场景。
• Feed 流：适用于上下滑动切换直播间视频和点播视频的场景。当直播间状态为直播中时，您可以点击直播中字样进入完整直播间，查看商品卡片、点赞直播间等。
• 完整直播间：适用于直接进入完整直播间的场景。您可以在直播间内查看商品卡片、点赞直播间等。

Demo 效果演示

环境要求

• Flutter 版本：Flutter stable channel 3.0.0 及以上版本
• Dart 版本：Dart 2.17.0 及以上版本
• 系统版本：
  • iOS 12.0 及以上版本的真机
  • Android 5.0（minSdkVersion：21）及以上版本的真机
• 开发工具：推荐使用 Visual Studio Code 或 Android Studio 最新版本

前提条件

• 您已开通定制版套餐。详见计费说明。
• 获取直播 License 文件和点播 License 文件、创建 SDK 应用时填写的 App 英文名称、Android 和 iOS 项目包名，以及应用创建后生成的 App ID。详见获取 License。

Demo 项目结构说明

├── example
 |-- lib // Flutter 层代码文件
 |-- ios // iOS 层文件
 |-- android // Android 层文件
 |-- Licenses // 用于存放直播和点播 License 文件
 |-- pubspec.yaml // Flutter 层配置文件

操作步骤

1. 点击此处，下载 Demo 包至本地，并解压。

2. 添加 License 文件。

   1. 将获取到的直播和点播 License 文件放到 example/Licenses/TTSDK 目录下。
   2. 在 example 目录下，打开 pubspec.yaml 文件，配置 License 文件的路径。

      assets:
       - Licenses/TTSDK/vod.lic   // 将 vod.lic 替换为点播 License 的文件名。
       - Licenses/TTSDK/live.lic  // 将 live.lic 替换为直播 License 的文件名。
      

3. 修改 iOS App 的唯一标识（Bundle Identifier）和 Android 的 applicationId。

   • iOS
     1. 使用 Xcode 打开 example/ios 目录下的 Runner.xcworkspace 文件。
     2. 在 Runner Target 下，单击 Signing & Capabilities 页签，并将 Bundle Identifier 修改为创建 SDK 应用时填写的 iOS 项目包名。
        
   • Android
     3. 在 example/android/app 目录下，打开 build.gradle 文件。
     4. 将 applicationId 的值修改为创建 SDK 应用时填写的 Android 项目包名。

4. 在 example/lib 目录下的 main.dart 文件中，配置以下信息。

   TTSDKConfiguration config = TTSDKConfiguration(
    appID: 'APP_ID', // 将 APP_ID 替换为在 SDK 应用创建后生成的 App ID。
    bundleID: 'BUNDLE_ID', // 将 BUNDLE_ID 替换为 iOS App 的唯一标识（Bundle Identifier）。
    appName: 'APP_NAME', // 将 APP_NAME 替换为创建 SDK 应用时填写的 App 英文名称。
    channel: 'CHANNEL_NAME', // 将 CHANNEL_NAME 替换为 App 的渠道名称，例如 App Store。
    liveLicenseFilePath: 'LIVE_LICENSE_PATH', // 将 LIVE_LICENSE_PATH 替换为直播 License 文件的路径，例如 Licenses/TTSDK/live.lic。
    vodLicenseFilePath: 'VOD_LICENSE_PATH', // 将 VOD_LICENSE_PATH 替换为点播 License 文件的路径，例如 Licenses/TTSDK/vod.lic。
    appVersion: 'APP_VERSION', // 将 APP_VERSION 替换为 App 的版本号。合法版本号应包含 2 个或以上的分隔符，例如 1.3.2。
    );
   

5. 连接真机到电脑。打开命令行工具运行以下命令，启动 Demo App。

   cd example 
   flutter pub get 
   flutter run
   

6. 启动 Demo App 后，您可以：

   • 点击纯净播放器，查看嵌入 Flutter 页面的纯净播放器效果。
   • 点击 Feed 流，上下滑动切换直播间视频和点播视频。当直播间状态为直播中时，您可以点击直播中字样进入完整直播间，查看商品卡片、点赞直播间等。
   • 点击完整直播间，直接进入完整直播间。您可以在直播间内查看商品卡片、点赞直播间等。

7. （可选）在 example 目录下，打开 pubspec.yaml 文件，查看 Demo 依赖的 SDK。

   dependencies:
     ve_vod: 1.44.3-1          // Flutter 点播 SDK
     bdlive_flutter_viewer:    // Flutter 直播间观播 SDK，path 为相对路径。
       path: ../
   

   注意

   为确保 Demo 可用，请勿修改 Flutter 点播 SDK 的版本号。

   如需自行实现上下滑动切换直播间视频和点播视频的效果，可在 Flutter 项目的 pubspec.yaml 文件中，添加以上 SDK 依赖。

8. （可选）如需将 Demo 中的直播间视频和点播视频替换为您自己的视频资源，可在 example/lib/feed 目录下，打开 data.dart 文件，并完成以下修改。

   List<Map<String, dynamic>> dataList = [{
       "type": 0, // 视频类型。0: 直播间视频，包含直播、预告和回放。 1: 点播视频。
       "id": 180055****274499, // 直播间活动 ID。
       "token": "csw4AUKdCrpwRUf2Abi****eWbCb/Ei4AGOXJLnCP94=", // 进入直播间所需的授权 Token。
       "mode" : 1, // 直播间的鉴权模式。0：公开模式。1：自定义模式。详见 BdlViewerAuthMode。
     },
     {
       "type": 1, // 视频类型。0: 直播间视频，包含直播、预告和回放。 1: 点播视频。
       "url": "https://static.yb****ital.net/test-video-2.mp4", // 点播视频的 URL。
     }
   ];
   

   当 type 取值为 0 时，您可调用 ListActivityAPI 接口获取直播间活动 ID，调用 GetSDKTokenAPI 接口获取授权 Token。有关直播间不同鉴权模式的区别，详见 BdlViewerAuthMode。