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.

Muting or Unmuting Audio

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

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

Muting or Unmuting Video

To mute or unmute video, 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

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

Changing audio source

You'll need to use the devicesUpdated 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', (devices: MediaDeviceInfo[]) => {
    audioInputs = devices.filter((device) => device.kind === 'audioinput') 
})

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

local.setAudioSource(newDeviceId)
            

Changing video source

You'll need to use the devicesUpdated 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

local.setVideoSource(newDeviceId)
            

Adding a UI for Audio/Video Settings

To provide a seamless experience for your users, consider adding a user interface (UI) for managing audio and video settings. You can create a settings panel that includes options for muting/unmuting audio and video, selecting audio input and output devices, and selecting video input devices. This way, users can easily adjust their settings during a call.

    import React, { useState, useEffect } from 'react';
    const AudioVideoSettings = ({ conf, local }) => {
    const [devices, setDevices] = useState([]);
    const [audioInput, setAudioInput] = useState('');
    const [videoInput, setVideoInput] = useState('');
    const [audioOutput, setAudioOutput] = useState('');
    const [isAudioMuted, setIsAudioMuted] = useState(false);
    const [isVideoMuted, setIsVideoMuted] = useState(false);

    useEffect(() => {
        const handleDevicesUpdated = (updatedDevices) => {
            setDevices(updatedDevices);
        };

        conf.on('devicesUpdated', handleDevicesUpdated);

        return () => {
            conf.off('devicesUpdated', handleDevicesUpdated);
        };
    }, [conf]);

    const handleAudioInputChanged = (e) => {
        setAudioInput(e.target.value);
        local.setAudioSource(e.target.value);
    };

    const handleVideoInputChanged = (e) => {
        setVideoInput(e.target.value);
        local.setVideoSource(e.target.value);
    };

    const handleAudioOutputChanged = (e) => {
        setAudioOutput(e.target.value);
        conf.setOutputDevice(e.target.value);
    };

    const toggleAudioMute = () => {
        setIsAudioMuted(!isAudioMuted);
        local.publishAudio(!isAudioMuted);
    };

    const toggleVideoMute = () => {
        setIsVideoMuted(!isVideoMuted);
        local.publishVideo(!isVideoMuted);
    };

    const deviceOptions = (kind) => {
        return devices
            .filter((device) => device.kind === kind)
            .map((device) => (
                <option key={device.deviceId} value={device.deviceId}>
                    {device.label || `Device ${device.deviceId}`}
                </option>
            ));
    };

    return (
        <div>
            <h3>Audio/Video Settings</h3>
            <div>
                <label htmlFor="audioInput">Audio Input:</label>
                <select
                    id="audioInput"
                    value={audioInput}
                    onChange={handleAudioInputChanged}
                >
                    {deviceOptions('audioinput')}
                </select>
            </div>
            <div>
                <label htmlFor="videoInput">Video Input:</label>
                <select
                    id="videoInput"
                    value={videoInput}
                    onChange={handleVideoInputChanged}
                >
                    {deviceOptions('videoinput')}
                </select>
            </div>
            <div>
                <label htmlFor="audioOutput">Audio Output:</label>
                <select
                    id="audioOutput"
                    value={audioOutput}
                    onChange={handleAudioOutputChanged}
                >
                    {deviceOptions('audiooutput')}
                </select>
            </div>
            <button onClick={toggleAudioMute}>
                {isAudioMuted ? 'Unmute Audio' : 'Mute Audio'}
            </button>
            <button onClick={toggleVideoMute}>
                {isVideoMuted ? 'Unmute Video' : 'Mute Video'}
            </button>
        </div>
    );
};

export default AudioVideoSettings;

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.