「Web」「iOS」「Android」でFlutterで作った「video_player」を表示する方法

「Web」「iOS」「Android」における動画の表示

川上健太郎氏：次は動画の描画です。先ほどもちらっと言ったんですが、Platform Viewではなくて、Texture Widgetを使っています。詳しい説明はこのURLを見てもらいたいんですが、プラットフォーム側からtextureIdを受け取って、ビデオフレーム到着時に自動的にバックエンドの指示に従って再描画されます。通常Dartのコード実行は含まれません。

要するにtextureIdを受け取って、それを渡すとよしなにやってくれます。実際どんな感じなのかをDart、iOS、Androidで見ていきたいと思います。

まずDartです。Dartはメチャクチャ簡単です。VideoPlayerControllerにbuild関数があるんですが、それはVideoPlayerPlatformのbuildViewを参照しています。buildViewは受け取ったtextureIdをTextureに渡しているだけです。

次はiOSです。iOSはプレーヤーを実装するクラスをFlutterTextureに準拠します。FlutterTextureの中に含まれているcopyPixelBufferはどういうものかというと、AVPlayer videoOutputがあって、そこから最新のPixelBufferを取ってきて返すという処理が書かれています。

onTextureUnregisteredというのは、FlutterTextureがUnregisteredされたときの処理を書きます。ここではdispose関数を呼んでいますね。

FlutterTextureを管理するFlutterTextureRegistryというものがあります。上のregistertextureは、registory.registerTexture:player、FlutterTextureに準拠したものを渡すと、textureIdが返ってくるので、これをDart側に渡して、それをもとにTexture Widgetを描画する仕組みになっています。

textureFrameAvailableという関数は、FlutterにTextureが更新されたことを伝えます。これを呼ぶと、FlutterTexture.copyPixelBufferが呼び出されます。iOSではCADisplayLinkが作成されていて、その中のセレクターの中でこの関数が呼ばれています。これはTextureをUnregisterするときの処理です。

次は、Androidです。AndroidもTextureRegistryがあって、これはiOSよりもさらに簡単です。このcreateSurfaceTextureでtextureIdを返すSurfaceTextureEntryが生成され、このidを使用します。先ほどのTextureのRegisterとSurfaceTextureをFlutterEngineがよしなに管理してくれます。

作成したSurfaceTextureをExoPlayerにセットするとよしなにやってくれて、textureIdもゲットできます。

プラットフォームとDartの接続部分を自動生成してくれる「Pigeon」

次に、機能の追加について説明したいと思います。機能を追加するには、PigeonというFlutterが出しているパッケージが使われています。プラットフォームとDartの接続部分を自動生成してくれる便利なものです。

pigeon/messages.dartという自動生成の元ファイルのDartファイルに、設定したいmessageと渡したいものを置きます。LimitBitrateMessageはサンプルで画質設定のものです。

video_playerAPIのabstractクラスの中に、setLimitBitrateMessageを渡して、コマンドを実行して、Flutterプラグインの独自のフォーマットを実行すると、各プラットフォームファイルを生成してくれます。

本当はこのあたりもメチャクチャ書きたかったんですが、時間がなくて端折りました。実装についてのまとめです。iOSはObjective-C、AndroidはJavaでそれぞれ実装しなければいけません。

ガチガチに定義された要件でなければ「video_player」は導入可能

最後にまとめです。ガチガチの要件じゃなければ、けっこうサクッと導入できそうだなと思いました。私は元iOSエンジニアで、Objective-Cを見たことはあるけど、実は書いたことはないゆとり教育な者なんですが、Objective-Cを初めて触って書いてみて、今はiOSはSwift、AndroidはKotlinという時代なのに逆戻りじゃないですが、なんか不思議な気持ちになりました。Javaは書きやすかったです。

あとiOSエンジニアとして、ExoPlayerのexampleがメチャクチャ充実していて感動しました。iOSのプレーヤーってけっこう手探りなことが多いんですが、ExoPlayerのexampleは有志の結晶というか、ものがわかりやすく、設計も見やすかったので、iOSにもあのようなものが欲しいと思いました。

以上です。ありがとうございました。