I have deployed the zoom video sdk samples on both android and react-web apps.
The video preview on the react-web app is showing in portrait. But the remote side video on the android (Which is sent from react-web version) is showing in landscape.
I would like to see the video in full screen on android device.
How To Reproduce Steps to reproduce the behavior including:
*1. Use the zoom video sdk sample apps on android and react-web app on 2 different phones and be in the same session.
*2. Observe the self video on the react-web version, it is in portait. But the remote side video on the android version is in landscape.
The remote side video on the android app side must be in portrait and in full screen.
Hi Balaji, you can change how the video is rendered on Android modifying the aspect parameter passed to your VideoView. I understand you’d like to crop the landscape video coming from Web to portrait layout on Android. You can use the ZoomVideoSDKVideoAspect_PanAndScan aspect to crop the video to fit your layout.
Here’s a Kotlin snippet:
val videoView: ZoomVideoSDKVideoView = findViewById(R.id.video_view)
There’s a couple ways to render the video, ZoomVideoSDKVideoAspect_PanAndScan crops the video to fit the view, if you’d like to render the video in the portrait view but not zoom in you’ll encounter black borders in your view (letterboxing). To achieve that you can use the ZoomVideoSDKVideoAspect_LetterBox aspect parameter. Alternatively, you can stretch the video to fill the view.
Here’s a quick reference:
Display video without any modifications.
Stretches video to fill the canvas.
For video with a 16:9 aspect ratio shown on a 4:3 screen, black bars will be added to the top & bottom to fit the canvas For video with a 4:3 aspect ratio shown on a 16:9 screen, black bars will be added to the left and right to fit the canvas.
For video with a 16:9 aspect ratio shown on a 4:3 screen, the left & right will be cropped to fit the canvas For video with a 4:3 aspect ratio shown on a 16:9 screen, the top & bottom will be cropped to fit the canvas.
Thanks for your reply… when i used the LetterBox resolution, Here is what i am seeing. There is significant amount of cropping done for the view on android when compared to what the user is able to see in the preview of react-web session.
I am assuming the preview side of the caller must be the exact area shown in the remote side. It is working from android to react-web version perfectly. what i see in the preview on android side is exactly shown on the remote side of react-web. But not vice versa.
If I stretch the video, the aspect ratio will break I believe… Please correct me if I am wrong…
I believe the video captured on the react-web itself is in landscape resolution. Hence it is coming as the landscape video and when it is centre cropped, it is zoomed a lot to fit in full screen…
Can I change the size of the video on the capturing side itself.? on react-web version?
In Video SDK Web the video will be cropped into a 16/9 ratio by default, if you want to use the original ratio, pass the originalRatio when invoking the startVideo method. You can also pass in custom values for captureWidth and captureHeight to set it to a specific resolution.
If i pass ‘originalRatio’ as the parameter, i am seeing the landscape video on android view. Even though if the size of the video depends on the device orientation on react-web side, the device is in portrait orientation only and also the preview on react is being shown in portrait orientation. it is weird to see the same as the landscape video on android side.
@ekaansh.zoom Hello, You mentioned that " In Video SDK Web the video will be cropped into a 16/9 ratio by default" … Can i change it to 9/16? i think that will solve my problem. please confirm where can i change it.
When using the stream.startVideo() method, you can pass the originalRatio option to capture the original aspect ratio.
On the receiving side, if the rendered aspect ratio is different from the original ratio, you will receive a video-aspect-ratio-change event. This event provides the original capture ratio from the sender, allowing you to adjust the rendering style accordingly.
@vic.yang I had tried listening to the event you mentioned. But couldn’t figureout how to do that.
If possible, can you please give me the sender side changes in react-web and receiver side code in android?
Thanks in advance. it will be a great addon to my product if I can achieve this
@vic.yang that would be a great add-on to the sample app. But meanwhile, can you please guide me to fix it in my product? I am about to release my product to the production and this has become a blocker for me. I would be happy to connect on a call to discuss as well. Please feel free to mail me on firstname.lastname@example.org for a faster communication