Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterで動画配信するプラグインを作った話
Search
Takashi Kawasaki
July 16, 2019
Programming
4
2.2k
Flutterで動画配信するプラグインを作った話
FlutterでPlatformViewを使わずにカメラ画像を表示する動画配信プラグインを作成しました。
Takashi Kawasaki
July 16, 2019
Tweet
Share
More Decks by Takashi Kawasaki
See All by Takashi Kawasaki
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7k
FlutterのWebView プラグインどれ使えば?
espresso3389
2
1.9k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.4k
Other Decks in Programming
See All in Programming
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
980
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Six Lessons from altMBA
skipperchong
26
3.5k
Ruby is Unlike a Banana
tanoku
96
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Transcript
Flutterで 動画配信するプラグインを 作った話 川崎 高志 @espresso3389 クミナス株式会社
自己紹介 • 川崎 高志 (@espresso3389) • クミナス株式会社 代表取締役 CEO •
恵比寿の会社です • なんでもやる人 • Flutterは好きなんだけどどちらかというと底レイヤー担当
動画配信概要 カメラ プレビュー画面 FLV H.264 RTMP配信 多数の閲覧者 配信サーバー Android/iOSアプリ HLS配信
test.m3u8 test-0.ts test-1.ts test-2.ts …
PlatformView撲滅 • いろいろ不安定 • 異物感がある • 単に嫌い • 回避技術に興味がある
カメラ~エンコード/表示周り • Android • Camera/Camera2 でカメラ画像取り込み • MediaCodec でH.264変換 •
SurfaceTextureに表示 • iOS • AVFoundationでカメラ画像取り込み • AVFoundationとかの何かでH.264変換 • 多分、OpenGL Metalでなんとか表示 自分でやると死ぬ
他力本願 • 無修正のまま使えるRTMPライブラリは見つからない • 最低限の調整で何とかなりそうなライブラリを探す • Android • RtmpPublisher by
TakuSemba • 結構大掛かりな修正が必要だが他よりはかなり修正範囲が少ないかも • iOS • HaishinKit.swift by shogo4405 • とてもきれいなライブラリ! • でもFlutterで使うにはちょっとだけ問題あり
Flutterプラグイン with Texture • PlatformViewを使わず、Texture Widgetを使う • プラットフォーム側からTexture IDを受け取るだけ ※Flutter
Camera/Video Player Pluginのコードを頑張って理解した
Flutterプラグイン with Texture • Android • registrar.textures().createSurfaceTexture()でSurfaceTextureEntryを作成 • SurfaceTextureEntry.surfaceTexture()でSurfaceTextureを取得 •
SurfaceTextureEntry.id()でTexture IDを取得 • iOS • FlutterTextureプロトコルを実装 • func copyPixelBuffer() -> Unmanaged<CVPixelBuffer>? • Registrar.textures().register(obj) で登録すると疑似的なTexture IDが返る
Androidでの実装 with RtmpPublisher • パッケージとしての取り込みは断念 • ライブラリ部分だけをソースとして引き込み • RtmpPublisher.javaをほぼ全書き直し for
Flutter • FlutterGLSurfaceView • TODO: Camera→Camera2
Androidでの実装 with RtmpPublisher • RtmpPublisherはGLSurfaceViewに大きく依存している • GLSurfaceViewをFlutter向けに継承 • 実際の描画はバイパスされFlutter側のTextureに対して行われる •
Activityにぶら下がるGLSurfaceViewは基本的には何も表示しない
Androidでの実装 with RtmpPublisher
iOSでの実装 with HaishinKit.swift • サンプルそのままで90%はOK ネイティブのUIViewを 埋め込むのは避けたい
iOSでの実装 with HaishinKit.swift • HKViewはNetStreamDrawableというプロトコルを実装してい る • CIImage.pixelBuffer(iOS10以降)はCVPixelBufferなので FlutterTextureに渡すのは簡単
iOSでの実装 with HaishinKit.swift • NetStreamDrawableはフレームワークの外には公開されてない • Podを使うことを断念 • ソースを直接引き込むことにする
まとめ • 全部自分で実装するのはシンドイ • iOSは簡単だったというか、HaishinKit.swiftは美しい • AndroidのRTMPライブラリには決定打がないっぽい • GradleとかCocoaPodsで楽はできませんでした •
Flutterは楽しくて開発も早いが、プラグイン側は死ねる
ソースコード • flutter_rtmp_publisher • https://github.com/espresso3389/flutter_rtmp_publisher • 大枠は動いた • エラー処理が甘すぎる •
iOS/Androidで一部挙動が異なる