search

binarykitchen / videomail-client

A wicked npm package to record videos directly in the browser, wohooo!
https://videomail.io
Creative Commons Zero v1.0 Universal
55 stars 19 forks source link

Audio garbled when buffer size is reduced in Chrome #184

Open IanPhilips opened 3 years ago

IanPhilips commented 3 years ago

Hey there,

I tested this out in firefox to get a higher audio quality and it was working fine but having just tried this in Chrome I noticed that the audio is very garbled at any buffer size smaller than 2048. Any ideas on why this might be?

Tested on videomail-client 2.14.5 and 2.14.2 and Chrome v87.0.4280.88

If you visit www.virtualbycfb.com and hit get my assessment, agree & begin, and "company" you'll see the video prompt to try it out. That's at a buffer size of 512 and you can hear the difference in audio quality between Chrome and Firefox.

cheers!

binarykitchen commented 3 years ago

Hey thanks for the great feedback. So are you saying, audio is good on FF but worse on Chrome?

And what buffer size works best on Chrome?

(If you haven't noticed yet, I am Deaf myself and unable to test on your site. Isn't that crazy eh? A Deaf person coding that far with audio stuff, grins. In the past I've asked few hearing friends of mine to test for me but can't always rely on them ...)

IanPhilips commented 3 years ago

Hahaha wow! I thought that might be the case but honestly that is really amazing you coded that up without being able to hear it!! If you need my help in gauging audio quality, don't hesitate to ask.

Yes, in FF smaller buffer sizes (512, 1024) work but in Chrome only a buffer size of 2048 works.

binarykitchen commented 3 years ago

thx mate, yeah crazy eh?

good, i've just npm published v2.15 with that fix. now the bufferSize option also supports auto which will include browser detection. have a look here https://github.com/binarykitchen/videomail-client/commit/3ff27c1432cad4ad3ec1c368e77e1a752ef5bc8f#diff-5d0ae54b5f2645490f8b4c4c8ac28571478316c8f4f1775d313549987bea6cffR24268

can you test and confirm it's better now? can do some fine tuning and include other browsers if you are keen?

IanPhilips commented 3 years ago

Hey, sorry for the very delayed follow up, the holidays have been very busy for me.

This works great on Firefox, fair on Safari (a few audio artifacts), and rather poorly on Chrome (lots of audio artifacts) - worse than the audio on 2.14.5 sounds on Chrome actually. Want me to try it on any other browsers?

binarykitchen commented 3 years ago

@IanPhilips thanks for testing.

This is weird, actually no change was made for Chrome but you say it got worse?

If you look at the commit here https://github.com/binarykitchen/videomail-client/commit/3ff27c1432cad4ad3ec1c368e77e1a752ef5bc8f#diff-5d0ae54b5f2645490f8b4c4c8ac28571478316c8f4f1775d313549987bea6cffR24266

you will see that the audio buffer size for Chrome hasn't changed. Whether it's auto or the default on 2.14.5, it's the same number for both: 2048.

    if (bufferSize === 'auto') {
      if (browser.isFirefox()) {
        bufferSize = 512;
      } else {
        bufferSize = 2048;
      }
    }

It's difficult for me to test and fine tune when I cannot hear. If you still experience differences for Chrome from both versions then this might be something else, e.g. bandwidth issues, a newer Chrome version or anything else random I don't know. We need solid facts here to investigate and fix this properly.

One thing you could help me here is to find the perfect bufferSize for Chrome. Grab the latest version, change the number until it's good. Then try again with a different bandwidth (in Chrome Dev Tool you can switch to 3G speed for example). Then test again if that number still produces the same audio quality or not.

Thanks. Very curious here what you can tell.

IanPhilips commented 3 years ago

OK using source from: https://cdn.rawgit.com/binarykitchen/videomail-client/2.15.0/prototype/js/videomail-client.min.js

Results on Chrome v88.0.4324.96:
Poor Audio quality on any buffer size except 2048 regardless of network throttling - (tried 256, 512,1024, 2048 at online, 4G, and 3G)

Results on Firefox v85.0:
Best audio quality at buffer size 512 with online, 4G, and 3G. The audio quality decreases on Firefox as the buffer size is increased or is set to 256. It looks like 512 is the best spot for Firefox.

Results on Safari Version 14.0 (15610.1.28.1.9, 15610):
No buffer size works on Safari, the audio is always missing.