Flutter屏幕录制插件device_screen_recorder的使用

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

Flutter屏幕录制插件device_screen_recorder的使用

device_screen_recorder 是一个基于 HBRecorder 的 Flutter 插件,用于在 Android 和 iOS 设备上录制屏幕。该插件要求 Android SDK 版本为 21 或以上。

开始使用

此插件可用于在 Android 和 iOS 设备上录制屏幕。

启动录制
bool started = DeviceScreenRecorder.startRecordScreen(name: 'example');

或者

bool started = DeviceScreenRecorder.startRecordScreen();
停止录制
String path = DeviceScreenRecorder.stopRecordScreen();

Android 配置

在 Android 设备上使用此插件时,需要添加以下权限到你的 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" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

在你的根 build.gradle 文件末尾添加以下内容:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

在你的应用级 build.gradle 文件中添加依赖:

dependencies {
    implementation 'com.github.HBiSoft:HBRecorder:2.0.0'
}

iOS 配置

目前 iOS 端还在开发中。

示例代码

以下是完整的示例代码,展示了如何在 Flutter 应用中使用 device_screen_recorder 插件进行屏幕录制。

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

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

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

class _MyAppState extends State<MyApp> {
  bool recording = false;
  String path = '';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              recording
                  ? OutlinedButton(
                      onPressed: () async {
                        var file = await DeviceScreenRecorder.stopRecordScreen();
                        setState(() {
                          path = file ?? '';
                          recording = false;
                        });
                      },
                      child: Text('停止'),
                    )
                  : OutlinedButton(
                      onPressed: () async {
                        var status = await DeviceScreenRecorder.startRecordScreen();
                        // var status = await DeviceScreenRecorder.startRecordScreen(name: 'example');
                        setState(() {
                          recording = status ?? false;
                        });
                      },
                      child: Text('开始'),
                    ),
              Text(path),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用device_screen_recorder插件进行屏幕录制的代码示例。

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

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

然后运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中按照以下步骤使用device_screen_recorder插件进行屏幕录制:

  1. 导入插件

在你的Dart文件中导入device_screen_recorder插件:

import 'package:device_screen_recorder/device_screen_recorder.dart';
  1. 请求权限(如果需要):

根据操作系统的不同,你可能需要请求存储权限以保存录制的视频。以下是一个简单的权限请求示例:

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  var status = await Permission.storage.status;
  if (!status.isGranted) {
    var result = await Permission.storage.request();
    if (!result.isGranted) {
      // 处理权限被拒绝的情况
    }
  }
}

注意:permission_handler插件用于处理权限请求,你需要在pubspec.yaml文件中添加该依赖。

  1. 初始化并开始录制

在你的Flutter应用中初始化并开始屏幕录制:

void startRecording() async {
  final DeviceScreenRecorder recorder = DeviceScreenRecorder();

  // 设置录制参数(可选)
  final RecordingOptions options = RecordingOptions(
    audioEnabled: true, // 是否录制音频
    bitRate: 4000000,   // 比特率
    codec: VideoCodec.h264, // 视频编解码器
    orientation: Orientation.portrait, // 录制方向
    quality: VideoQuality.high, // 视频质量
  );

  // 开始录制
  try {
    await recorder.startRecording(options: options);
    print("Recording started");
  } catch (e) {
    print("Failed to start recording: $e");
  }
}
  1. 停止录制并保存视频

当你想要停止录制并保存视频时,可以调用stopRecording方法:

void stopRecording() async {
  final DeviceScreenRecorder recorder = DeviceScreenRecorder();

  try {
    final String filePath = await recorder.stopRecording();
    print("Recording stopped. Video saved at: $filePath");
    // 你可以在这里处理保存的视频文件,比如显示一个提示或者上传视频
  } catch (e) {
    print("Failed to stop recording: $e");
  }
}
  1. 完整示例

以下是一个完整的示例,展示了如何在Flutter应用中集成并使用device_screen_recorder插件:

import 'package:flutter/material.dart';
import 'package:device_screen_recorder/device_screen_recorder.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Recorder Example'),
        ),
        body: ScreenRecorderExample(),
      ),
    );
  }
}

class ScreenRecorderExample extends StatefulWidget {
  @override
  _ScreenRecorderExampleState createState() => _ScreenRecorderExampleState();
}

class _ScreenRecorderExampleState extends State<ScreenRecorderExample> {
  DeviceScreenRecorder _recorder = DeviceScreenRecorder();

  @override
  void initState() {
    super.initState();
    requestPermissions();
  }

  Future<void> requestPermissions() async {
    var status = await Permission.storage.status;
    if (!status.isGranted) {
      var result = await Permission.storage.request();
      if (!result.isGranted) {
        // 处理权限被拒绝的情况
      }
    }
  }

  void _startRecording() async {
    final RecordingOptions options = RecordingOptions(
      audioEnabled: true,
      bitRate: 4000000,
      codec: VideoCodec.h264,
      orientation: Orientation.portrait,
      quality: VideoQuality.high,
    );

    try {
      await _recorder.startRecording(options: options);
      print("Recording started");
    } catch (e) {
      print("Failed to start recording: $e");
    }
  }

  void _stopRecording() async {
    try {
      final String filePath = await _recorder.stopRecording();
      print("Recording stopped. Video saved at: $filePath");
    } catch (e) {
      print("Failed to stop recording: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: _startRecording,
            child: Text('Start Recording'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _stopRecording,
            child: Text('Stop Recording'),
          ),
        ],
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中集成并使用device_screen_recorder插件进行屏幕录制。请根据你的实际需求对代码进行调整。

回到顶部