## 環境

- vue: ^2.6.11
- agora-rtc-sdk-ng: ^4.3.0

## ミュート処理(localAudioTrackの非活性化)

`setEnabled()`を使い、`localAudioTrack`の`mute`,`unmute`を実現する。
`localAudioTrack._enabled`プロパティを確認し、切り替えさせる。

```js
async toggleMuteLocalAudioTrack () {
  if (this.rtc.localAudioTrack && this.rtc.localAudioTrack._enabled) {
    await this.rtc.localAudioTrack.setEnabled(false)
  } else {
    await this.rtc.localAudioTrack.setEnabled(true)
  }
}
```

## close createの注意点

`if`条件式で、`localAudioTrack`の有無を確認していたが、`close()`した場合、`localAudioTrack`は使えなくなるが、オブジェクトが残るので、`if`条件式を消す。

### localAudioTrack作成の処理

変更前

```js
if (!this.rtc.localAudioTrack) {
  this.rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack()
}
```

変更後

```js
this.rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack()
```

### localAudioTrackを閉じる処理

> ローカルトラックを閉じて、占有しているオーディオおよびビデオリソースを解放します。
> ローカルトラックを閉じると、それを再利用することはできなくなります。

```js
if (this.rtc.localAudioTrack) {
  this.rtc.localAudioTrack.close()
}
```

## 参加しているユーザーの状態を取得したい時

1.チャネルに入った時
2.自分がミュートにした時
3.自分がミュートを解除した時
4.他の人がミュートのした時
5.他の人がミュートを解除のした時

### リモートユーザーの状態が取得できるイベント・プロパティ

- `user-published`
- `user-unpublished`
- `user-info-update`
- `rtc.client.remoteUsers`

`_audio_enabled_`、`_audio_muted_`という値が音声状態を表しているので、ここを見る。

