baseflow / screenrecorder Goto Github PK

I tried to change the color but its not allowing me to use transparent color. Please help

I tried to create a fork of this and remove the assertions for transparency. It did not work as expected. Can you point me to the code where can I implement support for transparency on my own?

@ueman

Hey, I think this package is awesome, I used it in my app.
But there is problem when I set the pixelRatio to 3 it will take a very long time to generate the frames.

I use this package to record the widget and then use the frames to make a video. But it will become a problem if it takes a very long time to generate the frames.

Thanks

Because video_cap_com_test depends on screen_recorder >=0.1.0 which requires Flutter SDK version >=3.4.0-34.1.pre, version solving failed.
pub get failed (1; Because video_cap_com_test depends on screen_recorder >=0.1.0 which requires Flutter SDK version >=3.4.0-34.1.pre, version solving failed.)
exit code 1

If this package is running on web, it would be nice to be able to offload the processing of the frames to a webworker.

As the title says, we should create some issue templates to get useful bug reports.

Some inspiration can be found here: https://github.com/cfug/diox/tree/main/.github/ISSUE_TEMPLATE

Continuous clicking on showRecodedVideo button gives error, null check operator used on a null value.

Mainly because the _frames is empty, which then results in gif being empty, Maybe try adding a null value judgment.

First, thanks for creating this package ;)

I wanted to propose a change to the API for Exporter. The current API is really coupled to export a GIF(or any composition resulting in List). In my use case for example I will not need a List since my plan is to send to a backend the frames captured by the recorded. So something like this will be sufficient for me:

class FramesExporter implements Exporter {
  final List<Frame> _frames = [];
  @override
  void onNewFrame(Frame frame) {
    _frames.add(frame);
  }

  @override
  Future<List<ByteData>> export() async {
    final images = <ByteData>[];
    for (final frame in _frames) {
      final bytes =
          await frame.image.toByteData(format: ui.ImageByteFormat.png);
      if (bytes != null) {
        images.add(bytes);
      } else {
        print('Skipped frame while enconding');
      }
    }
    return images;
  }
}

This can be achieved by changing the Exporter class to:

abstract class Exporter {
  void onNewFrame(Frame frame);
  Future export();
}

And that way your current GifExporter is not affected and there is not any breaking change. Let me know if you are ok with this and I can create a PR since I already have a branch with the changes also adding a new example where instead of exporting a GIF simply display in a ListView the frames captured.

Thanks!

I want to capture both video and internal audio.

is it possible with this plugin ?

When I try to record I receive this error
Exception: _containerKey.currentContext is null. Thus we can't create a screenshot

This repo should be converted to a mono repo.

Other packages could be:

• custom exporter which makes use of native code to export to a video file (common request)
• custom exporter which adds support for recording audio (if that's possible)

Adding those packages is not part of this ticket though.

mjpeg is a video format which basically consists of an array of jpegs. An encoder for should be fairly easy to write in Dart. There are a couple of implementations in various other languages which can be used as a starting point.

• https://github.com/jcodec/jcodec/tree/master/src/main/java/org/jcodec/codecs/mjpeg
• https://github.com/lessthanoptimal/BoofCV/blob/v0.26/main/io/src/boofcv/io/video/CreateMJpeg.java

if i increase the pixel ratio property in screen recorder controller object then it very slow the overall app?

Hi thanks for the lib! I see it does not support mp4 but support gif, but seems that the size is usually 5-10x bigger. Thus I wonder what to do to support mp4?

Or, can we use webp?

Now in ScreenRecorderController we can pass Exporter, but in the end GifExporter is always used.
Propose:
exporter = exporter ?? GifExporter();

Inspired by the following https://github.com/ABausG/home_widget/blob/b7663c12eea36daa1033fe5d87f513819d1e2ea5/lib/home_widget.dart#L114:L187

It may be possible to render widgets in a headless mode. This could enable a more ergonomic API to record widgets.

image package's encodeGIF cannot encode transparent background, so all we get is a black square when we actually play the video. Should I make a PR to make the background white? (or any non transparent color)

I am new to Flutter and I am trying to use this dependency to record the screen.

The following exception is being thrown after calling the export function:

[VERBOSE-2:ui_dart_state.cc(198)] Unhandled Exception: Concurrent modification during iteration: Instance(length:7) of '_GrowableList'.
#0      ListIterator.moveNext (dart:_internal/iterable.dart:336:7)
#1      ScreenRecorderController.export (package:screen_recorder/src/screen_recorder.dart:111:25)
<asynchronous suspension>

The code to reproduce it:

  @override
  Widget build(BuildContext context) {
    ...
    return IconButton(
      icon: IconBuilder.get(...) :
      onPressed: () async {
        if (widget.recordController == null) {
          gameState.stop();
          return;
        }

        if (gameState.isPlaying) {
          gameState.stop();
          var gif = await widget.recordController!.export();

          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: Image.memory(Uint8List.fromList(gif!)),
              );
            },
          );

          return;
        }

        gameState.play();
        widget.recordController!.start();
      },
    );
  }

