捕捉视频 canvas 颤动
Capture video to canvas flutter
我想在 canvas 应用程序中实现一个视频,就像我在 js 中的示例:http://jsfiddle.net/Ls9kfwot/2/
但我的问题是如何在特定区域截取视频播放器的屏幕截图?
像 drawImage 中的 js:
ctx.drawImage(sx,sy,swidth,sheight,x,y,width,height); // js drawimage
但是在 Flutter 中,我可以使用什么来将视频重现为 canvas?
我用视频播放器创建了一个简单的 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);
我想在 canvas 应用程序中实现一个视频,就像我在 js 中的示例:http://jsfiddle.net/Ls9kfwot/2/
但我的问题是如何在特定区域截取视频播放器的屏幕截图? 像 drawImage 中的 js:
ctx.drawImage(sx,sy,swidth,sheight,x,y,width,height); // js drawimage
但是在 Flutter 中,我可以使用什么来将视频重现为 canvas?
我用视频播放器创建了一个简单的 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);