search

AgoraIO-Extensions / Agora-Flutter-SDK

Flutter plugin of Agora RTC SDK for Android/iOS/macOS/Windows
https://pub.dev/packages/agora_rtc_engine
MIT License
743 stars 385 forks source link

Agora video view cutting off in mobile screen #1152

Open devsideal opened 1 year ago

devsideal commented 1 year ago

What I want I need to create full-screen live streaming on mobile.

What I’m doing Using AgoraVideoView (without any resizing/modification) as given in the doc or sample.

What is the issue: When I stream from mobile its preview is cutting off from left-right, while on the web (as Audience) its showing correct.

Steps To Reproduce We can reproduce the same issue with the given example too: https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/main/example/lib/examples/basic/join_channel_video/join_channel_video.dart 1- Clone the Agora-Flutter-SDK 2- Do the little changes in UI to make it full screen:
 2.1- In main.dart Remove the appBar from Scaffold under the ListTile
 2.2- In example_actions_widget.dart Remove the bottom padding from Container 3- Run the code and go to JoinChannelVideo screen 4- Join the channel as Host 5- Open the web-demo and join same channel as Audience 6- Then you will see the Video preview difference as below screen shots:

Expected behavior The preview should be the same on both ends Mobile (as a host) and Web (as an audience) without any cut-off.

Screenshots

Mobile (as a Host)

Screenshot_20230615_180344

Web (as an Audience)

Screenshot 2023-06-15 at 6 03 26 PM
littleGnAl commented 1 year ago

Can you check our example to see if it works or not? https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/main/example/lib/examples/advanced/screen_sharing/screen_sharing.dart

devsideal commented 1 year ago

@littleGnAl My issue is about Live streaming not with screen sharing, and I'm able to reproduce this with the below example also, please see STR, https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/main/example/lib/examples/basic/join_channel_video/join_channel_video.dart

However, I checked the screen-sharing example too, and the shared screen is showing well without cutt off.

littleGnAl commented 1 year ago

It is most likely the web demo set the render mode type, you can set the https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/blob/80c9e52b7032b8224d2753c97acaaa3e54389161/lib/src/agora_base.dart#L4319 in the example to see if it meet your need.

devsideal commented 1 year ago

Yes, I check there are two types of render modes: RenderModeType.renderModeFit : Using this preview not shows on full screen of mobile. RenderModeType.renderModeHidden : Using this preview is cutting off from left-right.

littleGnAl commented 1 year ago

So I think the RenderModeType.renderModeFit is what you need.

devsideal commented 1 year ago

No, renderModeFit is not showing the preview on full screen in mobile, I need something that can make the preview according to the device camera, I found there is one more mode renderModeAdaptive maybe this is that I want, I need to check this, But this is Deprecated.