😎

Clubhouseも使っているらしいAgoraを使って簡単にビデオ通話

5 min read

Agoraを使って、簡単にビデオ通話機能を作成する方法を紹介します。

下記の記事によると、Agoraは今話題のClubhouseでも使われているっぽいです。

https://zenn.dev/voluntas/scraps/9403b803320d6f

Agoraとは

  • 音声や動画などのリアルタイム通信のSaaS
  • WebRTCのサービスと言われることもあるが、厳密にはWebRTC互換の技術で、通信もP2PではなくAgoraのサーバを使う
  • P2PのWebRTCよりも高品質と謳っている。(P2Pは結局パフォーマンスの問題が出ちゃうのが辛いところ...)
  • 有料サービスでビデオ通話1,000分につき、3.99$かかる。高解像度だとさらにかかる。
  • 有料だが、毎月最初の10,000分は無料で無料期間中はクレジットカードの登録もいらないので試す分には問題ないかと思われる。

作るもの

作るもの

ビデオ通話用の部屋の名前(Agoraではchannel)を入力し、接続すると、同じ部屋にいる人とビデオ通話できる。
上記のイメージは自分同士でつながっているが、もちろん遠隔のユーザ同士で通話できる。

ソースはこちらにあげている。

https://github.com/Arahabica/agora-io-sample

作業概要

  1. まず、Agoraのアカウントを作成
  2. Agoraのプロジェクトを作成
  3. 必要な設定項目をメモ
  4. コーディング

まず、Agoraのアカウントを作成

まず、 https://agora.io にアクセス。右上の「Get Started」をクリック。
agora.io

必要項目を入力。
agora.io-register

その後、指示に従って、SMS認証やらメール認証やらをすると、アカウントが作成できる。

Agoraのプロジェクトを作成

無事アカウントが作成でき、ログインできるとこちらのページが表示される。

agora-top

左の「Project Management」を押す。
agora-left-pane

「Create」を押す。
agora-project-create

「Authentication Mechanism」の選択がデフォルトではTesting modeになっているが、セキュリティ的に弱すぎるので、最初から「Secured mode」を選択する。

agora-project-dialog

すると、プロジェクト一覧に作ったプロジェクトが表示される

agora-project-edit

必要な設定項目をメモ

プロジェクトの右端の「Edit」をクリック。

agora-project-edit

こちらの画面にあるApp IDとApp Certificate(Primary Certificate)をメモする。
agora-project-config

こちらで管理画面上での作業は終わりです。

コーディング

まずは動作確認

https://github.com/Arahabica/agora-io-sample/ をクローンし、下記コマンドを実行し、http://localhost:8080 にアクセスすると、このページの最初のイメージのアプリが使える。

  • YOUR_APP_ID, YOUR_APP_CERTIFICATE は前の工程でメモったものに入れ替えてください。
  • Node.js, yarnが必要です。
$ APP_ID={{YOUR_APP_ID}} APP_CERTIFICATE={{YOUR_APP_CERTIFICATE}}  yarn start

解説

これだけだと流石にアレなので解説をします。
処理の流れは以下です。

  1. フロントエンドでagoraのjsライブラリを読み込み、初期化
  2. チャンネル名をサーバに送り、サーバはトークンを発行
  3. トークンを利用して、チャンネルに接続
フロントエンドでagoraのjsライブラリを読み込み、初期化

今回は、簡単のためCDNを使いました。

index.html
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.3.0.js"></script>

実際にはnpmからインストールすることが多いかと思います。その場合はこちらになります。

$ npm install agora-rtc-sdk-ng --save

ライブラリが読み込めたら、Agoraのクライアントを作成します。
基本的にこのクライアントでいろいろな処理を行なっていきます。

const client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
チャンネル名をサーバに送り、サーバはトークンを発行

今回、サーバはNode.jsのExpressを使用しています。
サーバにも agora-access-token というライブラリを入れ、それを用いてトークンを生成しています。
こちらは、下記の公式のトークン生成サーバのサンプルとほぼ同じになっています。

https://github.com/AgoraIO/Tools/tree/master/DynamicKey/AgoraDynamicKey/nodejs
rtcToken.js
const { RtcTokenBuilder, RtcRole } = require('agora-access-token')

// Fill the appID and appCertificate key given by Agora.io
const appID = process.env.APP_ID;
const appCertificate= process.env.APP_CERTIFICATE;

// token expire time, hardcode to 3600 seconds = 1 hour
const expirationTimeInSeconds = 3600
const role = RtcRole.PUBLISHER

const generateRtcToken = function(req, resp) {
  const currentTimestamp = Math.floor(Date.now() / 1000)
  const privilegeExpiredTs = currentTimestamp + expirationTimeInSeconds
  const channelName = req.query.channelName;
  // use 0 if uid is not specified
  const uid = req.query.uid || 0
  if (!channelName) {
    return resp.status(400).json({ 'error': 'channel name is required' }).send();
  }

  var key = RtcTokenBuilder.buildTokenWithUid(appID, appCertificate, channelName, uid, role, privilegeExpiredTs);

  return resp.json({ 'key': key });
}

module.exports = generateRtcToken

トークン生成サーバの技術的詳細はこちら

https://docs.agora.io/en/Interactive Broadcast/token_server?platform=Web
トークンを利用して、チャンネルに接続
  const localTracks = {
    videoTrack: null,
    audioTrack: null
  };
    [uid, localTracks.audioTrack, localTracks.videoTrack] = await Promise.all([
      // join the channel
      client.join(agoraAppId, channelName, token),
      // create local tracks, using microphone and camera
      AgoraRTC.createMicrophoneAudioTrack(),
      AgoraRTC.createCameraVideoTrack(),
      //AgoraRTC.createScreenVideoTrack()
    ]);

    // play local video track
    localTracks.videoTrack.play("local-player");

    // publish local tracks to channel
    await client.publish(Object.values(localTracks));

おわりに

かなり簡単に試せたんじゃないかと思います。
Clubhouseで実稼働しているという情報もついさっき知ったので、実運用しても問題なさそうだなという感触をえています。

雑感

P2P大好きなんだけど、結局サーバモリモリたてまくったサービスに負けちゃうという流れがある気がするのでなんか悔しい気持ちもなくはない。なんとかならんかなあ。

つづき

AgoraはデフォルトではEnd to Endの暗号化をしてくれません。
次の記事ではこちらを解決することを試みています。

https://zenn.dev/arahabica/articles/7afe8d3208f46a

Discussion

ログインするとコメントできます