iOSDC2021_LiveStreaming

Slide 1

Slide 1 text

ライブ配信ライブ配信ライブ配信４０分でわかる

Slide 2

Slide 2 text

asa iOS/Flutter Developer _asa08_ _asa08_ asa08

Slide 3

Slide 3 text

Question? 日常的にライブ配信を見ていますか？

Slide 4

Slide 4 text

Goal ライブ配信の各機能のフローが分かるフローがわかることで設計がふわっと想像できるライブ配信実装しなきゃいけない時にどういう課題が出てくるか思い出せる

Slide 5

Slide 5 text

01 Agora Live Stream Function 02 Design Comment/Gifting 03 Problems UI design/Poling more... Agenda

Slide 6

Slide 6 text

01 Agora Live Stream Function 02 Design Comment/Gifting 03 Problems UI design/Poling more... Agenda

Slide 7

Slide 7 text

Agora モバイル・PCアプリやWebサイトに、カスタマイズしたビデオ・音声通話やライブ配信をかんたんに実装できるSDK

Slide 8

Slide 8 text

なぜAgoraを使うの？自社サーバークライアント

Slide 9

Slide 9 text

なぜAgoraを使うの？ Agora 自社サーバークライアント

Slide 10

Slide 10 text

機能引用：https://www.agora.io/en/

Slide 11

Slide 11 text

機能

Slide 12

Slide 12 text

Live Streaming Agora RTN 自社サーバー Streamer ① ② ③ ① ② ③ Get a token from the server Create and Join an RTC channel Publish audio/video and subscribe to other user

Slide 13

Slide 13 text

Live Streaming Agora RTN 自社サーバー Streamer ① ② ③ ① ② ③ Get a token from the server Create and Join an RTC channel Publish audio/video and subscribe to other user

Slide 14

Slide 14 text

Live Streaming Agora RTN 自社サーバー Streamer ① ② ③ ① ② ③ Get a token from the server Create and Join an RTC channel Publish audio/video and subscribe to other user

Slide 15

Slide 15 text

Create and Join an RTC channel Channel A Channel B

Slide 16

Slide 16 text

Create and Join an RTC channel RTNに接続するために必要な情報 appId AgoraプロジェクトのアプリID channelName チャンネルを一意に識別するID 自動で振り当てられるわけではなく、自分たちで決める uid 認証されるユーザーのユーザー ID 一意である必要がある token 先ほど説明したToken

Slide 17

Slide 17 text

lazy var agoraRtcKit: AgoraRtcEngineKit = { return AgoraRtcEngineKit.sharedEngine(withAppId: "ID", delegate: self) }() func joinChennel() { agoraRtcKit.joinChannel( byToken: "token", channelId: "channelName", info: nil, uid: "uid", joinSuccess: nil ) } extension viewController: AgoraRtcEngineDelegate { func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinChannel channel: String, withUid uid: UInt, elapsed: Int) { print("ここに通知される") } }

Slide 18

Slide 18 text

Live Streaming Agora RTN 自社サーバー Streamer ① ② ③ ① ② ③ Get a token from the server Create and Join an RTC channel Publish audio/video and subscribe to other user

Slide 19

Slide 19 text

01 Agora Live Stream Function 02 Design Comment/Block/Gifting 03 Problems UI design/Poling more... Agenda

Slide 20

Slide 20 text

機能引用：https://www.agora.io/en/

Slide 21

Slide 21 text

機能

Slide 22

Slide 22 text

Real-Time Message Agora RTN 自社サーバー Streamer ① ② ③ ① ② ③ Get a token from the server Create and Join an RTM channel Publish message and subscribe to other user message

Slide 23

Slide 23 text

Real-Time Message 接続するために必要な情報 appId AgoraプロジェクトのアプリID channelName チャンネルを一意に識別するID 自動で振り当てられるわけではなく、自分たちで決める user 認証されるユーザーのユーザー ID 一意である必要がある token RTCで生成したToken とは別のToken 別途RTM用のAPIで Tokenを生成する必要がある

