$30 off During Our Annual Pro Sale. View Details »

iOSDC2021_LiveStreaming

asa
September 17, 2021

 iOSDC2021_LiveStreaming

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

asa

September 17, 2021
Tweet

More Decks by asa

Other Decks in Technology

Transcript

  1. ライブ配信 ライブ配信 ライブ配信 40分でわかる

  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. おわり