WebRTCとweb audio apiでstreamを加工したが音が出ない

Question

前提・実現したいこと

WEBRTCで受け取った相手のマイクのstreamをweb audio apiを使って加工したい。

発生している問題・エラーメッセージ

音声が再生されない。

該当のソースコード

    rtcPeerConnection.ontrack = (event) => {
        let stream = event.streams[0];
        let track = event.track;
        if ("video" === track.kind) {
            setStreamToElement(VideoRemote, stream);
        }
        else if ("audio" === track.kind) {
            setStreamToElement(AudioRemote, stream);
        }
        else {
            console.error("Unknown track kind : ", track.kind);
        }
    };

function setStreamToElement(elementMedia, stream) {
    console.log(stream);
    if (!stream) {
        elementMedia.srcObject = stream;
        return;
    }

    // 音量
    if ("VIDEO" === elementMedia.tagName) {
        elementMedia.srcObject = stream;
        elementMedia.volume = 0.0;
        elementMedia.muted = true;
    }
    else if ("AUDIO" === elementMedia.tagName) {
        if (elementMedia === g_elementAudioLocal) {
          elementMedia.srcObject = stream;
          elementMedia.volume = 0.0;
          elementMedia.muted = true;
        } else {
          let audioCtx = new AudioContext();
          let input = audioCtx.createMediaStreamSource(stream);
          let panner = audioCtx.createStereoPanner();
          panner.pan.value = 1;
          input.connect(panner);
          panner.connect(audioCtx.destination);
        }
    }
}

試したこと

WebRTCで送る前にマイクのStreamを加工してから相手に送るようにしても加工できていなかった。

• 加工した側では変更されているのが確認できた。

補足情報（FW/ツールのバージョンなど）

chrome: 96.0.4664.45

Answer 1

マイクのStreamを加工してから相手に送る

          panner.connect(audioCtx.destination);

Web Audio の出力先が AudioContext.destination になっていて WebRTC と繋がってないですね。

W3Cのサンプル集の3番のように createMediaStreamDestination() で MediaStreamAudioDestinationNode を作って、Web Audio と WebRTC を繋げるといいじゃないでしょうか。

let peer = context.createMediaStreamDestination();
panner.connect(peer);      
rtcPeerConnection.addStream(peer.stream);