Flutter屏幕录制插件screen_record_flutter的使用

screen_record_flutter

Flutter 插件，用于记录用户操作以进行分析。

目录

• 获取开始
• 安装
• 需求
• 使用

获取开始

在您的 Flutter 项目中引入 screen_record_flutter 插件后，您可以轻松地开始录制屏幕。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  screen_record_flutter: ^0.0.1+3

然后运行 flutter pub get 更新依赖。

需求

在 Android 的 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

使用

导入包

首先，在 Dart 文件中导入 screen_record_flutter 包：

import 'package:screen_record_flutter/screen_record_flutter.dart';

开始录制

使用以下方法开始录制屏幕：

void startRecording() async {
  // 获取保存目录
  final dir = '${(await _getSavedDir())}';
  await Directory(dir).create(recursive: true);

  // 构造文件名
  final stem = '$dir/${DateTime.now().toIso8601String().replaceAll(".", "").replaceAll(":", "")}';
  pathData = '$stem.mp4';
  meta = '$stem.meta';

  log('RECORDED VIDEO PATH = $pathData');

  // 启动录制
  await _recorder
      .start(
    pathVideo: pathData,
    pathMetadata: meta,
  )
      .then((value) {
    log("RECORDING STARTED");
  });
}

停止录制

调用以下方法停止录制，视频将自动保存：

void stopRecording() {
  _recorder.stop().then((value) {
    log("RECORDING STOPPED");
  });
}

录制特定小部件

要录制某个特定的小部件，可以将其包裹在 ScreenRecordWidget 中，然后使用上述方法进行录制。

ScreenRecordWidget(
  child: YourWidget(),
)

在应用内播放录制的视频

可以使用 ScreenRecordPlayerWidget 播放录制的视频：

ScreenRecordPlayerWidget(filePath: pathData)

注意事项

• 如果应用程序进入后台而未调用 stop 方法，则录制的视频将不会被保存。
• 为了解决这个问题，可以使用 flutter_fgbg 插件来监听应用的状态。有关更多信息，请参阅示例标签。

完整示例代码

以下是完整的示例代码，展示了如何使用 screen_record_flutter 插件：

import 'dart:async';
import 'dart:log';
import 'dart:io';

import 'package:screen_record_flutter/screen_record_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_fgbg/flutter_fgbg.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late StreamSubscription<FGBGType> subscription;
  final _recorder = ScreenRecord.instance;
  String pathData = "";
  String meta = "";

  [@override](/user/override)
  void initState() {
    startRecording();
    subscription = FGBGEvents.stream.listen((event) {
      if (event == FGBGType.background) {
        stopRecording();
      } else if (event == FGBGType.foreground) {
        startRecording();
      }

      log(event.toString());
    });
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    subscription.cancel();
    super.dispose();
  }

  void startRecording() async {
    final dir = '${(await _getSavedDir())}';
    await Directory(dir).create(recursive: true);
    final stem = '$dir/${DateTime.now().toIso8601String().replaceAll(".", "").replaceAll(":", "")}';
    pathData = '$stem.mp4';
    meta = '$stem.meta';

    log('RECORDED VIDEO PATH = $pathData');

    await _recorder
        .start(
      pathVideo: pathData,
      pathMetadata: meta,
    )
        .then((value) {
      log("RECORDING STARTED");
    });
  }

  void stopRecording() {
    _recorder.stop().then((value) {
      log("RECORDING STOPPED");
    });
  }

  static Future<String?> _getSavedDir() async {
    String? externalStorageDirPath;

    if (Platform.isAndroid) {
      try {
        externalStorageDirPath = '/storage/emulated/0/Download';
      } catch (e) {
        final directory = await getExternalStorageDirectory();
        externalStorageDirPath = directory?.path;
      }
    } else if (Platform.isIOS) {
      externalStorageDirPath = (await getApplicationDocumentsDirectory()).absolute.path;
    }
    log('PATH FOR DOWNLOAD ::: $externalStorageDirPath');
    return externalStorageDirPath;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ListView.builder(
          itemBuilder: (context, index) => ListTile(
            onTap: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (_) => const SecondPage()));
            },
            title: Text('Item $index'),
            subtitle: Text('Random text $index'),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Column(
          children: [Text("data")],
        ),
      ),
    );
  }
}