※本ドキュメントは「SDK quickstart」を参考にしています。
この記事では、Video SDK v4.20.0を使用したシンプルな通話アプリを作成する手順をご紹介します。
ステップバイステップの手順でコードを実装しながら、Video SDK v4の初歩知識を学習することができます。
技術の理解
Video SDKを開始するための最小限のステップは以下になります。
１．Tokenを取得(本記事ではスキップ)
２．Channelに参加
３．自分のVideoとAudioの送信及び、他ユーザからのVideoとAudioの受信
前提
本quickstartを進めるにあたり必要な環境は以下の通りです。
- サポートされているブラウザ
- カメラやマイクなどのメディア入力デバイス。
- npm のような JavaScript パッケージマネージャ
- Agoraのアカウント(accountを参照)
- Agoraのアカウントから作成したプロジェクト(projectを参照)
進め方として、ここでは大きく3パターンを紹介します。
ニーズに合わせ、いずれかの方法を選択して進めます。
パターン１：直接SDKをローカルにダウンロードする
これが、まずAgoraSDKをローカルで実行して機能を体験するための最も簡単な方法です
1. Download SDKs よりVideo SDK の最新版をダウンロード
下記リンクから、画像で示したボタンを押下してSDKをダウンロードします。
https://docs.agora.io/en/sdks?platform=web
2. Agoraへの接続に必要な情報を記載
上記リンクからダウンロードしたファイルを解凍すると、SDK本体に加えてHTML、CSS、JS等のファイルが既に作成された状態になっているので、これをブラウザで実行します。
すると web demo と類似の画面が確認できるので、AppID、Channel、Token(任意)を入力すればすぐにAgoraへの接続が可能です。
パターン２：既存のリファレンスアプリを活用する
1. Video SDKリファレンスアプリリポジトリのクローンを作成する
アプリを配置したいディレクトリに移動し、以下のコマンドを実行します。
git clone https://github.com/AgoraIO/video-sdk-samples-js.git
2. 依存関係のインストール
クローンしたリポジトリのルートディレクトリで、以下のコマンドを実行します。
npm install
3. Agoraへの接続に必要な情報を記載
src > agora_manager > config.json 内の、デフォルトでは空文字が入力されている以下の情報を書き換えます。
- "appId" : 事前に発行したプロジェクトのAPPID
- "channelName" : 任意の文字列
- "token" : チャンネル接続に利用するAgora token (クイックスタートではnullを指定して進めることが出来ますが、本番環境ではtokenを利用することを強く推奨します)
以上で、Agoraによるビデオ通話を行う準備が整いました。
実際にローカルサーバーで立ち上げ、ヘッダーからSDK quickstart を選択すると早速利用できます。
以下のように、Joinボタンを押下して自映像が表示されていれば成功です。
また、同じappIdとchannelNameで入室したリモートユーザーが存在すれば、自映像の下にリモートユーザー側の映像が表示され、音声も疎通できていることが確認できます。
パターン３ : 新しいプロジェクトを作成する
続いては、npm等のJSパッケージマネージャーを用いて一からアプリを作成する方法です。
Agora SDK の実装の流れを把握する目的であれば、こちらの方法が適しています。
(ステップ１) プロジェクトのセットアップ
1. プロジェクトの作成
このquickstartでは、ビルドツールとして vite を使用します。
アプリを配置したいディレクトリに移動し、以下のコマンドを実行します。
npm create vite@latest agora_project --template vanilla
その後のフレームワーク選択では「Vanilla」、variant選択では「JavaScript」で進めます。
2. 依存関係のインストール
作成されたディレクトリへ移動して、以下のコマンドを実行します。
npm install
3. Video SDK のインストール
以下のコマンドを実行し、Agora の Video SDKをインストールします。
npm i agora-rtc-sdk-ng
(ステップ２) ビデオ通話の実装
今回は、ユーザーがアプリを開くとAgora エンジンが初期化され、ボタンをタップするとチャンネルに参加または退出することができるアプリを作成します。
また、別のユーザーが同じチャンネルに参加すると、そのユーザーのビデオのレンダリングと音声の疎通が行われてビデオ通話が開始されます。
次のコード例は、アプリにこれらの手順を実装する方法です。
1. index.htmlの修正
今回は、UIに必要な最低限のコードを記述することとし、index.htmlのbodyタグ内を以下のコードに置き換えてください。
<h2 class="title">Get started with video calling</h2>
<div class="button-area">
<button type="button" id="join">Join</button>
<button type="button" id="leave" disabled>Leave</button>
</div>
<script type="module" src="./agora_manager.js"></script>
2. ビデオ SDKクラスとインターフェイスをインポート
まず、Agoraに関するコードを記述するファイルを作成します。
今回ファイル名は agora_manager.js とし、これを index.html と同階層に作成します。
以後はこのファイル内での作業となり、まずはAgoraSDK をインポートします。
import AgoraRTC from "agora-rtc-sdk-ng";
3. Agora エンジンのインスタンス作成とイベントハンドラーのセットアップ
今回はブロードキャストモードではなくコミュニケーションモードで会話をする想定なので、modeは"rtc"とし、createClientを行います。
チャンネルプロファイルについての詳細は こちら を参考ください。<<<リンク貼る>>>
let channelParameters = {
// A variable to hold a local audio track.
localAudioTrack: null,
// A variable to hold a local video track.
localVideoTrack: null,
// A variable to hold a remote audio track.
remoteAudioTrack: null,
// A variable to hold a remote video track.
remoteVideoTrack: null,
// A variable to hold the remote user id.s
remoteUid: null,
};
let agoraEngine = null;
// Set up the signaling engine with the provided App ID, UID, and configuration
const setupAgoraEngine = () => {
agoraEngine = AgoraRTC.createClient({ mode: "rtc", codec: "vp9" });
};
setupAgoraEngine();
const getAgoraEngine = () => {
return agoraEngine;
};
4. チャンネルへの参加とビデオ通話の開始
次に、ユーザーがjoinボタンを押下した時にAgoraのチャンネルへ参加する処理を記述します。
appId、channelName等は置き換えてご利用ください。
document.getElementById("join").onclick = async () => {
await agoraEngine.join(
config.appId, //事前に発行したプロジェクトのAPPID
config.channelName, //任意の文字列
config.token, //発行したtoken (無ければnull)
config.uid //任意の自然数 (0を指定すると自動生成)
);
// Create a local audio track from the audio sampled by a microphone.
channelParameters.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// Create a local video track from the video captured by a camera.
channelParameters.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
// Publish the local audio and video tracks in the channel.
await getAgoraEngine().publish([
channelParameters.localAudioTrack,
channelParameters.localVideoTrack,
]);
// Dynamically create a container in the form of a DIV element to play the local video track.
const localPlayerContainer = document.createElement("div");
// Specify the ID of the DIV container. You can use the uid of the local user.
localPlayerContainer.id = config.uid;
// Set the textContent property of the local video container to the local user id.
localPlayerContainer.textContent = "Local user " + config.uid;
// Set the local video container size.
localPlayerContainer.style.width = "640px";
localPlayerContainer.style.height = "480px";
localPlayerContainer.style.padding = "15px 5px 5px 5px";
// Play the local video track.
document.body.append(localPlayerContainer);
channelParameters.localVideoTrack.play(localPlayerContainer);
}
5. イベントハンドラの追加
チャンネル内で発生したイベントをトリガーして処理を行う記述をします。
今回は、同じチャンネルに入室したリモートユーザーが音声または映像をpublishしたというイベントをトリガーとして、それを自分の画面で受け取りレンダリングする処理をします。
また、簡易的にリモートユーザーがこのメディアをunpublishしたイベントを受け取りコンソールログを出力する処理も記述しています。
// Event Listeners
agoraEngine.on("user-published", async (user, mediaType) => {
// Subscribe to the remote user when the SDK triggers the "user-published" event.
await agoraEngine.subscribe(user, mediaType);
console.log("subscribe success");
handleVSDKEvents("user-published", user, mediaType)
});
// Listen for the "user-unpublished" event.
agoraEngine.on("user-unpublished", (user) => {
console.log(user.uid + "has left the channel");
});
//リモートユーザーがメディアを送信した時のコールバック処理を記述
const handleVSDKEvents = (eventName, ...args) => {
switch (eventName) {
case "user-published":
if (args[1] == "video") {
// Dynamically create a container in the form of a DIV element to play the remote video track.
const remotePlayerContainer = document.createElement("div");
// Retrieve the remote video track.
channelParameters.remoteVideoTrack = args[0].videoTrack;
// Retrieve the remote audio track.
channelParameters.remoteAudioTrack = args[0].audioTrack;
// Save the remote user id for reuse.
channelParameters.remoteUid = args[0].uid.toString();
// Specify the ID of the DIV container. You can use the uid of the remote user.
remotePlayerContainer.id = args[0].uid.toString();
channelParameters.remoteUid = args[0].uid.toString();
remotePlayerContainer.textContent = "Remote user " + args[0].uid.toString();
// Set the local video container size.
remotePlayerContainer.style.width = "640px";
remotePlayerContainer.style.height = "480px";
remotePlayerContainer.style.padding = "15px 5px 5px 5px";
// Append the remote container to the page body.
document.body.append(remotePlayerContainer);
// Play the remote video track.
channelParameters.remoteVideoTrack.play(remotePlayerContainer);
}
// Subscribe and play the remote audio track If the remote user publishes the audio track only.
if (args[1] == "audio") {
// Get the RemoteAudioTrack object in the AgoraRTCRemoteUser object.
channelParameters.remoteAudioTrack = args[0].audioTrack;
// Play the remote audio track. No need to pass any DOM element.
channelParameters.remoteAudioTrack.play();
}
}
};
6. チャンネルから退出する処理の追加
最後に、ユーザーがleaveボタンを押下した時の処理を記述します。
document.getElementById("leave").onclick = async () => {
// Destroy the local audio and video tracks.
channelParameters.localAudioTrack.close();
channelParameters.localVideoTrack.close();
document.getElementById(config.uid).remove();
// Remove the containers you created for the local video and remote video.
await agoraEngine.leave();
}
以上で、簡易的ではありますがビデオ通話を行うために必要な作業は終了です。
実際に同じチャンネルにもう1人が入室すると、以下のように2名分の映像が表示され、音声も疎通できることが確認できます。
Agora SDKを利用する方法として、他にも手動でスクリプトを入れ込む方法や、直接SDKをローカルにダウンロードする方法など様々な方法などがあります。
ユースケースに合った手段を選択ください。