Voice echo for local participants

Developers
1

Hi
I am using low level api to create conference. I added video element and audio element for local participant. Now I am having issue of voice as local participant hearing its own voice.

const initOptions = {
    disableAudioLevels: false
};
export let localTracks = [];

JitsiMeetJS.init(initOptions);
JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR);

export function createTracksAndAddToRoom(room) {
    JitsiMeetJS.createLocalTracks({
        devices: ['video', 'audio'],
        config: { disableAEC: true,disableAP: true }
    }).then((tracks) => {
        tracks.forEach(track => {
            room.addTrack(track);
        });
    }).catch(error => {
        console.error('There was an error creating the local tracks:', error);
    });
}

export function createAndJoinRoom(connection, roomName) {
    return new Promise((resolve) => {
      const room = connection.initJitsiConference(roomName, {
        startAudioMuted:false,
        //openBridgeChannel: true
      });
      room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, () => {
        resolve(room);
      });
      room.join();
    });
  }

export function connect(roomName,options) {
    return new Promise(((resolve, reject) => {
        let optionsWithRoom = {
            ...options
        };
        optionsWithRoom.serviceUrl = options.serviceUrl + `?room=${roomName}`;

        const connection = new JitsiMeetJS.JitsiConnection(null, null, optionsWithRoom);

        connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, () => {
            resolve(connection);
        });
        connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, () => {
            reject({reason:'CONNECTION_FAILED'});
        });
        connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, () => {

            connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED);
            connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED);
            connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED);

            reject({reason:'CONNECTION_DISCONNECTED'});
        });

        connection.connect();
    }))
}


export function switchVideo(isVideo) {
    JitsiMeetJS.createLocalTracks({
        devices: [ isVideo ? 'video' : 'desktop' ]
    })
    .then(tracks => {
        localTracks.push(tracks[0]);
        localTracks[1].addEventListener(
            JitsiMeetJS.events.track.TRACK_MUTE_CHANGED,
            () => console.log('local track muted'));
        localTracks[1].addEventListener(
            JitsiMeetJS.events.track.LOCAL_TRACK_STOPPED,
            () => console.log('local track stoped'));
        localTracks[1].attach($('#localVideo1')[0]);
        room.addTrack(localTracks[1]);
    })
    .catch(error => console.log(error));
}

<div class="card-body p-0">
                        <video muted v-if="Object.keys(teacherTrack.video).length" :ref="teacherTrack.video.getId()" autoplay />
                        <audio v-if="Object.keys(teacherTrack.audio).length" :ref="teacherTrack.audio.getId()" autoplay />
                    </div>

Any help is appriciable
Thanks

2

I’d suggest you mute the audio element for the local user.