aws-samples / amazon-ivs-broadcast-web-demo

A demo web application that shows how to implement a browser-based streaming tool with Nextjs and the Amazon IVS Web Broadcast SDK.
https://stream.ivs.rocks
MIT No Attribution
34 stars 10 forks source link

Audio synchronization issues occur when streaming in Full HD on the iPhone #23

Open jonathangoncalves opened 1 year ago

jonathangoncalves commented 1 year ago

I'm experiencing an audio synchronization issue that only occurs in the iPhone browsers (Chrome and Safari). When I'm streaming in Full HD (both BASIC_FULL_HD and STANDARD), the video starts to lag behind. I've tried various modifications, but I can't seem to adjust it.

This issue hasn't been observed on Android, Mac, or Desktop.

slee-aws commented 1 year ago

Hi @jonathangoncalves, sorry to hear you are experiencing this issue. A/V desync can happen due to a number of reasons. To help us reproduce the behavior you are observing, could you provide the following information?

  1. Can you confirm that you are experiencing the issue when using https://stream.ivs.rocks/ ?
  2. On which iPhone models and iOS versions are you experiencing the issue?
  3. Can you confirm that you tested your other devices (Android, Mac, Desktop) on the same network as your iPhone?
  4. When do you observe the audio and video get out of sync? (Does it start immediately after streaming, or does it take some time for the issue to appear?)
jonathangoncalves commented 1 year ago

Hello @slee-aws, thank you for your answer!

  1. First started occurring on my implementation, but after I tested using https://stream.ivs.rocks , I noticed the same behavior.
  2. Currently I'm using the iPhone 13 with iOS 17.0.3
  3. My first test was streaming and watching using the same network, but I just tested streaming using a mobile network (4g and 5g), and the same problem occurred.
  4. Starts synced, but slowly gets out of sync, and about 1 minute later, it gets a 1-second delay.
slee-aws commented 1 year ago

Thank you for the additional information! The A/V desync you are experiencing on iOS appears to be related to an issue the team is currently investigating. While I am not able to provide an ETA for a resolution at this time, I will post updates to this issue thread as they become available.

jonathangoncalves commented 1 year ago

Thank you in advance!

tooming commented 3 weeks ago

Hey, sorry for bringing up an old topic, but my users have the same issue with audio slowly going more and more out of sync. Could you share some insight about this or is there some workaround to mitigate this for the time being?

jonathangoncalves commented 3 weeks ago

Hey, sorry for bringing up an old topic, but my users have the same issue with audio slowly going more and more out of sync. Could you share some insight about this or is there some workaround to mitigate this for the time being?

Hello @tooming, actually I had to change the quality for the stream, I dont remember too much details, but probably I had to use the BASIC instead FULL_HD for make it work properly.

tooming commented 3 weeks ago

I'm using BASIC as well to keep the frame rate as high as possible. But over the course of 2 hours, the delay is massive in the end: https://streamvolley.com/live/15840f

jonathangoncalves commented 3 weeks ago

Which version of web broadcast are you using? Here its on 1.13.0 (https://web-broadcast.live-video.net/1.13.0/amazon-ivs-web-broadcast.js).

Also, idk if it helps, but here's my startLivestream function.

window.client just for reference window.client = window.IVSBroadcastClient.create(config);

Here's the start livestream code: ` async function startLivestream(livestream) { //waits 3 seconds // await new Promise(resolve => setTimeout(resolve, 2000)); // await createClient();

//Replace audio and video variable with the settings modal
videoSelect = document.querySelector('select#ls-video-source2');
audioSelect = document.querySelector('select#ls-audio-source2');
videoSelect.addEventListener("change", handleVideoDeviceSelect, true);
audioSelect.addEventListener("change", handleAudioDeviceSelect, true);

await window.client.getAudioContext().resume(); //I added this line when tried to improve
await window.client.startBroadcast(livestream.settings.rtmp_key, livestream.settings.rtmp_url);
await lockWakeState();
window.chatInstance = new Chat(document.getElementById('livestream-input-message'));
window.chatInstance.startChat(livestream.settings.channel_name);

} `

Take attention to this line below, I hope it helps

await window.client.getAudioContext().resume();

tooming commented 3 weeks ago

Thanks, I had version 1.9.0, will try 1.13.0 soon. Also added this line just in case:

await window.client.getAudioContext().resume(); //I added this line when tried to improve