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.
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
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
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)
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)
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;
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)
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.