Participants not able to hear iOS Safari user's audio

[satyen95]

Version Info: iOS: 14.7.1 twilio-video: 2.16.0

Bug Info: I'm still facing issue with localAudiotrack only on iOS Safari user audio is not audible to others from the start itself (Video is visible to all) and muting unmuting doesn’t help either.. have already tried pause and play audioTrack but doesn't help. Sometimes when I lock my phone for a few mins & unlock it asks for microphone permission again and after that it works but while joining the call it had already asked for camera & microphone permission so the microphone permission popup on unlock should not happen Also autoplay policy is adhered as joining happen on button click Originally posted by @satyen95 in https://github.com/twilio/twilio-video.js/issues/941#issuecomment-895131561

Logs: twilio-iOS-logs.txt

Affected system: iOS Safari

Tried alternatives: Manually providing the localTracks Pausing & Playing localAudioTrack on muting(disable) & unmuting(enable)

Working properly for: Mac Safari & other browsers Windows Android browsers

[cindyloo]

I have found that creating more than one AudioContext with Twilio causes severe audio problems in iOS.

Also, if I use the default audio connection when setting up a room, it is usually not static-y between two different people, but IS if you create a room between yourself on the desktop and yourself on your iphone

[manjeshbhargav]

Hi @satyen95 ,

Thanks for writing in with your issue. A quick look at the logs did not reveal anything problematic. Is your app hosted somewhere where I can try it on my iOS device?

Thanks,

Manjesh

[satyen95]

Hi @manjeshbhargav

Yes we have hosted the app. You can connect here: https://fynd.hostx0.de/video-room/610d57835faef9c8378c7e6b Although you will need to be permitted to join the video-call, please mail me at [email protected] when joining i'll let you in to join.

[cindyloo]

we have also found the connection between a Windows NT.10.0 with Chrome 93.0.4577.63 to an iPhone 14.7.1 to be extremely static-y/inaudible and echo-prone on speakerphone, unless the iphone user is wearing headphones. I have instantiated the audio ref as suggested in the docs, and it just started happening with 14.7.1. "twilio": "^3.49.1", "twilio-video": "^2.15.3",

You can experience this for yourself at bongofocus.com. Create an account here: https://bongofocus.com/?campaign_id=d36dc8c6-fdf5-441a-8e82-c583236db447&user_info=&invited=undefined

and invite yourself or another person via text or email to the session. you will hear the static once both users have joined the session

[cindyloo]

here is the code in which I attach the audioTrack:

const audioEl = useRef<HTMLAudioElement>(); // try to address issue with iphone

 /* attach to the mode wrapper so that the element disappears after each mode finishes */
  function attachUnmaskedAudio(at, lor) {
    const videoEle = uniqueName.replace("Audio", "Video");
    const modeSection = document.querySelector(`#${videoEle}`).parentElement;
    const audioDiv = document.createElement("div");
    //div to attach to
    modeSection
      .appendChild(audioDiv)
      .setAttribute("id", `audio_divUnMasked${uniqueName}`);

    // solve for echo
    at.mediaStreamTrack.applyConstraints({
      echoCancellation: true,
      noiseSuppression: true,
    });

    audioEl.current = at.attach();
    // append attached source track
    document
      .getElementById(`audio_divUnMasked${uniqueName}`)
      .appendChild(audioEl.current)
      .setAttribute("id", `audioUnMasked${lor}${uniqueName}`);

    // if remote or local on campaign page
    if (!isLocal) {
      audioEl.current.muted = false;
      audioEl.current.volume = 0.5;
    } else if (uniqueName.indexOf("campaign") > -1) {
      audioEl.current.muted = false;
      audioEl.current.volume = 0.00005; // a tiny bit of feedback to help confirm audio connection
    } else {
      audioEl.current.muted = true;
      audioEl.current.volume = 0;
    }
  }

and in terms of releasing the audioTrack:

return () => {

        const audioT = document.querySelectorAll("audio");
        Array.from(audioT)
          .filter((v) => v.id.toLowerCase().indexOf("session") === -1)
          .forEach((el) => {
            if (
              el.id.indexOf("campaign") > -1 || // this one has the echo in it
              (mode == "lobby" && el.id.indexOf("campaign") > -1) ||
              (mode == "session" &&
                el.id.indexOf("lobby") > -1 &&
                !isWindowsOldChrome) // don't address the Windows chrome issue below
            ) {
              el.remove();

              // This addresses a Chrome issue where the number of WebMediaPlayers is limited.
              // See: https://github.com/twilio/twilio-video.js/issues/1528
              el.srcObject = null;
            }
          });
      };
    }

[satyen95]

@manjeshbhargav

Are there any updates on the issue?

[cindyloo]

also need to know updates, please @manjeshbhargav

[cindyloo]

@anna-vasilko

[cindyloo]

update - looks like an Apple WebKit issue for the static anyway: https://bugs.webkit.org/show_bug.cgi?id=227199

[jzombie]

I've experienced the issue where streams aren't starting w/ Safari 15x (both Mac and iOS), and discovered that it seems to fix itself (in my project, at least) if stopping the outgoing stream (per audio / video kind), then restarting the stream (i.e. making a new gUM [getUserMedia] call).

The "restart" method I just mentioned seems to also work if choosing an entirely different capture device, of the same audio / video kind, on the second attempt. i.e. first microphone capture fails for one device, starting another device works.

Even stranger, for me, is my project is based in React, and I've worked around this w/o doing the restart method in development mode, but in production, it is persistent, and for the life of me I can't figure out what's changed.