Flutter屏幕录制功能插件flutter_screen_recording的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter屏幕录制功能插件 flutter_screen_recording 的使用

flutter_screen_recording 是一个用于在Android和iOS设备上进行屏幕录制的Flutter插件。该插件要求Android SDK 21+和iOS 10+。

开始使用

安装插件

首先,在您的pubspec.yaml文件中添加依赖:

dependencies:
  flutter_screen_recording: ^latest_version

然后运行flutter pub get来安装插件。

录制屏幕

开始录制

您可以选择是否同时录制音频:

  • 只录制屏幕:

    bool started = await FlutterScreenRecording.startRecordScreen('videoName');
    
  • 同时录制屏幕和音频:

    bool started = await FlutterScreenRecording.startRecordScreenAndAudio('videoName');
    

停止录制

当您需要停止录制并获取视频路径时,可以使用以下代码:

String path = await FlutterScreenRecording.stopRecordScreen;

示例Demo

下面是一个完整的示例demo,演示了如何使用flutter_screen_recording插件开始和停止屏幕录制:

import 'package:flutter/material.dart';
import 'package:flutter_screen_recording/flutter_screen_recording.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Recording Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Screen Recording Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isRecording = false;

  void _startRecording() async {
    bool started = await FlutterScreenRecording.startRecordScreenAndAudio('my_video');
    if (started) {
      setState(() {
        isRecording = true;
      });
    }
  }

  void _stopRecording() async {
    String path = await FlutterScreenRecording.stopRecordScreen;
    if (path != null) {
      setState(() {
        isRecording = false;
      });
      print('Video saved at: $path');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              isRecording ? '正在录制...' : '未在录制',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: isRecording ? _stopRecording : _startRecording,
              child: Text(isRecording ? '停止录制' : '开始录制'),
            ),
          ],
        ),
      ),
    );
  }
}

平台特定配置

Android

由于flutter_screen_recording不会自动请求必要的权限,您需要手动处理权限问题。推荐使用permission_handler插件来管理权限。

在您的AndroidManifest.xml中添加以下权限:

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

并在<application>标签内添加服务声明:

<service
    android:name="com.foregroundservice.ForegroundService"
    android:foregroundServiceType="mediaProjection">
</service>

iOS

在iOS平台上,您只需在Info.plist中添加相应的权限描述:

<key>NSPhotoLibraryUsageDescription</key>
<string>Save video in gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>Save audio in video</string>

更多关于Flutter屏幕录制功能插件flutter_screen_recording的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕录制功能插件flutter_screen_recording的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 flutter_screen_recording 插件来实现 Flutter 屏幕录制功能的代码案例。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_screen_recording 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_screen_recording: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,是一个简单的 Flutter 应用示例,展示了如何使用 flutter_screen_recording 插件进行屏幕录制:

import 'package:flutter/material.dart';
import 'package:flutter_screen_recording/flutter_screen_recording.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Recording Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScreenRecordingDemo(),
    );
  }
}

class ScreenRecordingDemo extends StatefulWidget {
  @override
  _ScreenRecordingDemoState createState() => _ScreenRecordingDemoState();
}

class _ScreenRecordingDemoState extends State<ScreenRecordingDemo> {
  late FlutterScreenRecorder _flutterScreenRecorder;
  bool _isRecording = false;

  @override
  void initState() {
    super.initState();
    _flutterScreenRecorder = FlutterScreenRecorder();
  }

  void _startRecording() async {
    setState(() {
      _isRecording = true;
    });

    try {
      final String videoPath = await _flutterScreenRecorder.startRecording(
        outputFilePath: '/storage/emulated/0/DCIM/Camera/recorded_video.mp4',  // 指定保存路径
        videoBitRate: 5000000,  // 视频比特率
        frameRate: 30,  // 帧率
      );

      print("Recording started. Video will be saved at: $videoPath");
    } catch (e) {
      print("Error starting recording: $e");
      setState(() {
        _isRecording = false;
      });
    }
  }

  void _stopRecording() async {
    setState(() {
      _isRecording = false;
    });

    try {
      await _flutterScreenRecorder.stopRecording();
      print("Recording stopped.");
    } catch (e) {
      print("Error stopping recording: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Screen Recording Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Press the buttons to start and stop recording.',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isRecording ? null : _startRecording,
              child: Text('Start Recording'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _isRecording ? _stopRecording : null,
              child: Text('Stop Recording'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. 权限处理:在 Android 上,你需要在 AndroidManifest.xml 文件中请求存储权限。此外,在运行时请求权限也是一个好做法。

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

    并在代码中请求权限(例如使用 permission_handler 插件)。

  2. 路径问题:在示例中,输出文件路径是硬编码的。在实际应用中,你可能需要使用更动态的方式来确定路径,并确保路径是有效的和可写的。

  3. 错误处理:示例中的错误处理是基本的。在实际应用中,你可能需要更健壮的错误处理逻辑。

  4. 插件版本:确保你使用的是最新版本的 flutter_screen_recording 插件,因为插件的 API 可能会随着版本更新而变化。

这个示例提供了一个基本的框架,你可以根据需要进行扩展和修改。

回到顶部