将视频捕获到画布抖动

问题描述

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

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

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

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

我用视频播放器创建了一个简单的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是解决方案？

解决方法

是的，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);

dart video-capture