※本ドキュメントは「SDK quickstart」を参考にしています。
この記事では、Video SDK v4.0を使用したシンプルな通話アプリを動かすための手順をご紹介します。ステップバイステップの手順で作業を行うことで、Video SDK v4の初歩知識を学習することができます。
(学習所要時間:40分程度)
完成後のunity画面は以下になります。
技術の理解
Video SDKを開始するための最小限のステップは以下になります。
[Video SDKを開始するための最小限のステップ]
1.Tokenを取得します。
2.ChannelにJoinします。
3.(自分の)VideoとAudioを送信します。(他ユーザからの)VideoとAudioを受信します。
前提
Video SDKアプリを開発および動作させるために必要な環境は以下になります。
In order to follow this procedure you must have:
- Unity Hub
- Unity Editor 2021.2.0 or higher
- Microsoft Visual Studio 2017 or higher
- Agoraのアカウント(accountを参照)
- Agoraのアカウントから作成したプロジェクト(projectを参照)
- デバイス(PC、Android)
- インターネット回線
※ファイアウォールのブロックは解除しておいてください。
(ステップ1)Unityプロジェクト作成とSDK設定
1. Unityプロジェクトの作成
Unity Hub でProjectsを選択し、New Projectをクリックします。
[すべてのテンプレート]で、 [3D]を選択します。
Project nameを任意の名前で設定し、Create Projectをクリックします。
Projectsで、作成したプロジェクトを Unity で開きます。
2. 作成したプロジェクトにVideo SDKを取り込む
この章は2パターンの方法があります。
1パターン目(推奨)
unity の asset store で、「Agora Video SDK for Unity」を検索し、こちらをimportします。
2パターン目
SDKsに移動し、Video SDKの最新バージョンをダウンロードし、ダウンロードした SDK をローカルフォルダーに解凍します。
Unity で、Assets > Import Package > Custom Packageをクリックします。
解凍したVideo SDKパッケージに移動し、[開く] をクリックします。
[ Unity パッケージのインポート]で、[インポート] をクリックします。
3. ダイヤログが出た場合
必要なスクリプトを残せば良いですが、何が必要か分からない場合はそのまま「import」をクリックすれば問題ありません。
こちらが出たら、「Yes, for there and other files that might be found later」で問題ありません。
ここまで終わると、agora Video SDK の導入は終了です。
Assetsの下にディレクトリが追加されているはずです。
(ステップ2)UIの作成
1. 参加ボタンと退出ボタン
agoraのチャンネルにjoinするためのボタンとleaveするボタンを配置します。
まず、Assets > Scenes を選択し、Sample Scenes をダブルクリックして選択します。
その後 Game Object>UI>Button - TextMeshProをクリックします。
シーンの中のキャンバスにボタンが表示されます。
続いて、画面右のInspectorで、Buttonの名前をLeaveに変更し、座標を次のように変更します。
-
- posX: 350
- posY: -172
次にLeaveのサブ項目のText(TMP)を選択し、InspectorでTextをLeaveに変更します。
Joinボタンも同様の手順で作成します。座標は以下です。
-
- posX: -350
- posY: -172
2. 自分と相手の映像枠の作成
ビデオストリームを表示するViewを作成します。
まずローカルビデオは、[キャンバス] を右クリックし、[UI] > [Raw Image] をクリックします。
Inspectorで、RawImageの名前をLocalViewに変更し、次のように座標を変更します。
-
- posX: -250
- posY: 0
- 幅: 250
- 高さ: 250
リモートビデオの場合は同じ手順を使用して、次の座標を持つRemoteViewというRawImageを作成します。
-
- posX: 250
- posY: 0
- 幅: 250
- 高さ: 250
UIの作成は以上になります。
(ステップ3)ビデオ通話の為のスクリプトの記述
1. 新規スクリプトの作成とUnityライブラリのインポート
プロジェクトで、Assets > Agora-RTC-Plugin > Agora-Unity-RTC-SDK > Code を開きます。
Codeを右クリックし、Create > C# Scriptをクリックします。
Assets の中に、NewBehaviourScript ファイルが表示されます。
ここに Video Calling を実装するためのスクリプトを記述していきます。
ファイルをダブルクリックすると、NewBehaviourScript.csがデフォルトのテキストエディターで開きます。
NewBehaviourScript.csの名前空間宣言のリストに追加
using UnityEngine.UI;
Unity Android ライブラリーを追加します。
スクリプトファイルの中で、名前空間宣言のリストに以下を追加
#if (UNITY_2018_3_OR_NEWER && UNITY_ANDROID)
using UnityEngine.Android;
#endif
Start() の前に以下を追加
#if (UNITY_2018_3_OR_NEWER && UNITY_ANDROID)
private ArrayList permissionList = new ArrayList() { Permission.Camera, Permission.Microphone };
#endif
update() の後に以下を追加
private void CheckPermissions() {
#if (UNITY_2018_3_OR_NEWER && UNITY_ANDROID)
foreach (string permission in permissionList)
{
if (!Permission.HasUserAuthorizedPermission(permission))
{
Permission.RequestUserPermission(permission);
}
}
#endif
}
ここまで終えたら、スクリプトをCanvasにバインドします。
NewBehaviourScript.cs を Hierarchy 上の Canvas へドラッグ&ドロップします。
Canvasのインスペクタを見ると、スクリプトが追加されていることが確認できます。
2. Agoraライブラリのインポートとビデオ通話の実装
下の図でビデオ通話時の実装でAPIをコールする順番を確認することができます。
agoraのライブラリをimportします。
using UnityEngine.UI の後に以下を追加
using Agora.Rtc;
チャンネルの作成と参加に使用する変数を宣言します。
以下を追加してappID等を追記
// Fill in your app ID.
private string _appID = "";
// Fill in your channel name.
private string _channelName = "";
// Fill in the temporary token you obtained from Agora Console.
private string _token = "";
// A variable to save the remote user uid.
private uint remoteUid;
internal VideoSurface LocalView;
internal VideoSurface RemoteView;
internal IRtcEngine RtcEngine;
agora Engine のインスタンスのセットアップを行います。
CheckPermission の後に以下を追加
private void SetupVideoSDKEngine()
{
// Create an instance of the video SDK.
RtcEngine = Agora.Rtc.RtcEngine.CreateAgoraRtcEngine();
// Specify the context configuration to initialize the created instance.
RtcEngineContext context = new RtcEngineContext(_appID, 0, true,
CHANNEL_PROFILE_TYPE.CHANNEL_PROFILE_COMMUNICATION,
AUDIO_SCENARIO_TYPE.AUDIO_SCENARIO_DEFAULT);
// Initialize the instance.
RtcEngine.Initialize(context);
}
コールバックを追加します。
NewBehaviourScriptの末尾に以下を追加
private void InitEventHandler()
{
// Creates a UserEventHandler instance.
UserEventHandler handler = new UserEventHandler(this);
RtcEngine.InitEventHandler(handler);
}
internal class UserEventHandler : IRtcEngineEventHandler
{
private readonly NewBehaviourScript _videoSample;
internal UserEventHandler(NewBehaviourScript videoSample)
{
_videoSample = videoSample;
}
// This callback is triggered when the local user joins the channel.
public override void OnJoinChannelSuccess(RtcConnection connection, int elapsed)
{
Debug.Log("You joined channel: " +connection.channelId);
}
}
続いて、SampleSceneに設置したUI要素を参照します。
SetupVideoSDKEngineの前に以下を追加
private void SetupUI()
{
GameObject go = GameObject.Find("LocalView");
LocalView = go.AddComponent<VideoSurface>();
go.transform.Rotate(0.0f, 0.0f, 90.0f);
go = GameObject.Find("RemoteView");
RemoteView = go.AddComponent<VideoSurface>();
go.transform.Rotate(0.0f, 0.0f, 90.0f);
go = GameObject.Find("Leave");
go.GetComponent<Button>().onClick.AddListener(Leave);
go = GameObject.Find("Join");
go.GetComponent<Button>().onClick.AddListener(Join);
}
チャンネルへJoinする処理を記述します。
InitEventHandlerの後に以下を追加
public void Join()
{
// Enable the video module.
RtcEngine.EnableVideo();
// Set the user role as broadcaster.
RtcEngine.SetClientRole(CLIENT_ROLE_TYPE.CLIENT_ROLE_BROADCASTER);
// Set the local video view.
LocalView.SetForUser(0, "", VIDEO_SOURCE_TYPE.VIDEO_SOURCE_CAMERA);
// Start rendering local video.
LocalView.SetEnable(true);
// Join a channel.
RtcEngine.JoinChannel(_token, _channelName);
}
リモートユーザーがチャンネルに参加した際の映像表示を記述します。
リモートユーザーがチャンネルに参加すると、AgoraはOnUserJoinedを発火させます。
OnJoinChannelSuccessの後に以下を追加
public override void OnUserJoined(RtcConnection connection, uint uid, int elapsed)
{
// Setup remote view.
_videoSample.RemoteView.SetForUser(uid, connection.channelId, VIDEO_SOURCE_TYPE.VIDEO_SOURCE_REMOTE);
// Save the remote user ID in a variable.
_videoSample.remoteUid = uid;
}
リモートユーザーが退出した際の処理を記述します。
リモートユーザーがLeaveするかオフラインになると、AgoraはOnUserOfflineを発火させます。
UserEventHandlerに以下を追加
// This callback is triggered when a remote user leaves the channel or drops offline.
public override void OnUserOffline(RtcConnection connection, uint uid, USER_OFFLINE_REASON_TYPE reason)
{
_videoSample.RemoteView.SetEnable(false);
}
ユーザーが退出した際の処理を記述します。
NewBehaviourScriptに以下を追加
public void Leave()
{
// Leaves the channel.
RtcEngine.LeaveChannel();
// Disable the video modules.
RtcEngine.DisableVideo();
// Stops rendering the remote video.
RemoteView.SetEnable(false);
// Stops rendering the local video.
LocalView.SetEnable(false);
}
3. プロジェクトの開始と終了時の処理
アプリが開いたり閉じたりするときに、Agora エンジンを起動、削除します。
ローカルユーザは、同じ Agora Engine インスタンスを使用してチャネルに参加したり、チャネルから退出したりします。
ビデオとオーディオストリームを Agora に送信するために、ローカルユーザがローカルデバイスのカメラとマイクにアクセスする許可を与えることを確認する必要があります。
Android の場合、CheckPermissions を呼び出し、パーミッションが付与されていることを確認します。
スクリプトファイル内の Update を以下に置き換えます。
void Update()
{
CheckPermissions();
}
開始時の処理として、Start を以下に置き換えます。
void Start()
{
SetupVideoSDKEngine();
InitEventHandler();
SetupUI();
}
ユーザがゲームを閉じたとき、OnApplicationQuit を使って、SetupVideoSDKEngine で作成したリソースをクリーンアップします。
NewBehaviourScriptの末尾に以下を追加
void OnApplicationQuit()
{
if (RtcEngine != null)
{
Leave();
RtcEngine.Dispose();
RtcEngine = null;
}
}
(ステップ4)ビデオ通話の動作確認
以上の作業で、基本的なビデオ通話を開始する為の準備は終了です。
Web Demo から入室して接続が出来るか試すことができます。
シミュレータによっては、このプロジェクトの全機能をサポートしていない場合がありますので、Agoraはこのプロジェクトを物理的なモバイルデバイスで実行することを推奨しています。
トークンを使用する場合、agora consoleで一時的なトークンを生成します。
ブラウザで Web Demoに移動し、App ID、Channel、Token を一時的なトークンの値で更新し、Join をクリックします。
Unity エディタで、Assets/Agora-<Vg k="VSDK" />-Plugin/Agora-Unity-<Vg k="VSDK" />-SDK/Code/JoinChannelVideo.cs で、_appID、_channelName、_token を一時的なトークンの値で更新してください。
参考資料
- Video SDK v4 クイックスタートガイド(Agora公式)
- Video SDK v3からv4への移行ガイド
- Video SDK v4 (Agora公式)