## 参考
- [AgoraWebSDK NG API Docs](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/index.html#core-methods)
- [Interface IMicrophoneAudioTrack](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/interfaces/imicrophoneaudiotrack.html#setdevice)
- [setEnabled](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/interfaces/imicrophoneaudiotrack.html#setenabled)

Agora

AgoraWebSDK-NGで音声のミュート機能を作る

<h2>環境</h2>
<ul>
<li>vue: ^2.6.11</li>
<li>agora-rtc-sdk-ng: ^4.3.0</li>
</ul>
<h2>ミュート処理(localAudioTrackの非活性化)</h2>
<p>...

## 意図

チャネルで会話しているユーザー(UID)を取得し、Agoraの通話を制限したい。

- アプリのユーザーでAgoraUIDが一意(ユニーク)であること

### ユースケース

- 1.アプリにAgoraUIDが登録されている場合→アプリのDBのAgoraUIDを使う
- 2.アプリにAgoraUIDが登録されていない場合→AgoraにAgoraUIDを決めてもらう

 [How can I use string user names?](https://docs.agora.io/en/Agora%20Platform/faq/string)を確認すると、下記のようにある。

> 同じチャネル内でパラメータタイプを混在させないでください。文字列ユーザー名をサポートしないSDKを使用する場合、チャネルで使用できるのは整数のユーザーIDのみです。次のAgoraSDKは、文字列ユーザーアカウントをサポートしています。

チャネル内のUIDに「数値」と「文字列」は混在している場合、数値が優先され、自動的に生成されるので、注意が必要。(数値と文字列が共存している場合、文字列のUIDに数値型も付与される。)**基本的にUIDは、数値で固定する。**

\
そのため、下記の処理が必要になる。

- アプリへのUID保存を数値型にする
- Token生成の際に渡すUIDを数値型にする

## ユーザー毎の時間の取得

- [Agora Web SDK API Reference](https://docs.agora.io/en/live-streaming/API%20Reference/web/v4.2.1/interfaces/iagorartcclient.html#getrtcstats)の`clientStats`を使用し、1client(`ユーザー)の使用量(duration)などを計算する。

※Agora Web SDKのバージョンによって、結構仕様が変わるのでご注意ください。

- Agora Analytics APIを使う。※Beta

## UIDの取得

- フロントエンド: チャネルに参加(`join()`)した後に、AgoraRTClinetを確認すると、プロパティ`users`にUIDが含まれている。
- フロントエンド: `user-joined`の`user`に入ってきている。

```js
this.rtc.client.on('user-joined', user => {
})

this.rtc.client.on('user-left', (user, reason) => {
})
```

- バックエンド: [RESTful API](https://docs.agora.io/en/agora%20platform/dashboard_restful_communication)の`BaseUrl/dev/v1/channel/user/{appid}/{channelName}`を呼び出す。→そのチャネルで会話しているユーザーを取得できる。

※チャネルに参加者がいない場合、`{ channel_exist: false }`が返ってくるので注意。
※ここで、チャネルに「文字列」と「数値」のUIDが共存していると期待しているレスポンスが返ってこないので注意！

## Push通知の利用

通話をする上で必要そうな通知

- ユーザー参加の通知(Agoraの`user-joined`で分かる)
- ユーザー不参加の通知(Agoraの`user-left`で分かる)
- 招待の通知(Pusherを利用する)

※AgoraにもPush通知の機能はあるが、音声通話以外にも必要そうなので、入れておく。

## 資料

- [Agora Web SDK API Reference](https://docs.agora.io/en/live-streaming/API%20Reference/web/v4.2.1/interfaces/iagorartcclient.html#getrtcstats)
- [How can I use string user names?](https://docs.agora.io/en/Agora%20Platform/faq/string)
- [Voice Call](https://docs.agora.io/en/Voice/landing-page?platform=Web)
- [User management with Firebase yields a String UID how can I use the String value for UID with Agora.IO](https://stackoverflow.com/questions/62163431/user-management-with-firebase-yields-a-string-uid-how-can-i-use-the-string-value)
- [Stackoverflow](https://stackoverflow.com/questions/tagged/agora.io): 結構解決策が見つかる。
- [Agora All starts](https://community.agora.io/)
- [サービスの時間](https://docs.agora.io/en/Voice/billing_rtc?platform=Web#service-minutes): 最初の10000分無料
- [How can I use string user names?](https://docs.agora.io/en/Agora%20Platform/faq/string)
- [joinChannel method : uid assignment](https://stackoverflow.com/questions/62312000/joinchannel-method-uid-assignment)
- [AgoraWebSDK NG API Docs](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/index.html)

Agoraユーザー制限を行う(UIDの取得)

Agora Analytics(Beta)をバシバシ叩いて調査していく。

## Agora RESTfulの準備

ブラウザ画面の右上のログインユーザーからRESTful APIの設定をクリックする。

![Agora RESTful](//images.ctfassets.net/0jyj5pjwic68/5UK2YQZCETSWDhRiH3CDAB/f9134569f592821df1e2d50620f1c0a5/Agora_RESTful.png)

Agora RESTful APIには、いくつかの特徴がある。
- RESTfulAPIはHTTPSのみをサポートします。
- HTTPリクエストを送信する前に、Agoraから提供されたカスタマーIDとカスタマーシークレットを使用してBase64でエンコードされたクレデンシャルを生成し、そのクレデンシャルをAuthorizationリクエストヘッダーのパラメーターに渡す必要があります。

AgoraのKeyとSecretを生成し、 txtをダウンロードしておく。（紛失しないように注意！）
ここで作成する`Key`と`Secret`は、`AppId`,`Certificate`とは別物です。RESTful APIを使用するため専用のようです。

![Agora RESTful secret](//images.ctfassets.net/0jyj5pjwic68/FQsWLIx9EN6s6I9DOEINR/6141db39aa1beae1628b5f45b6c37478/Agora_RESTful_secret.png)

## Basic HTTP認証を使い、API Call

ここでの例は、Laravelを使用しているのでPHPを使用しています。基本的に、`Java`,`Go`,`PHP`,`node.js`,`C#`,`Python`のサンプルコードが記載されているようです。

まず、`.env`に設定する。

```bash
AGORA_APP_ID=
AGORA_CERTIFICATE=
AGORA_CUSTMOR_KRY=
AGORA_CUSTMOR_SECRET=
# 後で追記した
AGORA_PROJECT_ID=
AGORA_PROJECT_NAME=
```

Agora RESTful APIを呼び出すメソッド(LaravelのController)。
ここには書いていないが動的キーを生成したりしている。(`try ~ catch`は、とりあえず書いている。)

```php
public function getProjects(Request $request)
{
  try {
    $this->execAgoraRestful();
  } catch (\Exception $e) {
    return ['error' => $e->getMessage()];
  }
}
```

Agora RESTful APIを実行するメソッド

```php
/**
 * Agora RESTful APIを試す
 */
public function getProjects()
{
  try {
    // HTTP basic authentication example in PHP using the RTC Server RESTful API
    // Customer ID
    $customerKey = env('AGORA_CUSTMOR_KRY');
    // Customer secret
    $customerSecret = env('AGORA_CUSTMOR_SECRET');
    // Concatenate customer key and customer secret
    $credentials = $customerKey . ":" . $customerSecret;

    // Encode with base64
    $base64Credentials = base64_encode($credentials);
    // Create authorization header
    $arr_header = "Authorization: Basic " . $base64Credentials;

    $curl = curl_init();
    // Send HTTP request
    curl_setopt_array($curl, array(
      CURLOPT_URL => 'https://api.agora.io/dev/v1/projects',
      CURLOPT_RETURNTRANSFER => true,
      CURLOPT_ENCODING => '',
      CURLOPT_MAXREDIRS => 10,
      CURLOPT_TIMEOUT => 0,
      CURLOPT_FOLLOWLOCATION => true,
      CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
      CURLOPT_CUSTOMREQUEST => 'GET',

      CURLOPT_HTTPHEADER => array(
        $arr_header,
        'Content-Type: application/json'
      ),
    ));

    $response = curl_exec($curl);

    if($response === false) {
        echo "Error in cURL : " . curl_error($curl);
    }

    curl_close($curl);

    Log::info((string) $response);
    // echo $response;
  } catch (\Exception $e) {
      return ['error' => $e->getMessage()];
  }
}
```

ここで使用されたAPIは、`dev/v1/projects`です。そのほかのAPIは、[Server RESTful API](https://docs.agora.io/en/rtc/restfulapi/)に記載されています。「Try it out」からAPIを試してみることもできます。
```php
$arr_header = "Authorization: Basic " . $base64Credentials;
```
というパラメータをつけてHTTPリクエストを送ることで認証しています。
先ほど実行したAPIから`PROJECT_ID`が返ってきます。これは`APP_ID`とは異なるようです。
\
プロジェクトを指定して取得するAPIは、
`https://api.agora.io/dev/v1/project?id={PROJECT_ID}&name={PROJECT_NAME}`ですが、ここには`APP_ID`ではなく、`PROJECT_ID`を渡します。
\
トークン認証もありますが、使用例がよくわかっていないので、様子見です。(トークン認証は、動的キーとUIDが必要になります。)

## 例) GET/dev/v3/usage

一部抜粋

```php
$projectID = env('AGORA_PROJECT_ID');

// 現在の月初と月末を取得
$from_date = date("Y-m-01");
$to_date = date("Y-m-t");

// Send HTTP request
curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.agora.io/dev/v3/usage?project_id=$projectID&from_date=$from_date&to_date=$to_date&business=default",
));
```

## Agora Analytics RESTful API (Beta)

[Agora Analytics RESTful API (Beta)](https://docs.agora.io/en/Agora%20Platform/aa_api)を試してみます。ここまではこの為の準備です。
目的としては、UID毎の通話時間を割り出したいです。

ユーザーの通話時間の取得方法については、[How do I get the user's call duration?](https://docs.agora.io/en/Video/faq/business_billing)こちらに書いてありました。

## ユーザー毎の通話時間を割り出す

ユーザーの通話時間の取得方法については2つあるようです。

- Agora RTCSDKを使用する
- Agora Analyticsを使用する

Agora RTCSDKはブラウザで使用するのでネットワーク切れなど不安があります。然るにAgora Analyticsの[Call Search](https://docs.agora.io/en/Agora%20Analytics/aa_api?platform=RESTful#a-namesearchacall-search)を使用して、取得する方法で行きます。
また、Call Search APIには、過去3日間の制限などがあるので確認してください。
\
しかし、Call Search APIのレスポンスに「You cannot consume this service as you are not invited, please contact Agora support」を表示されるので、Agoraのサポートに連絡中です。
\
もしかしたら、Agora RTCSDKで通話中に計測するのが良いかもしれません。なので少し実装してみます。

## Agora RTCSDK

[Report Call Statistics](https://docs.agora.io/en/Video/in-call_quality_web_ng?platform=Web#get-the-statistics-of-the-call)に詳細が記載されています。

`Vue.js`ですが、このような形で取得できます。DBに加算していけば良いかと思います。

```js
async leave () {
  const clientStats = this.rtc.client.getRTCStats()
  console.log('clientStats', clientStats)

  // Leave the channel.
  await this.rtc.client.leave()
},
```

## 資料

- [Agora RESTful API](https://docs.agora.io/en/agora%20platform/dashboard_restful_communication)
- [Agora Server RESTful API](https://docs.agora.io/en/rtc/restfulapi/)
- [How can I pass the basic HTTP authentication or token authentication?](https://docs.agora.io/en/Agora%20Platform/faq/restful_authentication)
- [Agora Analytics RESTful API (Beta)](https://docs.agora.io/en/Agora%20Platform/aa_api)
- [How do I get the user's call duration?](https://docs.agora.io/en/Video/faq/business_billing)

AgoraWebSDK-NGで音声のミュート機能を作る

環境

ミュート処理(localAudioTrackの非活性化)

close createの注意点

localAudioTrack作成の処理

localAudioTrackを閉じる処理

参加しているユーザーの状態を取得したい時

リモートユーザーの状態が取得できるイベント・プロパティ

参考

Related

Tags

Share

Table of Contents