Flutter は、texture_rgba_renderer を使用してデスクトップ上にビデオをレンダリングします。

Flutterビデオレンダリングシリーズ

第 1 章 Android はテクスチャを使用してビデオをレンダリングする
第 2 章 Windows はテクスチャを使用してビデオをレンダリングする
第 3 章 Linux はテクスチャを使用してビデオをレンダリングする
第 4 章 フル プラットフォーム FFI+CustomPainter を
使用してビデオをレンダリングする 第 5 章 Windows はネイティブ ウィンドウを使用してビデオをレンダリングする
第 6 章 デスクトップは texture_rgba_renderer を使用する ビデオのレンダリング(この章)



序文

前章では、flutter がテクスチャを使用してビデオをレンダリングする方法を紹介しましたが、テクスチャを作成するには各プラットフォームで一連のネイティブ コードを記述する必要があり、コードのメンテナンスに役立たないという問題があります。最善の方法は、コードのセットがすべてのプラットフォームで実行できることです。私は最近、Pub でテクスチャをカプセル化するプラグインを見つけました。これは、rgba レンダリング用のテクスチャを呼び出すダーツ コードを直接提供します。もちろん、デスクトップのみをサポートします。つまり、Windows と Linux 、Macos ですが、それでも非常に便利です。


1. 達成方法

1.プラグインを追加する

プラグインのアドレスはhttps://pub-web.flutter-io.cn/packages/texture_rgba_rendererです。pubspec.yaml に依存関係を直接追加できます。
頼る

texture_rgba_renderer: ^0.0.16

引用

import 'package:texture_rgba_renderer/texture_rgba_renderer.dart';

ここに画像の説明を挿入

2. テクスチャの作成

グローバルプラグインオブジェクトを定義する

final _textureRgbaRendererPlugin = TextureRgbaRenderer();

テクスチャを作成し、textureId を取得する

//textureId,使用ValueNotifier方便刷新界面
ValueNotifier<int> _textureId = ValueNotifier<int>(-1);
//参数为唯一标识符,使用当前对象this的hashCode。
 _textureId.value = await _textureRgbaRendererPlugin.createTexture(hashCode);

3. テクスチャコントロールの関連付け

//ValueListenableBuilder与ValueNotifier是配套使用的,方便界面刷新。
ValueListenableBuilder(
                      valueListenable: _textureId,
                      builder: (c, v, w) {
    
    
                        //关联textureId
                        return Texture(textureId: _textureId.value);
                      })),

4.bgraへの書き込み

データ形式はffmpegのAV_PIX_FMT_BGRAです

//数据地址
int adress = msg[2];
//一行数据长度
int linesize = msg[3];
int width = msg[4];
int height = msg[5];
//将bgra数据写入texture
final ptr = await _textureRgbaRendererPlugin.getTexturePtr(hashCode);
Native.instance.onRgba(
	Pointer.fromAddress(ptr),
	Pointer.fromAddress(adress),
	height* linesize,
	width,
	height,
	linesize);

2. エフェクトのプレビュー

基本的なランニング効果

ここに画像の説明を挿入


3. 問題分析

texture_rgba_renderer: 0.0.16、現在のバージョンに関する限り、CPU 消費量はネイティブ テクスチャ書き込みよりもはるかに高くなります主な理由は、dart が bgra データを書き込むとき、プラグインの最下位層が最初にデータを 1 回コピーし、次にそのデータに対して 2 回目の行ごとのスキャンを実行して、それを新しいバッファ アライメント データにコピーするためです。操作、特にプログレッシブ スキャン コピーでは、より多くの CPU が消費されます。


4. 完全なコード

https://download.csdn.net/download/u013113678/88124430
サンプル コードには、Windows および Linux用のビデオ レンダリングのみが含まれています。
注: texture_rgba_renderer: 0.0.16 のパフォーマンスはあまり良くありません。必要に応じてダウンロードしてください。


要約する

今日は以上が話したいことです. texture_rgba_renderer を使ってビデオレンダリングを実現するというのは筆者が偶然発見した方法です. 本質もテクスチャですが、誰かがそれをプラグインとしてカプセル化してとても便利に使っています.小さなビデオ画像をプレビューするために使用されますが、まったく問題ありません。

おすすめ

転載: blog.csdn.net/u013113678/article/details/132000510