When calling getUserMedia() while playing audio via WebAudio on iPhone/iOS-14.5.1, the getUserMedia audio stream sent to the remote client is choppy, with roughly a blank tone every second. If you add a <audio> element playing silent audio, you get faster choppiness, around 4-5 times per seconds. The mix WebRTC + WebAudio is deadly on iOS, makes Safari browser unusable. The exact same code works perfectly on Chrome, Firefox, and Safari Mac.
@Eric, https://jsfiddle.net/1degwL50/ is working for me. Can you provide a repro case?
<rdar://problem/78143825>
(In reply to youenn fablet from comment #1) > @Eric, https://jsfiddle.net/1degwL50/ is working for me. > Can you provide a repro case? Sure Youenn, will do!
Hello @Youenn, I forked the script from Justin Uberti (thanks!) to get a repro case: https://jsfiddle.net/ericamram/afhzbcu2/48/ When you click the play button in Safari on iPhone (mine is 11, with iOS 14.5.1), with wired earphones to make sure nothing interferes, you will hear your own voice choppy. Tell me if I can do anything else to help.
Note: if you just comment out line 41 within https://jsfiddle.net/ericamram/afhzbcu2/48/ // createConnection(dest.stream, audioElem); your voice (from getUserMedia) will sound perfect, which shows that it's the combo WebAudio + WebRTC that generates stuttering.
Note (2): this repro case also breaks on Safari Mac, not specific to iOS (but it works fine on Chrome & Firefox)
While developing a WebRTC application, I have consistent issues with WebRTC Audio (Opus), on my iPhone X Safari (running 14.5.1, but been happening for some time before that upgrade ). It seems tied to CPU usage on the phone. I've tried every number of ways to get it to work, but get stuttering. Once it starts stuttering, it either stays the same or gets worse as time goes on. Sometimes refreshing the tab also does nothing, but opening a new tab may fix it for a little bit. For what it's worth, it's not all audio in the AudioContext. Mp3 files loaded in the context play fine, even while the audio stutters in WebRTC. I've tried both the <audio> element and new Audio() for passing the MediaStream but both end up the same way.
I tried on BigSur MacOS iMac, as well as iPhone 12 and iPhone XS without being able to reproduce it on 14.5.1. I guess there is something else that increases the chances to get stuttering.
Maybe wired earphones?
It seems very similar to https://bugs.webkit.org/show_bug.cgi?id=224874 although the repro steps seem different.
Marking as duplicate since this is likely the same underlying issue. Let's continue investigation over there. *** This bug has been marked as a duplicate of bug 224874 ***
Created attachment 429268 [details] Stutter example, with a simple "la la la" voice, using jsfiddle repro case, on iPhone 11, Safari, iOS 14.5.1
Thanks Youenn. I tried a variant https://jsfiddle.net/ericamram/afhzbcu2/52 where I disabled autoGainControl, echo & noise suppression, and made sure sampleRate was 48000. Same result. I have uploaded an example of audio result above. Observations: -- not related to wired earphones, as I tested with another pair (same result); I did the recording by capturing my voice using the iPhone mic and outputting the audio via audio cable to a Mac -- stuttering varies over time during the tests. Sometimes it occurs on Safari Mac as well, sometimes barely noticeable. I didn't find a consistent pattern.
Interesting fact: when I kill Safari and then launch the repro case, it WORKS the very first time, no stuttering! But if I reload the jsfiddle page (with Safari reload button) and launch the test again, it fails (stutter). Same for all subsequent tests. I have repeated this pattern ~ 5 times and it looks systematic. The very first test on a fresh Safari works fine, next tests won't.