Flutter实时直播插件 live_flutter_plugin 的使用

live_flutter_plugin 是一个强大的Flutter插件，支持RTMP、HTTP-FLV、TRTC和WebRTC等多种协议，并提供了丰富的功能如美颜滤镜、自定义视频采集等。本文将详细介绍如何在Flutter项目中集成并使用这个插件。

功能特性

• 支持RTMP、HTTP-FLV、TRTC和WebRTC。
• 视频捕捉：可以捕捉当前直播流的视频图像。
• 延迟调整：允许设置播放器缓存自动调整的最小时间和最大时间。
• 自定义视频采集：根据项目需求自定义音频和视频数据源。
• 美颜滤镜和贴纸：提供多组美颜算法（自然&平滑）和多种色彩空间滤镜（支持自定义滤镜）。
• QoS流量控制技术和上行网络适应能力：根据实际网络状况实时调整音频和视频数据量。

插件类文件结构

.
├── manager
│   ├── tx_audio_effect_manager.dart  音效管理器
│   ├── tx_beauty_manager.dart  美颜管理器
│   ├── tx_device_manager.dart  设备管理器
│   └── tx_live_manager.dart  推流/播放创建/销毁管理器
├── v2_tx_live_code.dart  错误码和警告码定义
├── v2_tx_live_def.dart  关键类型定义
├── v2_tx_live_player.dart  直播播放器
├── v2_tx_live_player_observer.dart 播放器回调通知
├── v2_tx_live_premier.dart  V2TXLive高级接口
├── v2_tx_live_pusher.dart  直播推流器
├── v2_tx_live_pusher_observer.dart 推流器回调通知
└── widget
    └── v2_tx_live_video_widget.dart 视频渲染Widget

集成SDK

1. 在pubspec.yaml中添加依赖

dependencies:
  live_flutter_plugin: latest_version_number

2. 授予相机和麦克风权限

iOS

1. 在Info.plist中添加相机和麦克风权限请求：

<key>NSCameraUsageDescription</key>
<string>Video calls are possible only with camera permission.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Audio calls are possible only with mic permission.</string>

1. 添加字段io.flutter.embedded_views_preview并将其值设为Yes。

Android

1. 打开/android/app/src/main/AndroidManifest.xml。
2. 在manifest中添加xmlns:tools="http://schemas.android.com/tools"。
3. 在application中添加tools:replace="android:label"。

注意：如果没有执行上述步骤，将会出现“Android Manifest merge failed”错误，编译失败。

快速入门

1. 设置许可证

import 'package:live_flutter_plugin/v2_tx_live_premier.dart';

void setupLicense() {
  var LICENSEURL = "your_license_url";
  var LICENSEURLKEY = "your_license_key";
  V2TXLivePremier.setLicence(LICENSEURL, LICENSEURLKEY);
}

2. 设置V2TXLivePusher

注意：请使用真实设备进行测试，模拟器不支持。

2.1 初始化V2TXLivePusher

import 'package:live_flutter_plugin/v2_tx_live_pusher.dart';

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late V2TXLivePusher _livePusher;

  void initPusher() {
    _livePusher = V2TXLivePusher(V2TXLiveMode.v2TXLiveModeRTC);
    _livePusher.addListener(onPusherObserver);
  }

  void onPusherObserver(V2TXLivePusherListenerType type, param) {
    debugPrint("==pusher listener type= ${type.toString()}");
    debugPrint("==pusher listener param= $param");
  }
}

2.2 设置视频渲染视图

import 'package:live_flutter_plugin/widget/v2_tx_live_video_widget.dart';

Widget renderView() {
  return V2TXLiveVideoWidget(
    onViewCreated: (viewId) async {
      _livePusher.setRenderViewID(viewId);
    },
  );
}

2.3 开始推流

Future<void> startPush() async {
  await _livePusher.startCamera(true);
  await _livePusher.startMicrophone();
  var url = "rtmp://your_rtmp_url";
  await _livePusher.startPush(url);
}

