Adjusting local audio/video

Your Peers will want to mute others or themselves, plug in a headset mid call and more. This section will allow you to handle device changes.

Please make sure you're familiar with the basic concepts and have already rendered video. Adjusting audio/video settings with Between is easy. The LocalParticipant object allows you to configure audio and video for the published stream. Let's take a look at a couple of examples.

Setup Conference Object

Like always, we'll start with our Conference Object. Initialize this first!

import { Conference } from 'between'

let conf = new Conference(customCallId, customUserData)
conf.id // custom or auto generated callId

Muting or Unmuting

To mute or unmute audio, you can use the LocalParticipant object's publishAudio method, passing in a boolean value of true or false to turn audio on or off, respectively.

// ......
// with conference already setup

LocalParticipant.publishAudio(false)    //muting
LocalParticipant.publishAudio(true)     //unmuting
            

Turning Video On/Off

To turn video off or on, you can use the LocalParticipant object's publishVideo method, passing in a boolean value of true or false to turn video on or off, respectively.

// ......
// with conference already setup

LocalParticipant.publishVideo(false)    //turning off video
LocalParticipant.publishVideo(true)     //turning on video

Changing audio source

You'll need to use a listener from the Conference object to get the device ID of the audio source, then use LocalParticipant's setVideoSource method to change audio to that source.

// ......
// with conference already setup

let audioInputs = []
conf.on('devicesUpdated', () => {
    audioInputs = devices.filter((device) => device.kind === 'audioinput') 
})

// choose the first one as an example
let newDeviceId = audioInputs[0].deviceId

LocalParticipant.setAudioSource(newDeviceId)
            

Changing video source

You'll need to use a listener from the Conference object to get the device ID of the video source, then use LocalParticipant's setVideoSource method to change video to that source.

// ......
// with conference already setup

let videoInputs = []
conf.on('devicesUpdated', () => {
    videoInputs = devices.filter((device) => device.kind === 'videoinput')
})

// choose the first one as an example
let newDeviceId = videoInputs[0].deviceId

LocalParticipant.setVideoSource(newDeviceId)
            

Changing audio output

Currently the audio output can only be set on Chromium based browsers, this functionality is in beta in other browsers and as support comes from individual browsers it will be updated.

// ......
// with conference already setup

let speakers = []
conf.on('devicesUpdated', () => {
    speakers = devices.filter((device) => device.kind === 'audiooutput')
})

// choose the first one as an example
let newDeviceId = speakers[0].deviceId

conf.setOutputDevice(newDeviceId)
            

Next Steps

You should now have everything you need to integrate Between with your stack. But, if your application involves volumetric adjustment based on movement, such as a virtual office, please proceed with the next step here.