Any suggestion?

Many thanks

The argument type 'List? can't be assigned to the parameter type 'Uint8List'.

Add audio to screen recording and export as video
:)

I am wanted to show the user that frames are generating in percent

I think it would be nice if there is some percentage when exporting frames so I can show the progress to the user. Or maybe there are some alternative that I can use to show the percentage to user?

Thanks 😄

I am new to flutter.

I want to make a screen recorder app .

I used this plugin and your example code but I have 3 errors.

  D:\screenrecorder>flutter run
  Launching lib\main.dart on SM M307F in debug mode...
  lib/main.dart:22:19: Error: The parameter 'key' can't have a value of 'null' because of its type 'Key', but the implicit default value is 
  'null'.
 - 'Key' is from 'package:flutter/src/foundation/key.dart' ('/C:/flutter/packages/flutter/lib/src/foundation/key.dart').
 Try adding either an explicit non-'null' default value or the 'required' modifier.
 MyHomePage({Key key, this.title}) : super(key: key);
              ^^^
lib/main.dart:22:29: Error: The parameter 'title' can't have a value of 'null' because of its type 'String', but the implicit default value 
  is 'null'.
  Try adding either an explicit non-'null' default value or the 'required' modifier.
  MyHomePage({Key key, this.title}) : super(key: key);
                        ^^^^^
 lib/main.dart:83:45: Error: The argument type 'List<int>?' can't be assigned to the parameter type 'Uint8List'.
 - 'List' is from 'dart:core'.
 - 'Uint8List' is from 'dart:typed_data'.
                  content: Image.memory(gif),
                                        ^


FAILURE: Build failed with an exception.

* Where:
 Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1035

 * What went wrong:
 Execution failed for task ':app:compileFlutterBuildDebug'.
 > Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

 * Try:
 Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to 
  get full insights.

 * Get more help at https://help.gradle.org

 BUILD FAILED in 1m 17s
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        81.3s
Exception: Gradle task assembleDebug failed with exit code 1

Error at this two lines

1. https://github.com/ueman/screenrecorder/blob/main/example/lib/main.dart#L22
2. https://github.com/ueman/screenrecorder/blob/main/example/lib/main.dart#L83

How can I solve this ?

I must use the latest version of the image package.
Can you update this package to use the image package with the newest version?

On io platforms it's possible to do the processing in a sticky background isolate. This approach was already prototyped in #21

The prototype needs to be finished.

Ideally the chosen interface is compatible with #29

i have used screen_recorder: ^0.0.3 version for recording my widget but video player widget is recorded as white screen and content of video not visible.

screen_recorder: ^0.0.3
video_player: ^2.4.10

Hi, it's a good job to start with. However, I see the following issues.

1. Low quality image captured if given ratio 1. If I scale the image based on device pixel ratio, the image becomes very large to save. It quickly uses up a lot of memory if I use 'png' format which causes app crashes. It seems to work fine with 'rawrgba' format but the size is very large.
2. The method 'toImageSync' app crashes due to memory usage as well. It works with by using 'toImage'.

I don't know if there is a way to solve those issues by using isolates.

Hi,
I think your package is very cool but I don't understand why you require flutter version in beta.
Could you publish a version for stable?
Many thanks!

Added this widget on the videoplay, then recorded, and the final generated gif speeded up

`

SizedBox(
width: w-80,
height: h-80,
child: ListView.builder(
itemCount: h~/10 - 8,
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context,index){
return SizedBox(
height: h/10 - 8,
child: ListView.builder(
itemCount:w~/10 - 8,
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx,ind){
return ClipRRect(
child: Container(
width: w~/10 - 8,height: h~/10 - 8,
color: listcolor[Random().nextInt(listcolor.length-1)],
child: Stack(
children: [
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Text(''),
)
),
],
)
),
);
},
),
);
},
),
)

`

1.The height is uncertain, with white edges above and below

`

Container(
width: Get.width,
height: Get.height,
color: Colors.black,
child: Center(
child: ScreenRecorder(
controller: screenRecorderController,
width: uiImage.width.toDouble(),
height: uiImage.height.toDouble(),
child: Stack(
children: [
Center(
child: Image.file(widget.file,width: uiImage.width.toDouble(),height: uiImage.height.toDouble(),),
),
Positioned(
top: y,
left: x,
child: GestureDetector(
onPanUpdate: (DragUpdateDetails e) {
setState(() {
x += e.delta.dx;
y += e.delta.dy;
});
},
onPanEnd: (DragEndDetails e){
print(e.velocity);
},
child: Text(widget.text,style: TextStyle(color: Colors.red,fontSize: 30),),
),
),
],
),
),
),
)

`

Very impressive.

Can we the run the export on a seperate isolate to speed things up?