😎

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

2021/01/31に公開

JavaScript

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

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

Agoraとは

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

作るもの

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

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

作業概要

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

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

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

必要項目を入力。
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

解説

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

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

フロントエンドで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 というライブラリを入れ、それを用いてトークンを生成しています。
こちらは、下記の公式のトークン生成サーバのサンプルとほぼ同じになっています。

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

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

トークンを利用して、チャンネルに接続

  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の暗号化をしてくれません。
次の記事ではこちらを解決することを試みています。