Audio echo/feedback in video call using Video SDK

I’ve added video chats to our web application (built in React) and have begun testing. The couple of tests I’ve run had extremely loud audio echos/feedback - so much so that it was unusable. Is this a known issue?

Hey @Chris,

I’ve not seen any reports of this yet. Could you let us know how you’re testing this? Is it possible there is echo/feedback based on your input and output selection and the possibility they’re looping?

Hey @Tyler - yes, please see the attached relevant code. 1 user was in Microsoft Edge on Windows, the other was in Chrome on a Mac. Both users were on headphones.

SendBirdCall.init('xxxx');
        const authOption = {
            userId: sendBirdDataResponse.data.sendBirdUserId,
            accessToken: sendBirdDataResponse.data.sendBirdAccessToken
        };
        SendBirdCall.authenticate(authOption, (result, error) => {
            if (error) {
                // Handle authentication failure.
            } else {
                // The user has been successfully authenticated and is connected to Sendbird server.
                // Establishing websocket connection.
                SendBirdCall.connectWebSocket()
                    .then(() => {
                        if (!chatGroup.sendBirdRoomId) {
                            SendBirdCall.createRoom({ roomType: SendBirdCall.RoomType.SMALL_ROOM_FOR_VIDEO })
                                .then(room => {
                                    this.room = room;
                                    this.enterRoom();
                                }).catch(e => {
                                    // Failed to create a room.
                                });
                        }
                        else {
                            SendBirdCall.fetchRoomById(chatGroup.sendBirdRoomId)
                                .then(room => {
                                    this.room = room;
                                    this.enterRoom();
                                })
                                .catch(e => {
                                    // Handle error
                                });
                        }
                    })
                    .catch(/* nothing */);
            }
        });

enterRoom = () => {
        const enterParams = {
            videoEnabled: true,
            audioEnabled: true
        };
        this.room.enter(enterParams)
            .then(() => {
                // User has successfully entered `room`.
                const localMediaView = document.getElementById('local_video');
                this.room.localParticipant.setMediaView(localMediaView);
                this.room.on('remoteParticipantEntered', (remoteParticipant) => {
                    if (remoteParticipant.participantId !== this.room.localParticipant.participantId) {
                        this.getOrCreateRemoveVideoDiv(remoteParticipant.participantId);
                    }
                });
                this.room.on('remoteParticipantExited', (remoteParticipant) => {
                    let obj = document.getElementById('remote_' + remoteParticipant.participantId);
                    obj.remove();
                });
                this.room.on('remoteParticipantStreamStarted', (remoteParticipant) => {
                    if (remoteParticipant.participantId !== this.room.localParticipant.participantId) {
                        let divObj = this.getOrCreateRemoveVideoDiv(remoteParticipant.participantId);
                        remoteParticipant.setMediaView(divObj.firstChild);
                    }
                });
            })
            .catch(e => {
                // Handle error.
            });
    }

Does this only occur when you’re using video?

I hadn’t tried audio only if that’s what you mean. This block of code is the only Sendbird implementation we have in the app.

Hey @Tyler - just wondering if there are any updates on this? Happy to share whatever is needed to try to resolve this.

Hi @chris ,

This slipped off my radar. I apologize. I’ll make this my priority in the AM and see if I can get you some answers.

Cool, thanks. FWIW - I tried again today with a different person in a different country. This person was on a Windows machine using Chrome, but we ran into the same issue - there was a bad echo that made it unusable. This is on a publicly available machine btw - happy to test if you’d like.

@Tyler - I tried with the newly updated version of the Javascript client. Same issue. Were you able to look into this at all?

Hey @chris, sorry for the lack of response. I have taken a look at it and I’ve not yet been able to reproduce the issue. I’m trying to find ways that it could be introduced but am not having any luck.

I can hear myself through the speakers when I am talking. Is there perhaps a way to turn off the incoming audio stream from my current connection?

Actually, I think I may have just found whats going on. In your code when you’re entering the room, could you add localMediaView.muted = 'muted';, and try again?

I’d set it just after:

this.room.localParticipant.setMediaView(localMediaView);

Awesome, that was it. Just changed the HTML for the local video to:

<video id="local_video" autoPlay muted />

And that resolved it. Thanks again for the help - much appreciated.

1 Like