提示:阅读此文章之前需要有C++开发经验,知道如何利用channel在C++和Dart之间做通信。
前言
一、PlatformView与Texture是什么?
二、使用步骤
1.在Flutter需要显示视频的地方声明Texture组件
2.在Windows插件代码里面创建TextureRenderer类
3.Flutter通过channel调用Windows插件创建Texture
4.Windows插件部分C++更新视频RGBA,并通知flutter刷新界面
三、运行效果演示
总结
前言
Flutter渲染视频在移动端比较容易,可以用PlatformView,Texture等,但在Windows平台无法使用PlatformView,原因是Windows的每一个窗口都是一个窗口句柄(HWND),如果强行的增加一 个PlatformView,那以后想在PlatformView所占据的位置弹出其他Flutter控件,会被遮盖,因此Windows平台视频渲染只能用Texture,效率并不像网上提到的那么并。目前Windows平台的示例代码几乎搜索不到,笔者在对接声网和网易两家公司RTC SDK的过程中,成功渲染了两家公司的多媒体播放器和RTC提供的视频,确定了Windows平台使用Texture渲染视频的方法,写下此文章,希望对后来的开发者有些许帮助。
一、PlatformView与Texture是什么?
PlatformView主要适用于原生已经很成熟的组件,嵌入到Flutter中,节省开发时间,例如WebView,视频播放器等。由于Windows窗口机制的原因,在Windows平台并不支持PlatformView。
Texture是一个颜色数据缓存区,只要平台将缓存区更新后,通知Flutter刷新界面即可。例如视频渲染,只需要将当前视频帧的RGBA缓存区拷贝到Texture的缓存区,然后Flutter刷新界面即可实现视频渲染,这种方式更dart。
二、使用步骤
1.在Flutter需要显示视频的地方声明Texture组件
代码如下:
Container( color: Colors.black, child: Texture(textureId: (widget.viewModel.textureId)) );
2.在Windows插件代码里面创建TextureRenderer类
代码如下:
class TextureRenderer {
public:
TextureRenderer(flutter::BinaryMessenger* messenger,
flutter::TextureRegistrar* registrar);
bool TextureRenderer::onRenderVideoFrame(unsigned int uid, agora::media::IVideoFrameObserver::VideoFrame& videoFrame);
private:
flutter::BinaryMessenger* messenger_ = nullptr;
flutter::TextureRegistrar* registrar_ = nullptr;
std::unique_ptr<TextureRenderer> fullScreenTextureRenderer_; //全员看他纹理
std::map<int64_t, std::unique_ptr<TextureRenderer>> renderers_; //通用的直播渲染纹理
}
TextureRenderer::TextureRenderer(flutter::BinaryMessenger *messenger,
flutter::TextureRegistrar *registrar)
: registrar_(registrar),
texture_(PixelBufferTexture(std::bind(&TextureRenderer::CopyPixelBuffer,
this, std::placeholders::_1,
std::placeholders::_2))),
uid_(0), pixel_buffer_(new FlutterDesktopPixelBuffer{nullptr, 0, 0}) {
texture_id_ = registrar->RegisterTexture(&texture_);
channel_ = std::make_unique<MethodChannel<EncodableValue>>(
messenger,
"strong_live_player/texture_render_" + std::to_string(texture_id_),
&flutter::StandardMethodCodec::GetInstance());
channel_->SetMethodCallHandler([this](const auto &call, auto result) {
this->HandleMethodCall(call, std::move(result));
});
}
3.Flutter通过channel调用Windows插件创建Texture
Flutter层面通过channel调用C++的createTextureRender函数后,会创建上面提到的第二步提到的TextureRender类实例,并与第一步提到的Flutter层面的Texture控件绑定。
PlayerViewModel init(var callback) {
AgoraMediaPlayerKit.channel.invokeMethod('createTextureRender', {
}).then((value) {
textureId = value;
_channel = MethodChannel('agora_media_player_kit/texture_render_$value');
_channel?.setMethodCallHandler(_platformCallHandler);
callback();
refresh();
});
return this;
}
4.Windows插件部分C++更新视频RGBA,并通知flutter刷新界面
这一步是收到播放器的视频帧回调后,通知Flutter层面进行渲染。所做的工作就是把视频帧的RGBA缓存区拷贝到Flutter底层提供的pixel_buffer。 并通知刷新,至此,视频渲染工作完成。缓存区的大小为 视频宽度 * 视频高度 * 4,之所以要乘以4,是因为每个颜色点由一个32位整数组成,每个颜色点的每一BIT排列顺序为 RGBA,分别代表红、绿、蓝、透明度,值为0~255。 代码如下:
bool TextureRenderer::onRenderVideoFrame(unsigned int uid, agora::media::IVideoFrameObserver::VideoFrame& videoFrame)
{
std::lock_guard<std::mutex> lock_guard(mutex_);
if (pixel_buffer_->width != videoFrame.width ||
pixel_buffer_->height != videoFrame.height) {
if (pixel_buffer_->buffer) {
delete[] pixel_buffer_->buffer;
}
pixel_buffer_->buffer = new uint8_t[videoFrame.width * videoFrame.height * 4];
}
memcpy((void*)pixel_buffer_->buffer, videoFrame.yBuffer,
videoFrame.width * videoFrame.height * 4);
pixel_buffer_->width = videoFrame.width;
pixel_buffer_->height = videoFrame.height;
registrar_->MarkTextureFrameAvailable(texture_id_);
return true;
}
三、运行效果演示
20220924-100136文章来源:https://www.toymoban.com/news/detail-411077.html
总结
以上就是今天要讲的内容,Flutter在Windows上使用Texture进行视频渲染,对于不懂C++的人来说可能有点难懂。代码只有最关键的部分,如果有疑问,可以回复留言交流。文章来源地址https://www.toymoban.com/news/detail-411077.html
到了这里,关于Flutter 用Texture控件在Windows平台实现视频渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!