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
250
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7.4k
FlutterのWebView プラグインどれ使えば?
espresso3389
2
2.1k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.5k
Other Decks in Programming
See All in Programming
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
止められない医療アプリ、そっと Swift 6 へ
medley
1
140
Devoxx BE - Local Development in the AI Era
kdubois
0
120
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
CSC509 Lecture 02
javiergs
PRO
0
410
Catch Up: Go Style Guide Update
andpad
0
210
スマホから Youtube Shortsを見られないようにする
lemolatoon
16
16k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
350
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
140
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
980
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Bash Introduction
62gerente
615
210k
4 Signs Your Business is Dying
shpigford
185
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Speed Design
sergeychernyshev
32
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.8k
A Tale of Four Properties
chriscoyier
160
23k
Scaling GitHub
holman
463
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
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で一部挙動が異なる