Agora WebSDK デモページの紹介 Advanced編

## はじめに
Agora SDKにはWebSDKのデモページの提供をしております。
今回はどんなデモがあるのか皆様にご紹介いたします。
今回はAdvanced編ということで、Agora WebSDKに触れ始めて様々な機能に触れてみたい方向けの内容となっております。
その他検証などにお役立ちする場合もあるかと思いますので有用にご利用いただけますと幸いです。
下記リンクよりすべてのWebDemoにアクセス可能です。

https://webdemo.agora.io/

## WebDemo紹介

### RecordingDeviceControl
RecordingDeviceControlはカメラとマイクを取得できているか確認できるデモとなっております。
ネットワークテストを行うことも可能ですので、クライアント環境チェックツールのサンプルとしてお役立ちできるかと思います。

https://webdemo.agora.io/recordingDeviceControl/index.html

### AdjustVideoProfile
AdjustVideoProfileは映像の画質変更ができるサンプルとなっています。
低画質からHDを超える画質にまで対応しているので、様々なユースケースで参考になりそうなデモだと思います。
デバイスが設定した画質に対応しているか、下記のCallStatsなどと合わせて確認することが可能です。

https://webdemo.agora.io/adjustVideoProfile/index.html

### DisplayCallStats
DisplayCallStatsは通話情報が画面上に表示されるようなサンプルとなっています。
参加人数、画質やビットレートが画面に表示されるのでUI上で画質変更機能等を確認することが可能です。

https://webdemo.agora.io/displayCallStats/index.html

### Mute

3種類（basicMute／SetEnabled／MediaStreamTrackEnabled）ミュートのデモを紹介します。
basicMuteはその名の通りをミュート機能の最もオーソドックスなデモになっております。
SetEnabledデモは挙動の異なったミュート機能を備えたデモとなっております。
basicMute／SetEnabledに関する説明は下記記事をご参照いただけますと幸いです。
[**WebSDK4.ｘのsetEnabled、setMutedの違いは何ですか？どちらを推奨しますか？**](https://vcube-support.zendesk.com/hc/ja/articles/4405381534489)

MediaStreamTrackEnabledデモはAgoraのミュートAPIではなく、直接JavaScriptのAPIからミュートが行えるデモとなっております。
実装が少し異なりますので、こちらもデモコードをご参照いただけますと幸いです。

https://webdemo.agora.io/basicMute/index.html

https://webdemo.agora.io/basicMuteSetEnabled/index.html

https://webdemo.agora.io/basicMuteMediaStreamTrackEnabled/index.html


### VideoBeautyEffect
VideoBeautyEffectは映像美化の機能のデモとなります。
こちらは映像の色味を変えるようなサンプルとなっておりまして、人物の美化は異なった機能としてございます。

https://webdemo.agora.io/videoBeautyEffect/index.html

### AudioMixingAndAudioEffect
AudioMixingAndAudioEffectはPresetしている音源と会話している音声のMixできる機能となっております。
デモ機能にPreset音源がございますので、すぐお試しいただくことが可能です。
※デフォルトの音量が大きいのでご注意ください。
デモ内でボリューム調整機能もございます。合わせてご参照いただけますと幸いです。

https://webdemo.agora.io/audioMixingAndAudioEffect/index.html

### PushStreamToCDN
PushStreamToCDNはYoutube配信等にAgoraのStreamを流すことができるデモとなっております。
こちらRTMPの受け口であるLiveStreamingURLが必要になるため、ご準備の上デモをお試しいただけますと幸いです。


https://webdemo.agora.io/pushStreamToCDN/index.html

### DualStream
Dual Streamは、受信側のネットワーク状況などの条件に応じて選択できるよう、送信側にて高画質と低画質の2つのビデオストリームを送信できるデモとなっております。
これを用いて高画質と低画質をうまく使い分けることで、クライアント環境における問題(デバイス負荷やネットワークパフォーマンスが良くないため発生する映像の遅延や切断など)を改善することができます。
[**Dual Stream機能の詳細はこちらからご覧ください。**](https://vcube-support.zendesk.com/hc/ja/articles/4405856563737)
[**Dual Stream機能を弊社で試行した記事がございますのでこちらからご覧ください。**](https://qiita.com/v-cube/items/5949127b865baa580756)

https://webdemo.agora.io/dualStream/index.html

### GeoFencing
こちらGeoFencing機能を備えたデモとなっております。
GeoFencingを有効にすることで、Agoraのサーバを特定地域のみに接続することが可能になります。
こちらデモ内で国別の切り替えが行えますので、お試しいただければ幸いです。
日本国内のみのサーバー接続を行うことももちろん可能です。
[**GeoFencing機能の詳細はこちらからご覧ください。**](https://docs.agora.io/en/video-calling/develop/geofencing?platform=web)

https://webdemo.agora.io/geoFencing/index.html

### JoinMutlipleChannel
JoinMutlipleChannelは二つのチャンネルに同時に入ることができるデモとなっております。
Channel１にはホストとして入室して映像・音声を送信、Channel２には入室のみといった仕様になっております。
詳細はデモコードご確認いただけますと幸いです。

https://webdemo.agora.io/joinMutlipleChannel/index.html

### CustomVideoSource
CustomVideoSourceはサンプル動画配信と通話配信を切り替えることができるサンプルとなっております。
Switchを押下すると通話からサンプル動画配信開始となります。
※こちらはSwitchでサンプル動画配信開始するデモとなっております。

https://webdemo.agora.io/customVideoSource/index.html

## 最後に
ここまで記事を読んでいただき、ありがとうございます。
上記デモが皆様の開発の助けになれば幸いです。

[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=f712953155ddadcf0177)
[<img width="912" alt="Agoraの詳細はこちら" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5865441c-9d31-c702-3698-3aeb84927f28.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=f712953155ddadcf0177)