実際のビデオ通話を始める前に利用できるかの確認は重要です。
擬似的にビデオ通話を行う事で問題点をユーザーに認識させる事ができます。
ブラウザ版の場合、そもそもWebRTCに対応しているかどうかがポイントになります。
Agora.io SDKではブラウザチェックのAPIが用意されています。
handleCompatibilityCheck() {
this.currentTestSuite = "0";
let testSuite = this.testSuites["0"];
setTimeout(() => {
testSuite.notError = AgoraRtc.checkSystemRequirements();
testSuite.notError
? (testSuite.extra = this.t("fully_supported"))
: (testSuite.extra = this.t("some_functions_may_be_limited"));
this.handleMicrophoneCheck();
}, 3000);
},
AgoraRTC.checkSystemRequirements()がチェックするAPIになります。
falseが返却された場合にアラート表示して、ビデオ通話画面へ遷移させない処理が有効かと思います。
次にマイク・カメラが利用できるかがポイントになります。
handleMicrophoneCheck() {
this.currentTestSuite = "1";
let testSuite = this.testSuites["1"];
this.sendStream = AgoraRtc.createStream({
streamID: this.sendId,
video: false,
audio: true,
screen: false
});
this.sendStream.init(
() => {
this.sendStream.play("test-send");
let totalVolume = 0;
this.microphoneCheckTimer = setInterval(() => {
this.inputVolume = Math.floor(
this.sendStream.getAudioLevel() * 100
);
totalVolume += this.inputVolume;
}, 100);
setTimeout(() => {
clearInterval(this.microphoneCheckTimer);
this.sendStream.close();
if (totalVolume < 60) {
testSuite.notError = false;
testSuite.extra = this.t("can_barely_hear_you");
} else {
testSuite.extra = this.t("microphone_works_well");
}
this.handleSpeakerCheck();
}, 7000);
},
err => {
// do next test
testSuite.notError = false;
testSuite.extra = err.msg;
try {
this.sendStream.close();
} catch (error) {
throw(error);
} finally {
this.handleSpeakerCheck();
}
}
);
},
AgoraRtc.createStream()で実際にストリームを作成し、getAudioLevel()で入力ボリュームをチェックしています。
checkProfile(profile) {
return new Promise((resolve, reject) => {
this.sendStream && this.sendStream.stop();
this.sendStream = AgoraRtc.createStream({
streamID: this.sendId,
video: true,
audio: true,
screen: false
});
this.sendStream.setVideoProfile(profile.enum);
this.sendStream.init(
() => {
this.sendStream.play("test-send");
setTimeout(() => {
let videoElement = document.querySelector("#video" + this.sendId);
if (
videoElement.videoWidth === profile.width &&
videoElement.videoHeight === profile.height
) {
profile.status = "resolve";
resolve();
} else {
profile.status = "reject";
reject("Resolution mismatched");
}
}, 1000);
},
err => {
reject(err);
}
);
});
},
カメラのチェックも実際にストリームを作成し、再生をさせて期待されたVideoElementが生成されたかを判定しています。
混雑しているWi-Fi環境や、月末に帯域制限がかかっている4G回線等はビデオ通話に必要な帯域が不足します。
その場合は、「映像の画質を落とす」「音声のみにする」という方法があります。最低限のコミュニケーションを保つという考え方です。
rtc.client.enableDualStream(function() {
console.log("enable dual stream success.");
}, function(err) {
console.log("dual stream error."+err);
});
//中略
var highOrLow = 0;
$("#switchVideo").on("click", function (e) {
console.log("switchVideo")
e.preventDefault();
if (highOrLow === 0) {
highOrLow = 1
console.log("Set to low");
}else {
highOrLow = 0
console.log("Set to high");
}
rtc.client.setRemoteVideoStreamType(rtc.remoteStreams[0], highOrLow);
});
こちらは手動で画質を切り替えるサンプルになります。
自動で切り替えるには以下のAPIを利用します。
client.setStreamFallbackOption(remoteStream, fallbackType);
fallbackTypeによって以下の振る舞いになります。
0:自動切り替え無効化
1:低画質に切り替え
2:低画質でも厳しい場合に音声のみ受信に切り替え
又、低画質の設定はデフォルトで90P程度ですが、指定する事も可能です。
rtc.client.setLowStreamParameter({bitrate:65, framerate:15, height:120, width:160});
ビデオ通話中にもネットワーク環境の良し悪しを明示的に可視化する事も重要です。
rtc.client.on('network-quality', function(stats) {
console.log('downlinkNetworkQuality', stats.downlinkNetworkQuality);
console.log('uplinkNetworkQuality', stats.uplinkNetworkQuality);
if(stats.downlinkNetworkQuality == 0){
$("#networkQuality").html("NetworkQuality:-");
}else if(stats.downlinkNetworkQuality == 1 || stats.downlinkNetworkQuality == 2){
$("#networkQuality").html("NetworkQuality:Good");
}else{
$("#networkQuality").html("NetworkQuality:Bad");
}
});
client.on('network-quality',funciton(){})で6段階の評価が可能です。
このAPIはRTTやパケットロス、ジッター 等でネットワーク環境の品質をチェックしています。
ビデオ通話で問題が発生し、事後に問い合わせがくるパターンもあります。
その場合に求められるのは原因です。システム側では問題がなく、ユーザーの環境に起因している事を示す必要があります。
Agora.ioでは録画の仕組みも提供しています。クラウド型とオンプレミス型になります。
実装方法は以下に解説があります。
・Cloud Recording SDK クイックスタートガイド
・On-premise Recording SDK クイックスタートガイド
「映像が見えなかった」という問い合わせに対して録画データを確認し、録画データに映像が残っていなかった場合は送信側の問題、映像が残っていれば受信側の問題という具合に切り分けが可能です。
Call SearchはAgora Analyticsの機能の1つで、通話時の品質をデータ化し、それを視覚的にわかりやすく表示した機能です。
例えば、予期せぬ切断や音声途切れなど、通話の品質が良くなかった場合の解析用として通話の履歴、品質を確認することができます。