Upgrade to Pro — share decks privately, control downloads, hide ads and more …

agoraのドキュメントはまずここから読め!

99223605731d1a4d0a6db40bb7c21126?s=47 junmikai
January 27, 2021

 agoraのドキュメントはまずここから読め!

開催日:1/28(木)
社内勉強会

99223605731d1a4d0a6db40bb7c21126?s=128

junmikai

January 27, 2021
Tweet

Transcript

  1. agoraドキュメントはここから読もう!
 
 0から始めるagora開発


  2. 目的
 
 公式ドキュメントの読むべき箇所を
 把握する事でスムーズな
 開発ができるようにする


  3. agoraとは?
 自社サービスのiOS・AndroidアプリやWebサイトにビデオ通話やライブ配信をかんたんに実装できる開発キット。agora のメリットは下記の通りです
 
 • 一般的な配信サービスでは、10〜40秒ほどの遅延が発生。Agoraは平均0.3秒の超低遅延を実現!
 • 10,000人までの双方向通話の様子を、「コラボ配信」として百万人もの視聴者へ届ける事ができる!
 • 利用分数に応じた従量課金だけでご利用いただけ、開発期間中は無料!


    • 豊富なサンプルコードにより、短期間で開発!
 • サーバーの構築・運用が不要なため、開発・運用コストの削減!

  4. agoraを支える2つの要素
 Client 配信をするための母体。身近な例で例えると youtubeのライブ配信のチャンネルですね。 特定のアクション(ページリンクやボタンクリック )した時にclient(チャンネル)を公開非公開をしたり、相手に配信 を届けたりする事ができます。 Stream 配信データ。身近な例で例えるとyoutubeのライブ配信のデータですね。 母体(client)だけ存在していてもデータ

    (stream)がなければ一生配信を目にする事はありませんし、どんだけ配 信データ(stream)を作っても配信の母体(client)がなければ配信を始める事はできません。
  5. ClientとStreamのイメージ
 Client Client Stream ビデオ通話中・・・

  6. clientClient
 const client = AgoraRTC.createClient ({: mode:"live" , codec:"vp8", ;

    }) : クライアントオブジェクトを作成します。 カジュアルな言い方をすると配信するチャンネルを作成するメソッドです。 AgoraRTCは、AgoraWebSDK(開発キット)で呼び出すことができるすべてのメソッドのエ ントリポイント(一番最初に実行することになっている箇所 )となります。 ドキュメントはこちら
  7. client.init
 client.init(appID, : function (){ : ... : }) :

    clientClientで作成したオブジェクトを初期化します。 
 カジュアルな言い方をするとチャンネルの初期設定ですね。 
 ゲーム機本体があってもボタン押さないと機能しないのと同じ原理ですね笑 
 
 appIDはagoraに必要なIDとなり、こちらをセットする必要があるので事前に登録してください 
 
 ドキュメントはこちら

  8. client.join
 client.join(token,channel,uid, : function (uid) { : : }) :

    チャネルに参加します。カジュアルな言い方をすると見たいyoutubeチャンネルにアクセス すると行った感じです。tokenは一定時間だけ有効なパスワード、uidは配信中のみ発行さ れる自動IDというイメージです。
 メソッドが成功した場合は第四引数のfunctionが発火します。 
 
 ドキュメントはこちら

  9. client.publish
 client.publish(stream): : チャネルを第三者に公開します。このメソッドを無事実行すると相手に自分の配信を届ける 事ができます。第二引数にはエラー時の処理を書く事ができます。 
 
 ここで注意なのは公開するメソッドと再生するメソッド(play)は別という点です。 配信してない youtubeのURLを公開しても何も起こらないのと同じ原理です。

    
 
 ドキュメントはこちら

  10. createStream
 const stream = AgoraRTC.createStream ({: audio: true, : video:

    true, : screen: false, : }) : clientと同様、stream(配信)もオブジェクトを作成します。カジュアルに例えるとyoutubeの配 信を作る感じですね。
 
 基本的な設定は音(audio)、カメラ(video)、screen(PC画面)の有無設定を行います。通常の ビデオ通話であれば上記のブール値になります。 
 ドキュメントはこちら

  11. stream.init
 stream.init( : function (){ : ... : }) :

    client.initと同様、作成したcreateStreamを初期化します。 
 カジュアルな言い方をすると配信の初期化ですね。 
 
 client.initと違い、引数何もセットする必要がなく、init()の関数が実行されます。 
 
 ドキュメントはこちら

  12. stream.play
 stream.play(erement) : : 初期化が終われば配信を自分の画面に再生する事ができます。 
 
 再生しただけでは相手の画面に届ける事はできないのでclient.publish()等の処理が必要で す。
 


    (erement)は再生されるHTMLを指定するコードです。 
 
 再生(play)の逆は停止(stop)になります。 
 
 ドキュメントはこちら

  13. client.on
 client.on(‘相手の配信の◦◦が変わった時’): 
 agoraでは相手の状況が変わった時に発火するonメソッドがあります。 例えば
 
 ・相手が配信を公開した時、HTMLを作成する(stream-published)
 ・相手がオフラインになった時ページ遷移する(peer-leave)
 
 など。これを使えばページ遷移する事なく擬似遠隔操作する事ができま

    す!
 

  14. ネクストアクション
 
 実際にサンプルコードを使って
 配信を体験してみる!
 
 サンプルコードはこちらから