2022年05月13日

実装例|DualStreamの実装

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で受信されています。

デフォルトの画質(720P)

低画質(90P)

画角が160x90で受信されています。

低画質(90P)

低画質の画角指定(180P)

画角が320x180Pで受信されています。

低画質の画角指定(180P)

補足

今回はWebSDKでの紹介でしたが、Native用のSDKでも同様の実装が可能です。

ガイドブックダウンロード

【すぐ読める!ガイドブック】ビデオ通話・ライブ配信SDK「Agora」

【大充実】通話・配信SDK「Agora」ガイドブック

通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。
Agora SDKの特徴から活用例まで徹底解説!

無料ダウンロード
ブイキューブ

執筆者ブイキューブ

Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。

関連記事

先頭へ戻る