Twilio-video.js: Audio is initially quiet on iOS Safari

[andrewgrewell]

• ✔️ I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• ✔️ I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• ✔️ I verified that the Quickstart application works in my environment.
• ✔️ I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

const opts = { video: false }
TwilioVideo.connect(token, opts)

Expected behavior:

Audio received by the remote participant on iOS safari, should be at the expect volume

Actual behavior:

Audio is quiet until a change in the media stream, e.g. rotating the device

Software versions:

• [ ] Browser(s): Safari
• [ ] Operating System: iOS
• [ ] twilio-video.js: 2.0.0-best8
• [ ] Third-party libraries (e.g., Angular, React, etc.): NA

The situation is that one side creates local audio and video tracks, and then provides them to connect as tracks, this works as expected.
However the other participant does not have a video track, only audio. When specifying audio true video false, that participants audio will initially be very quiet, until you rotate the device, at which point the audio will be at the expected volume.
If I do not specify audio or video and instead allow Twilio to handle initialization of the tracks the audio is at the correct level to start. However this is not an option due to the fact I need to have video false
I've tried specifying more constraints such as

audio: {
                echoCancellation: false,
                autoGainControl: false,
                noiseSuppression: false,
                volume: 1
            },

but it is the same issue, any time audio or video are present on the options, the audio will initially be incorrect.

[andrewgrewell]

As an update, this seems to be caused by creating local tracks prior to connecting to the room.
If the track is disabled manually, and then re-enabled manually once the room has been joined the audio is at the expected volume.

[manjeshbhargav]

Hi @andrewgrewell ,

Thanks for writing in with your issue. Maybe you're hitting this Safari bug when you try to create only audio tracks? Can you try out the sample application mentioned in the bug to see if you experience this issue on your iPad? If so, we have a workaround that can be enabled as a ConnectOptions flag:

connect(token, { workaroundWebKitBug180748: true });

Please let me know if this works for you.

Thanks,

Manjesh Malavalli
JSDK Team

[MBlanpe]

Hi
Same issue with:

• Browser(s): Safari for iphone
• Operating System: iOS
• twilio-video.js: 1.17

I have tried the solution above and it does not work.
I noticed that when I rotate the phone, the sound is heard ok.
My stage is the next one, a mobile phone emits audio and video to a web panel, the web panel emits audio, but on the iphone the audio is very low, I have tried with several different models of iphone.

[MBlanpe]

Hello.
Yesterday, I did another test.
If the rotation of the iPhone is not allowed, the sound is louder.

[andrewgrewell]

@manjeshbhargav thanks for the reply, unfortunately that does not resolve the issue.

I didn't have time to continue to look into the issue, so for right now what I am doing is disabling and re-enabling the audio track which fixes the issue. However it seems I need to wait (around 5-10sec) after the connection has been established for this hack to work.

It seems like it would be an issue with iOS implementation of WebRTC, and perhaps it not respecting the various echoCancellation noiseCancellation etc. constraints when provided.
I'll update if I have more time to look into the the issue, but for now the enable/disable hack is getting us past it.

[mding5692]

I seem to have a similar issue, could it be related to Safari Autoplay policies?

[tom-s07]

Same issue, calling from iOS Safari with the twilio client and output sound is very low on the iphone.

[Killerkiwi2005]

same issue inconsistent volume with safai

[mding5692]

Is there a fix for this, we have been refunding our customers because of this issue.

[Killerkiwi2005]

They only fix seems to be closing safari and reopening
You do need to make sure you cleanup correctly (closing the camera and mic) or it seems to trigger this more often some times getting no sound/video or low sound

    // When we are about to transition away from this page, disconnect
    // from the room, if joined.
    window.addEventListener("beforeunload", leaveRoomIfJoined);
    window.addEventListener("pagehide", leaveRoomIfJoined); // IOS does not do beforeunload anymore

[manjeshbhargav]

Hi everyone,

We have release version 2.7.1 which works around quite a few iOS Safari audio issues. Please try it out and share any feedback you may have regarding this problem.

Thanks,

Manjesh Malavalli
JSDK Team

[jsdream]

Hi @manjeshbhargav,

We have tested the 2.7.1 version and still having issues with silent audio on Mobile Safari
13.1.1 (iOS 13.5.1).

The issue is reliably reproduced by connecting to the room with headphones plugged in and then unplugging headphones causes audio to become very silent. The silent audio can be fixed by changing device orientation or unpublishing the LOCAL audio stream (which is a bit strange, as not sure how local stream affects remote audio playback).

[manjeshbhargav]

Hi @jsdream ,

It looks like you are hitting this WebKit bug which has been fixed in iOS 13.6. I tried your scenario in 13.6 and it has indeed been fixed. Please try it out for yourself and let me know.

Thanks,

Manjesh Malavalli
JSDK Team

[jsdream]

Hi @manjeshbhargav,

I've just upgraded and tested with iOS 13.6 and the issue indeed seems to have been fixed. Thanks for pointing that out.

Do you have any ideas for any possible workarounds for users on older versions?

[manjeshbhargav]

Hi @jsdream ,

In order to detect when headphones are unplugged, try listening to the onpause event on the <audio> element playing the remote audio. If onpause is indeed emitted, then you can call the element's play() method.

If onpause is not emitted, then I recommend providing a "Reset Audio" button for each RemoteParticipant's UI, and when the user clicks on it, you can call remoteAudioTrack.detach(audioElement) followed by remoteAudioTrack.attach(audioElement).

Please let me know if this works. I will close this issue since it has been fixed in iOS 13.6, but we can continue our discussion here.

Thanks,

Manjesh Malavalli
JSDK Team