2.4 停止推流

Future<void> stopPush() async {
  await _livePusher.stopCamera();
  await _livePusher.stopMicrophone();
  await _livePusher.stopPush();
}

3. 设置V2TXLivePlayer

注意：请使用其他设备进行测试。

3.1 初始化V2TXLivePlayer

import 'package:live_flutter_plugin/v2_tx_live_player.dart';

late V2TXLivePlayer _livePlayer;

void initPlayer() {
  _livePlayer = V2TXLivePlayer();
  _livePlayer.addListener(onPlayerObserver);
}

void onPlayerObserver(V2TXLivePlayerListenerType type, param) {
  debugPrint("==player listener type= ${type.toString()}");
  debugPrint("==player listener param= $param");
}

3.2 设置视频渲染视图

Widget renderView() {
  return V2TXLiveVideoWidget(
    onViewCreated: (viewId) async {
      _livePlayer.setRenderViewID(viewId);
    },
  );
}

3.3 开始播放

Future<void> startPlay() async {
  var url = "rtmp://your_rtmp_url";
  await _livePlayer.startLivePlay(url);
}

3.4 停止播放

void stopPlay() {
  _livePlayer.stopPlay();
}

示例代码

以下是一个完整的示例代码，展示了如何使用live_flutter_plugin进行推流和播放：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:live_flutter_plugin/v2_tx_live_premier.dart';
import 'package:live_flutter_plugin/v2_tx_live_pusher.dart';
import 'package:live_flutter_plugin/v2_tx_live_player.dart';
import 'package:live_flutter_plugin/widget/v2_tx_live_video_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late V2TXLivePusher _livePusher;
  late V2TXLivePlayer _livePlayer;

  [@override](/user/override)
  void initState() {
    super.initState();
    setupLicense();
    initPusher();
    initPlayer();
  }

  void setupLicense() {
    V2TXLivePremier.setLicence("your_license_url", "your_license_key");
  }

  void initPusher() {
    _livePusher = V2TXLivePusher(V2TXLiveMode.v2TXLiveModeRTC);
    _livePusher.addListener(onPusherObserver);
  }

  void onPusherObserver(V2TXLivePusherListenerType type, param) {
    debugPrint("==pusher listener type= ${type.toString()}");
    debugPrint("==pusher listener param= $param");
  }

  void initPlayer() {
    _livePlayer = V2TXLivePlayer();
    _livePlayer.addListener(onPlayerObserver);
  }

  void onPlayerObserver(V2TXLivePlayerListenerType type, param) {
    debugPrint("==player listener type= ${type.toString()}");
    debugPrint("==player listener param= $param");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Live Streaming Example'),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () async {
                  await startPush();
                },
                child: Text('Start Push'),
              ),
              ElevatedButton(
                onPressed: () async {
                  await stopPush();
                },
                child: Text('Stop Push'),
              ),
              Expanded(
                child: renderView(),
              ),
              ElevatedButton(
                onPressed: () async {
                  await startPlay();
                },
                child: Text('Start Play'),
              ),
              ElevatedButton(
                onPressed: () {
                  stopPlay();
                },
                child: Text('Stop Play'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget renderView() {
    return V2TXLiveVideoWidget(
      onViewCreated: (viewId) async {
        _livePusher.setRenderViewID(viewId);
        _livePlayer.setRenderViewID(viewId);
      },
    );
  }

  Future<void> startPush() async {
    await _livePusher.startCamera(true);
    await _livePusher.startMicrophone();
    var url = "rtmp://your_rtmp_url";
    await _livePusher.startPush(url);
  }

  Future<void> stopPush() async {
    await _livePusher.stopCamera();
    await _livePusher.stopMicrophone();
    await _livePusher.stopPush();
  }

  Future<void> startPlay() async {
    var url = "rtmp://your_rtmp_url";
    await _livePlayer.startLivePlay(url);
  }

  void stopPlay() {
    _livePlayer.stopPlay();
  }
}