2022年05月13日
DualStreamの実装について、紹介します。
DualStreamの使い所
- NW環境が厳しい場合に最低限音声だけ快適に聞こえるようにしたい
- 720P<->90Pで画角を動的に変更するようなUI/UXの場合
作成するアプリ
- 高画質,低画質をボタンで切り替える
- 取得している映像情報を表示する
開発環境
macOS Mojave 10.14.1
VisualStudioCode 1.29.1
Chrome 70.0.3538.102
AgoraVideoSDK for Web 2.5.0
使用するAPI
enableDualStream(onSuccess: function, onFailure: function): void
setRemoteVideoStreamType(stream: Stream, streamType: 0 | 1): void
setLowStreamParameter(param: object): void //オプション
実装内容
基本的にはDualStreamの有効化と高画質or低画質の切り替えです。
最初は低画質の設定無しで試してみます。
GitHubに公開しています。
client.init(app_id, function () {
client.join("", "demo", null, function(uid) {
client.enableDualStream(function() {//DualStreamの有効化
//client.setLowStreamParameter({birate:140, framerate:10, height:180, width:320});
console.log("enable dual stream success.");
}, function(err) {
});
localStream = AgoraRTC.createStream({streamID: uid, audio: true, video:true, screen: false});
localStream.setVideoProfile("720p");
localStream.init(function() {
client.publish(localStream, function (err) {});
}, function (err) {});
}, function(err) {});
}, function (err) {});
function chengeStream(streamType){
client.setRemoteVideoStreamType(remoteStream, streamType);//画質切り替え
}
setInterval(function() {//2秒毎に品質をログに出力
if(remoteStream){
remoteStream.getStats(function(stats){
console.log("---------------");
for(var i in stats){
console.log(i+":"+stats[i]);
}
});
}
}, 2000);
デフォルトの画質（720P）
画角が1280x720で受信されています。
低画質（90P）
画角が160x90で受信されています。
低画質の画角指定（180P）
画角が320x180Pで受信されています。
補足
今回はWebSDKでの紹介でしたが、Native用のSDKでも同様の実装が可能です。
執筆者ブイキューブ
Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。
