2022年05月19日
テレビには副音声や二か国語放送がある番組もあります。
Web上でのライブ配信ストリーミングでも
・エンタメ系：メインの配信と裏配信の組み合わせ
・教育系：メインが英語、副音声でリアルタイム翻
という配信形態が生まれてくると思われます。
そこで副音声システムのサンプルを作成しました。
サンプルはこちらにあります。
Agora.io WebSDK3.0.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の提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。
