将视频捕获到画布颤动答案

【问题标题】：Capture video to canvas flutter将视频捕获到画布颤动
【发布时间】：2020-09-18 12:02:14
【问题描述】：

我想实现一个视频到画布应用程序，就像我在 js 中的示例：http://jsfiddle.net/Ls9kfwot/2/

但我的问题是如何在特定区域截取视频播放器的屏幕截图？比如drawImage中的js：

ctx.drawImage(sx,sy,swidth,sheight,x,y,width,height); // js drawimage

但在 Flutter 中，我可以使用什么来将视频复制到画布上？

我用视频播放器创建了一个简单的颤振项目：

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: YoYoPlayer(
        aspectRatio: 16 / 9,
        url:
            "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv",
        videoStyle: VideoStyle(),
        videoLoadingStyle: VideoLoadingStyle(
          loading: Center(
            child: Text("Loading video"),
            //capture image of video and display it
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

RenderRepaintBoundary 和 drawImage 是解决方案？

【问题讨论】：

标签： flutter dart video-capture

【解决方案1】：

是的，RenderRepaintBoundary 和 drawImage 就是你想要的。

  GlobalKey _repaintKey = GlobalKey();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RenderRepaintBoundary(
        key: _repaintKey,
        child: YoYoPlayer(
          aspectRatio: 16 / 9,
          url:
              "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv",
          videoStyle: VideoStyle(),
          videoLoadingStyle: VideoLoadingStyle(
            loading: Center(
              child: Text("Loading video"),
              //capture image of video and display it
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

final boundary = _repaintKey.context.findRenderObject() as RenderRepaintBoundary;
final image = await boundary.toImage();
canvas.drawImage(image, Offset(10, 20), paint);

【讨论】：

谢谢@uanirudhx，在第二部分 canvas.drawImage 需要偏移，但我如何指定自定义位置，如 (sx,sy,swidth,sheight,x,y,width,height) ？请问你有例子吗？
我添加了一个在自定义偏移处绘制的示例，但您必须以其他方式调整图像大小。但是，您可能一直在寻找 drawImageRect 方法。