捕获视频到画布抖动 [英] Capture video to canvas flutter

查看:32
本文介绍了捕获视频到画布抖动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I would like to implement a video to canvas app like my example in js : http://jsfiddle.net/Ls9kfwot/2/

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

But my problem is how i can take a screenshot of video player in a specific area? like js in drawImage:

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

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

but in Flutter what can i use for reproduce video to canvas?

我用视频播放器创建了一个简单的 flutter 项目:

i created a simple flutter project with a video player:

  @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 and drawImage is the solution?

推荐答案

是的,RenderRepaintBoundary 和 drawImage 正是您想要的.

Yep, RenderRepaintBoundary and drawImage is what you want.

  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);

这篇关于捕获视频到画布抖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