Beyond テレワーク | Web会議・テレビ会議(TV会議)ブイキューブ

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

  • WebRTC
  • Agora.io

テレビには副音声や二か国語放送がある番組もあります。
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;
    }
  });
Agora SDK イメージ
Agora SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る