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.4k
Flutterで動画配信するプラグインを作った話
FlutterでPlatformViewを使わずにカメラ画像を表示する動画配信プラグインを作成しました。
Takashi Kawasaki
July 16, 2019
Tweet
Share
More Decks by Takashi Kawasaki
See All by Takashi Kawasaki
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
270
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7.5k
FlutterのWebView プラグインどれ使えば?
espresso3389
2
2.1k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.5k
Other Decks in Programming
See All in Programming
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
contribution to astral-sh/uv
shunsock
0
530
NIKKEI Tech Talk#38
cipepser
0
220
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.5k
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
240
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
250
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
940
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Developer Joy - The New Paradigm
hollycummins
1
360
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Featured
See All Featured
Done Done
chrislema
185
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Why Our Code Smells
bkeepers
PRO
340
57k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Making Projects Easy
brettharned
120
6.4k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Pragmatic Product Professional
lauravandoore
36
7k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
The Cult of Friendly URLs
andyhume
79
6.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
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で一部挙動が異なる