2022年05月19日

WebRTCで副音声システムを構築

テレビには副音声や二か国語放送がある番組もあります。
Web上でのライブ配信ストリーミングでも
・エンタメ系:メインの配信と裏配信の組み合わせ
・教育系:メインが英語、副音声でリアルタイム翻
という配信形態が生まれてくると思われます。
そこで副音声システムのサンプルを作成しました。

サンプルはこちらにあります。
Agora.io WebSDK3.0.1に内包されているサンプルをベースに修正しています。

お役立ち資料ダウンロード

オンライン体験におけるブイキューブの技術サポートのご案内

【図解】システム開発のお手伝い

ブイキューブのソリューションアーキテクトが、寄り添います!
各種ライブ配信システムのアーキテクチャについて わかりやすい構成図にてご紹介!

無料ダウンロード

基本的な仕様

この図の通り、登場人物は「メインチャンネル」「サブチャンネル」「視聴者」となります。
システムの仕様によってはサブチャンネルの映像、音声をメインチャンネルが受け取る必要が無い場合もありそうです。

視聴者は音声について1度に受け取るチャンネルを1つになるよう実装をします。

具体的な実装方法

初回アクセス時の処理

視聴者は初回アクセス時にメインチャンネルの音声のみを受信

index.html
    // Occurs when a user subscribes to a remote stream.
      rtc.client.on("stream-subscribed", function (evt) {
        var remoteStream = evt.stream;
        var id = remoteStream.getId();
    
        rtc.remoteStreams.push(remoteStream);
        addView(id);
    
        if(id==2000){ //サブチャンネルのuidを2000に固定しています
          remoteStream.setAudioVolume(0);//サブチャンネルのボリュームを0にします
        }
        remoteStream.play("remote_video_" + id);
        Toast.info('stream-subscribed remote-uid: ' + id);
        console.log('stream-subscribed remote-uid: ', id);
      })
    

音声の切り替え

Switchボタンで音声のみ切り替えを実施します

index.html
      $("#switch").on("click", function (e) {
        console.log("switch")
        e.preventDefault();
        if(currentAudioID == 1000){
          for(var i in rtc.remoteStreams){
            if(rtc.remoteStreams[i].getId() == 1000){
              rtc.remoteStreams[i].setAudioVolume(0);
            }
            if(rtc.remoteStreams[i].getId() == 2000){
              console.log("switch to 2000")
              rtc.remoteStreams[i].setAudioVolume(100);
            }
          }
          currentAudioID = 2000;
        }else{
          for(var i in rtc.remoteStreams){
            if(rtc.remoteStreams[i].getId() == 1000){
              console.log("switch to 1000")
              rtc.remoteStreams[i].setAudioVolume(100);
            }
            if(rtc.remoteStreams[i].getId() == 2000){
              rtc.remoteStreams[i].setAudioVolume(0);
            }
          }
          currentAudioID = 1000;
        }
      });
    
ガイドブックダウンロード
ビデオ通話・ライブ配信API/SDK「Agora」

超低遅延API/SDK「Agora」ガイドブック

通話・配信遅延30-200ms!100万人の視聴対応!未経験者から専門家まで、誰でも読みやすいAgoraのガイドブックをダウンロードしませんか。

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

執筆者ブイキューブ

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

関連記事

先頭へ戻る