aws-samples / amazon-ivs-broadcast-web-demo Goto Github PK

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.

Having issues adapting this for mobile, specifically devices with aspect ratios greater than 1 that record in portrait. The results I want is a full screen portrait preview that works on iOS. Any examples or guidance will help!

const renderActiveVideoDevice = (overrideDeviceId?: string) => {
		const canvas = IVSClient.current.getCanvasDimensions();
		const layer = {
			device:
				overrideDeviceId ||
				selectedVideoDevice ||
				videoDevices[0]?.deviceId,
			name: CAM_LAYER_NAME,
			index: 4,
			visible: !camMuted,
			x: 0,
			y: 0,
			width: canvas.width / window.devicePixelRatio,
			height: canvas.height / window.devicePixelRatio,
			type: 'VIDEO'
		};

		addLayer(layer, IVSClient.current);
	};

Hello,
We want to use the IVS service in a mobile application that includes a webview, but we’re encountering some issues. Before diving into those, let’s provide some brief information:

• We are broadcasting from a React app within a WebView on both iOS and Android platforms, using the IVS Web Broadcast Client v1.5.2. We play the broadcast on both platforms by playing the associated .m3u8 file.
  Here are the problems we are facing:

1. On the Android platform, we are getting different responses for different streamConfig settings.
   a. streamConfig->maxResolution -> We set width and height as 412*880, which we get from window.innerWidth and window.innerHeight,
   b. streamConfig->maxFramerate -> 30
   c. streamConfig->maxBitrate -> With resolution and FPS being constant; we have tried this with many values ranging from 1000 to 8500.

• In the above case, the broadcast doesn’t start at all. A session is created under the channel in IVS, but it cannot switch to LIVE status because;
  • According to IVS, video bitrate appears as 0 kbps, FPS is 0. Audio bitrate varies between 0-20kbps.
  • 11 seconds after reaching “Session Created” status, it enters the “Starvation Start” status.
• In this case, we tried many different values for maxResolution; the broadcast starts and flows smoothly with some, but the above situation occurs in others.
• Additionally, we couldn’t find a pattern among these values. Some examples are;
  • 720x1440 -> OK
  • 720x1350 -> FAIL
  • 600x1280 -> OK
  • 599x1280 -> FAIL
  • 720x1340 -> OK
• We conducted similar tests using a pure JS proof-of-concept (POC) on 6 different Android devices from various brands, such as Samsung, Xiaomi, and Oppo. Interestingly, some resolutions that generally fail were able to broadcast for a short duration (30-40 seconds) before entering “Starvation” status and dropping to 0 kbps bitrate. This was observed on a high-end Xiaomi Mi 12 Pro and a lower-end Samsung A33.

2. When watching the broadcast, the iOS platform always receives the broadcast with a delay of 5 to 10 seconds compared to the Android platform.
3. There is an audio-visual synchronization issue in the broadcast; we experienced an audio-visual lag problem as soon as the broadcast started on iPhone 11, with the following streamConfig settings:
   a. maxResolution -> 720x1280
   b. maxFramerate -> 30
   c. maxBitrate -> 2000

We need to find solutions for these problems as soon as possible and we would be very happy if you could help us.

Error: Could not add the selected audio and video devices to the canvas. Please check the app settings to ensure that the correct webcam and microphone are selected.

this error show after deployment on aws ec2 Linux server please help to fix it.

I try to run npm install on the branch. However, I got

-> npm install
npm WARN deprecated [email protected]: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/next/-/next-13.5.0.tgz - Not found
npm ERR! 404
npm ERR! 404 'next@https://registry.npmjs.org/next/-/next-13.5.0.tgz' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/xxxxxxxx/.npm/_logs/2023-12-23T00_33_41_701Z-debug-0.log

Any comment?

Thanks

copy from .npm/_logs/2023-12-23T00_33_41_701Z-debug-0.log

more .npm/_logs/2023-12-23T00_33_41_701Z-debug-0.log
0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 0ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 0ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/Users/manwan/Downloads/tmp/amazon-ivs-broadcast-web-demo/.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms