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
210
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
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
300
TDD 実践ミニトーク
contour_gara
1
290
Testing Trophyは叫ばない
toms74209200
0
840
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
290
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
390
Design Foundational Data Engineering Observability
sucitw
3
190
私の後悔をAWS DMSで解決した話
hiramax
4
210
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
個人軟體時代
ethanhuang13
0
320
為你自己學 Python - 冷知識篇
eddie
1
350
Ruby Parser progress report 2025
yui_knk
1
420
print("Hello, World")
eddie
1
520
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
The Language of Interfaces
destraynor
161
25k
Faster Mobile Websites
deanohume
309
31k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Automating Front-end Workflow
addyosmani
1370
200k
Being A Developer After 40
akosma
90
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
It's Worth the Effort
3n
187
28k
Agile that works and the tools we love
rasmusluckow
330
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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で一部挙動が異なる