I am trying to change the microphone / camera volume via gainNode method to the following code and I am getting the following error:

Something wrong in capture stream DOMException: Failed to execute ‘connect’ on ‘AudioNode’: cannot connect to a destination belonging to a different audio context.

to the following lines:

1. audioSource.connect(gainNode);
2. gainNode.connect(audioDestination);

What am I doing wrong and what should I do to fix it? Am I using the right code for what I want to do?

Please take in note I’m newbie, so take it easy pls! 🙂

/*********************** video call ***************************/
var localStream;


var localVideo = document.getElementById("localVideo");

var remoteVideo = document.getElementById("remoteVideo");

var callButton = document.getElementById("callButton");


var inputLevelSelector = document.getElementById('mic-volume');

var outputLevelSelector = document.getElementById('speaker-volume');

inputLevelSelector.addEventListener('change', changeMicrophoneLevel);
outputLevelSelector.addEventListener('change', changeSpeakerLevel);

callButton.disabled = true;
callButton.onclick = call;

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({
        audio: true,
        video: true
    }, gotStream, //note that we are adding both audio and video
    function (error) {
        console.log(error);
    });

var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var SessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
var pc = new RTCPeerConnection({
    "iceServers": []
});

function gotStream(stream) {
    // localVideo.src = window.URL.createObjectURL(stream); // DEPRECATED
    localVideo.srcObject = stream; // UPDATED
    localStream = stream;
    callButton.disabled = false;
    pc.addStream(stream);
}

pc.onicecandidate = function (event) {
    console.log(event);
    if (!event || !event.candidate) {
        return;
    } else {
        socket.emit("video call", {
            type: "iceCandidate",
            "candidate": event.candidate
        });
    }
};

var remoteStream;
pc.onaddstream = function (event) {
    remoteStream = event.stream;
    var remoteVideo = document.getElementById("remoteVideo");
    // remoteVideo.src = window.URL.createObjectURL(event.stream); // DEPRECATED
    remoteVideo.srcObject = event.stream; // UPDATED
    remoteVideo.play();
};

    /*********************** Microphone Gain ***************************/
    var audioContext = new AudioContext()
    var gainNode = audioContext.createGain(); 
    var audioSource, audioDestination;

    navigator.mediaDevices.getUserMedia({audio:true})
    .then((stream) => {
        console.log('Mic-gain-> Got Stream', stream);
        window.orginalStream = stream;
        return stream;
    })
    .then((stream) => {
        audioSource = audioContext.createMediaStreamSource(stream),
        audioDestination = audioContext.createMediaStreamDestination();
        audioSource.connect(gainNode);
        gainNode.connect(audioDestination);
        gainNode.gain.value = 1;
        window.localStream = audioDestination.stream;
        //audioElement.srcObject = window.localStream; //for playback
        //you can add this stream to pc object
        // pc.addStream(window.localStream);
    })
    .catch((err) => {
        console.error('Something wrong in capture stream', err);
    })


    function changeMicrophoneLevel(value) {
        if(value && value >= 0 && value <= 2) {
            gainNode.gain.value = value;
        }
    }

If you need any more code that not included, please let me know