4

I want to know how to set the volume in WebRTC.

I'm drawing audio like this:

audio = document.createElement('audio');
audio.controls = true;
audio.autoplay = true;
audio.src = window.URL.createObjectURL(stream);
div.appendChild(audio);

I want to make my custom Audio UI. So, I will use HTML's slide bar.

<input type="range">

But, I don't know set volumes in WebRTC stream. How can I set it?

Maria Ines Parnisari
  • 16,584
  • 9
  • 85
  • 130
이영우
  • 57
  • 1
  • 1
  • 5

1 Answers1

12

For output(speakers) audio volume, you can manage with volume property of audio/video element.

var audio = document.getElementById('audioId');
audio.volume = 0.9; // 0.0(Silent) -> 1 (Loudest)

You can change the audio.volume based on your slide bar position

To change input(microphone) volume, there is no direct method available in WebRTC AudioTrack/MediaStream.

We can use WebAudio Api to handle volume at Stream/Track level and you can connect WebAudio output to PeerConnection as following

var audioContext = new AudioContext()
var gainNode = audioContext.createGain(); 
navigator.mediaDevices.getUserMedia({audio:true})
.then((stream) => {
    console.log('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);
})

Now we can easily control the microphone volume with below function

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

For more info have a look at my demo

Ajay
  • 2,483
  • 2
  • 16
  • 27
  • I am working on WebRTC VoiceEngine Module. I have been able to successfully record audio bytes using `WebRtcAudioRecord` class but unable to understand, *where I can push or put receiving bytes to play* inside `WebRtcAudioTrack`. I haven't look any method or callback to give the receiving bytes to `WebRtcAudioTrack` to play. Can you please assist me. – Muhammad Usman Bashir May 05 '20 at 11:17
  • @MuhammadUsmanBashir Please consider creating a question instead of asking in the comments. Comments can be used to ask for clarification but not to ask completely independent questions. – Marco Sacchi Oct 15 '21 at 14:22
  • @MarcoSacchi Thanks for notifying, but I had solved that problem on that same day 1 year ago. Thanks again. – Muhammad Usman Bashir Oct 17 '21 at 05:25
  • the condition inside `changeMicrophoneLevel` fn should be `if(value >= 0 && value <= 2) {...}` because sometime we want to set the value 0 i.e totally mute and `value &&` clause will skip this scenario. – Sachin Kumar Jan 04 '22 at 07:01