狠狠撸

狠狠撸Share a Scribd company logo
二次元直播 - 虛擬主播
與 ReplayKit 的邂逅
Han Chang
我是誰
? 17 Media iOS 工程師
? Twitter:@8E9BfRgcq3vsVUZ
? 雪癌患者
2
二次元直播 - 虛擬主播與 ReplayKit 的邂逅
3
二次元直播 - 虛擬主播與 ReplayKit 的邂逅
4
虛
擬
主
播
5
虛
擬
主
播
6
虛
擬
主
播
7
如何將動作、表情,連動到虛擬人物?
8
如何將動作、表情,連動到虛擬人物?
9
所以到底主題是?
10
使用 ReplayKit 將螢幕影像及聲音推流
11
虛擬主播操作流程
12
大綱
? 17 直播推流架構
? 螢幕直播推流架構
? 實作螢幕直播遇到的問題
13
17 直播推流架構
14
傳統架構
主播
觀眾
觀眾
Server
15
傳統架構
主播
觀眾
觀眾
Server
(有什麼缺點呢?)
16
Server Clusters
主播
觀眾
觀眾
Serv
er
Clusters Edge
Server
Edge
Server
Edge
Server
Sync
Sync
17
主播端:客製化的 LFLiveKit
濾鏡+渲染影像採集
編碼 推流
混音聲音採集
18
螢幕直播推流架構
19
Extension & ReplayKit
20
App Extension
App
Extension
Containing
App
Host App
Request
Response
21
ReplayKit 版本差異
iOS 9 iOS 10 iOS 11 iOS 12
基本錄製功能
透過 App Extension
取得 real time data
系統層級的錄製
(ReplayKit 2)
從 App 啟動系統錄製
App Extension
22
螢幕錄製 on iOS 9
RPScreenRecorder
RPPreview
ViewController
開始錄製 結束錄製
編輯 / 儲
存
23
An App
螢幕直播 on iOS 10
Broadcast Upload
Extension
Start / Stop
LFLiveKit
A/V Data
24
An App
螢幕直播 on iOS 11
Control
Center
Broadcast Upload
Extension
LFLiveKit
A/V Data
ReplayKit Select UI
Present Select UI
Start / Stop
25
iOS 11 螢幕直播生命週期
Application
Broadcast
Upload
Extension
LFLiveKit
26
iOS 11 螢幕直播生命週期
27
Application
Broadcast
Upload
Extension
LFLiveKit
iOS 11 螢幕直播生命週期
Process
Sample
Application
設定 初始化 開始 處理樣本 停止
錯誤警示
Broadcast Upload Extension
28
iOS 11 螢幕直播生命週期
濾鏡+渲染影像採集
編碼 推流
混音聲音採集
LFLiveKit
29
iOS 11 螢幕直播生命週期
濾鏡+渲染Video
編碼 推流
混音
Audio (Mic)
Broadcast Upload
Extension LFLiveKit
Audio (App)
30
實作螢幕直播遇到的問題
31
檢查使用者是否已登入 17?
32
如何與 溝通
? 共用 NSUserDefault (間接)
? 使用 CFNoti?cationCenter (直接)
33
觀眾聽不到主播聲音
34
混音:以誰為主?
Audio (app)
Audio (mic)
35
混音:以 App Audio 為主
Audio (app)
Audio (mic)
Mix Audio
36
混音:Video 備案
Video
Audio (app)
Audio (mic)
Mix
Audio (fake)
trigger
Audio
37
有聲音但影像變好卡
38
音視頻同步
時間
影像
聲音(0 ~ 0.5秒)
0秒 0.5秒 1秒
39
(Timestamp 均為 0.5)
音視頻同步
時間
影像
0秒 0.5秒 1秒
聲音(0 ~ 0.5秒)
40
(Timestamp 平均分配)
螢幕轉橫就跑板了
41
42
螢幕方向資訊
? CMSampleBufferRef
-> RPVideoSampleOrientationKey
-> CGImagePropertyOrientation
? API_AVAILABLE(ios( 11.1))
43
影像渲染編碼流程
渲染影像 渲染結果 編碼
44
影像渲染編碼流程
渲染影像 渲染結果 編碼
輸出影像尺寸
螢幕方向
重新產生 frame
bu?er
45
影像渲染編碼流程
渲染影像 渲染結果 編碼
輸出影像尺寸
螢幕方向
重新產生 frame
bu?er
解析度改變
重置編碼器
46
總結
? Server Clusters
? ReplayKit 2 (Broadcast Upload Extension)
? LFLiveKit
47
Thank You

More Related Content

二次元直播 : 虛擬主播與 Replay kit 的邂逅