iOSDC2021_LiveStreaming

iOSDC Japan 2021の登壇資料です。
アニメーションのついた資料でしたがPDF化に伴い静止画になりました。

Transcript

1. ライブ配信 ライブ配信 ライブ配信 ４０分でわかる
2. asa iOS/Flutter Developer _asa08_ _asa08_ asa08
3. Question? 日常的にライブ配信を見ていますか？
4. Goal ライブ配信の各機能のフローが分かる フローがわかることで設計がふわっと想像できる ライブ配信実装しなきゃいけない時に どういう課題が出てくるか思い出せる
5. 01 Agora Live Stream Function 02 Design Comment/Gifting 03 Problems UI design/Poling more... Agenda
6. 01 Agora Live Stream Function 02 Design Comment/Gifting 03 Problems UI design/Poling more... Agenda
7. Agora モバイル・PCアプリやWebサイトに、 カスタマイズしたビデオ・音声通話やライブ配信を かんたんに実装できるSDK
8. なぜAgoraを使うの？ 自社サーバー クライアント
9. なぜAgoraを使うの？ Agora 自社サーバー クライアント
10. 機能 引用：https://www.agora.io/en/
11. 機能
12. 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
13. 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
14. 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
15. Create and Join an RTC channel Channel A Channel B
16. Create and Join an RTC channel RTNに接続するために必要な情報 appId Agoraプロジェクトのア プリID channelName チャンネルを一意に識別するID 自動で振り当てられるわけでは なく、自分たちで決める uid 認証されるユーザーのユーザー ID 一意である必要がある token 先ほど説明したToken
17. 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("ここに通知される") } }
18. 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
19. 01 Agora Live Stream Function 02 Design Comment/Block/Gifting 03 Problems UI design/Poling more... Agenda
20. 機能 引用：https://www.agora.io/en/
21. 機能
22. 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
23. Real-Time Message 接続するために必要な情報 appId Agoraプロジェクトのア プリID channelName チャンネルを一意に識別するID 自動で振り当てられるわけでは なく、自分たちで決める user 認証されるユーザーのユーザー ID 一意である必要がある token RTCで生成したToken とは別のToken 別途RTM用のAPIで Tokenを生成する必要 がある
24. コメント機能 Agora RTN ① ② RTM ① ② Send a channel message Receivd a channel message ②
25. ① ② 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) { // メッセージの受信 } }
26. Real-Time Message Channel Message Peer-to-peer Message
27. ブロック機能 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
28. ブロック機能 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
29. ギフティング 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
30. ギフティング 引用：https://docs.agora.io/en/Real-time-Messaging/faq/rtm_gift_sending?platform=iOS
31. ギフティング Agora RTN ② ③ ③ RTM 自社サーバー ① ① ② ③ Call the block API on my server (optional) Send channel message Receive a message and kick a user from channel
32. 01 Agora Live Stream Function 02 Design Comment/Block/Gifting 03 Problems UI design/Poling more... Agenda
33. 画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな
34. 画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな 配信準備画面 配信画面 プロフィール ギフトのアニメーション 配信終了 ....
35. 画面レイアウトの設計複雑すぎ ※ベストプラクティス分かりません...みんなでディスカッションできると嬉しいな 映像のView 配信準備画面のView 配信画面のView 配信終了画面のView ライブ配信は配信準備から終了まで 画面遷移が存在しないのが一般的 無限に重なっていくViews..... ViewController ギフトのアニメーションのView
36. リアルタイムで配信一覧を更新したい
37. リアルタイムで配信一覧を更新したい ライブ配信の一覧を表示している画面を開 いている状態で新しいライブ配信が始まる 画面をリロードしないと配信が始まらない
38. リアルタイムで配信一覧を更新したい クライアントでポーリングする？ 色々抜けちゃうけどPush通知を利用してそ れっぽくする？
39. リアルタイムで配信一覧を更新したい クライアントでポーリングする？ 色々抜けちゃうけどPush通知を利用してそ れっぽくする？ Pusher(WebSocketを介したリアルタイム 双方向通信を実現するいい感じのやつ）を 使うことにした Pusherの記事書きました ⬇️ https://qiita.com/_asa08_/items/d05b 429422c0b7af0d6b
40. Goal
41. Goal ライブ配信の各機能のフローが分かる フローがわかることで設計がふわっと想像できる ライブ配信実装しなきゃいけない時に どういう課題が出てくるか思い出せる
42. サンプルアプリが公開されてるよ https://github.com/AgoraIO-Usecase/AgoraLive
43. おわり