Slide 24

Slide 24 text

コメント機能 Agora RTN ① ② RTM ① ② Send a channel message Receivd a channel message ②

Slide 25

Slide 25 text

① ② Send a channel message Receivd a channel message let rtmMessage = AgoraRtmMessage.init(text: "text") rtmChannel?.send(rtmMessage, completion: { [weak self] state in if state == .errorOk { return } // 送信成功した時ここに入る }) extension ViewController: AgoraRtmChannelDelegate { func channel(_ channel: AgoraRtmChannel, messageReceived message: AgoraRtmMessage, from member: AgoraRtmMember) { // メッセージの受信 } }

Slide 26

Slide 26 text

Real-Time Message Channel Message Peer-to-peer Message

Slide 27

Slide 27 text

ブロック機能 Agora公式で案内されているシナリオ In a live streaming channel, the host can kick off a co-host or audience member who violates chatroom rules. You can use the peer-to-peer messaging function of the Agora RTM SDK. On the host's client, call sendMessageToPeer to notify the remote user to leave channel, and on the remote user's client, call leaveChannel after receiving the peer message in the onMessageReceived callback. 引用：https://docs.agora.io/en/Interactive%20Broadcast/faq/kick_user

Slide 28

Slide 28 text

ブロック機能 Agora RTN ② ③ ③ RTM 自社サーバー ① ① ② ③ Call the block API on my server (optional) Send peer-to-peer message Receive a message and kick a user from channel

Slide 29

Slide 29 text

ギフティング Agora公式で案内されているシナリオ To add more fun to interactive live streaming, you can enable virtual gift sending with the Agora RTM SDK. An audience member can send virtual gifts to the host. All members in the live streaming room can see the gift. 引用：https://docs.agora.io/en/Real-time-Messaging/faq/rtm_gift_sending?platform=iOS

Slide 30

Slide 30 text

ギフティング引用：https://docs.agora.io/en/Real-time-Messaging/faq/rtm_gift_sending?platform=iOS

Slide 31

Slide 31 text

ギフティング Agora RTN ② ③ ③ RTM 自社サーバー ① ① ② ③ Call the block API on my server (optional) Send channel message Receive a message and kick a user from channel

Slide 32

Slide 32 text

01 Agora Live Stream Function 02 Design Comment/Block/Gifting 03 Problems UI design/Poling more... Agenda

Slide 33

Slide 33 text

画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな

Slide 34

Slide 34 text

画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな配信準備画面配信画面プロフィールギフトのアニメーション配信終了 ....

Slide 35

Slide 35 text

画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな映像のView 配信準備画面のView 配信画面のView 配信終了画面のView ライブ配信は配信準備から終了まで画面遷移が存在しないのが一般的無限に重なっていくViews..... ViewController ギフトのアニメーションのView

Slide 36

Slide 36 text

リアルタイムで配信一覧を更新したい

Slide 37

Slide 37 text

リアルタイムで配信一覧を更新したいライブ配信の一覧を表示している画面を開いている状態で新しいライブ配信が始まる画面をリロードしないと配信が始まらない

Slide 38

Slide 38 text

リアルタイムで配信一覧を更新したいクライアントでポーリングする？色々抜けちゃうけどPush通知を利用してそれっぽくする？

Slide 39

Slide 39 text

リアルタイムで配信一覧を更新したいクライアントでポーリングする？色々抜けちゃうけどPush通知を利用してそれっぽくする？ Pusher(WebSocketを介したリアルタイム双方向通信を実現するいい感じのやつ）を使うことにした Pusherの記事書きました ⬇️ https://qiita.com/_asa08_/items/d05b 429422c0b7af0d6b

Slide 40

Slide 40 text

Goal

Slide 41

Slide 41 text

Slide 42

Slide 42 text

サンプルアプリが公開されてるよ https://github.com/AgoraIO-Usecase/AgoraLive

Slide 43

Slide 43 text

おわり