I'm using the new v2 Twilio Javascript SDK to make calls from the browser to other people. This works fine but I've been asked to add volume controls for the incoming audio stream.

After some research it seems that I need to take the remote stream from the call and feed it through a gain node to reduce the volume.

Unfortunately the result from call.getRemoteStream is always null even when I can hear audio from the call. I've tested this on latest Chrome and Edge and they have the same behavior.

Is there something else I need to do to access the remote stream?

Code:

async function(phoneNumber, token) 
{
    console.log("isSecureContext: " + window.isSecureContext); //check we can get the stream

    var options = {
          edge: 'ashburn', //us US endpoint
          closeProtection: true // will warn user if you try to close browser window during an active call
    };
    var device = new Device(token, options);

    const connectionParams = { 
        "phoneNumber": phoneNumber
    };
    var activeCall = await device.connect({ params: connectionParams });

    //Setup gain (volume) control for incoming audio
    //Note, getRemoteStream always returns null.
    var remoteStream = activeCall.getRemoteStream();

    if(remoteStream)
    {
        var audioCtx = new AudioContext();
        var source = audioCtx.createMediaStreamSource(remoteStream);
        var gainNode = audioCtx.createGain();
        source.connect(gainNode)
        gainNode.connect(audioCtx.destination);
    }
    else
    {
        console.log("No remote stream on call");
    }    
}

The log output is:

isSecureContext: true

then

No remote stream on call