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
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
ヤプリ新卒SREの オンボーディング
masaki12
0
130
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
Outline View in SwiftUI
1024jp
1
330
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Side Projects
sachag
452
42k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
4 Signs Your Business is Dying
shpigford
180
21k
BBQ
matthewcrist
85
9.3k
Facilitating Awesome Meetings
lara
50
6.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Designing Experiences People Love
moore
138
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
GitHub's CSS Performance
jonrohan
1030
460k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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で一部挙動が異なる