CINXE.COM
Change video orientation on react-web and android sdk - Video SDK - Zoom Developer Forum
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change video orientation on react-web and android sdk - Video SDK - Zoom Developer Forum</title> <meta name="description" content="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 versio&hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version 5bf5d1335680f28a8eb65c488353be9585eed08e"> <link rel="icon" type="image/png" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/8/e/8e200b9a0e198d5026b7eec59f78fbe49aad5979_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/0/4/0402829dd7b18703d3c1c9533b17dc40e609a55e_2_180x180.png"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111111"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056" /> <link rel="search" type="application/opensearchdescription+xml" href="https://devforum.zoom.us/opensearch.xml" title="Zoom Developer Forum Search"> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/color_definitions_zm-colors_3_12_d6c47ad4b6cb76d327c2ab9616b5b797a9ca2db0.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" class="light-scheme"/><link href="https://sea2.discourse-cdn.com/flex016/stylesheets/color_definitions_dark_1_12_4a7cfa9eec7d23fa97ca76d045ff83385609a358.css?__ws=devforum.zoom.us" media="(prefers-color-scheme: dark)" rel="stylesheet" class="dark-scheme"/> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/desktop_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/checklist_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-adplugin_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-adplugin" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-ai_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-akismet_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-assign_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-assign" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-cakeday_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-data-explorer_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-details_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-lazy-videos_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-local-dates_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-narrative-bot_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-policy_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-policy" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-presence_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-solved_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-templates_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-topic-voting_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-topic-voting" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/footnote_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/hosted-site_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/poll_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="poll" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/spoiler-alert_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-ai_desktop_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/discourse-topic-voting_desktop_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="discourse-topic-voting_desktop" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/poll_desktop_ce13db9ae86f60b413f85f5115cb1eb40aa9f39b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/desktop_theme_22_aedc9c72a9ebc70c1032842fdd89d5f82f100f4b.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="22" data-theme-name="dark-light toggle"/> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/desktop_theme_23_2a8a90be12ebc939afc96547572784fc22807762.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="23" data-theme-name="search banner"/> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/desktop_theme_24_2c13ebbf0da9b91dd6ecf7ac6159a989408e1dc2.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="24" data-theme-name="versatile banner"/> <link href="https://sea2.discourse-cdn.com/flex016/stylesheets/desktop_theme_12_5d81aac487cf55714f5e1501be964567927ae74d.css?__ws=devforum.zoom.us" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="12" data-theme-name="zoom-dev-forum"/> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Change video orientation on react-web and android sdk'" href="https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056.rss" /> <meta property="og:site_name" content="Zoom Developer Forum" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/6/4605983ae0a4da639bac92f04c5dece44b83fe36.png" /> <meta property="og:image" content="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/6/4605983ae0a4da639bac92f04c5dece44b83fe36.png" /> <meta property="og:url" content="https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056" /> <meta name="twitter:url" content="https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056" /> <meta property="og:title" content="Change video orientation on react-web and android sdk" /> <meta name="twitter:title" content="Change video orientation on react-web and android sdk" /> <meta property="og:description" content="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. O..." /> <meta name="twitter:description" content="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. O..." /> <meta property="og:article:section" content="Video SDK" /> <meta property="og:article:section:color" content="0088CC" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="4 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="6 ❤" /> <meta property="article:published_time" content="2024-01-02T15:54:54+00:00" /> <meta property="og:ignore_canonical" content="true" /> <link rel="next" href="/t/change-video-orientation-on-react-web-and-android-sdk/101056?page=2"> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Change video orientation on react-web and android sdk","mainEntity":{"@type":"Question","name":"Change video orientation on react-web and android sdk","text":"I have deployed the zoom video sdk samples on both android and react-web apps.\n\nThe 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.\n\nI would like to see the video in full screen on and…","upvoteCount":1,"answerCount":1,"datePublished":"2024-01-02T15:54:54.799Z","author":{"@type":"Person","name":"balajisunku","url":"https://devforum.zoom.us/u/balajisunku"},"acceptedAnswer":{"@type":"Answer","text":"Hey <a class=\"mention\" href=\"/u/balajisunku\">@balajisunku<\/a>\n\nSorry for late reply.\n\nHere is a simple example I wrote based on your scenario:\n\n/**\n\n* On Android browser, sending the video\n\n*/\n\n// Start video. Starting from 1.10.5, you no longer need to worry about whether to pass the videoElement\n\nawait stream.startVideo({ originalRatio: true …","upvoteCount":0,"datePublished":"2024-02-19T02:59:24.471Z","url":"https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056/19","author":{"@type":"Person","name":"vic.yang","url":"https://devforum.zoom.us/u/vic.yang"}}}}</script> </head> <body class="crawler browser-update"> <header> <a href="/"> Zoom Developer Forum </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/change-video-orientation-on-react-web-and-android-sdk/101056">Change video orientation on react-web and android sdk</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/video-sdk/55" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Video SDK</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Change video orientation on react-web and android sdk'> <link itemprop='url' href='https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056'> <meta itemprop='datePublished' content='2024-01-02T15:54:54Z'> <meta itemprop='articleSection' content='Video SDK'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Zoom Video Communications, Inc.'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/3/43ef015449c0e78580a4cedc611827e0d5a5b31a.png'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <link itemprop="mainEntityOfPage" href="https://devforum.zoom.us/t/change-video-orientation-on-react-web-and-android-sdk/101056"> <span class="crawler-post-infos"> <time datetime='2024-01-02T15:54:54Z' class='post-time'> January 2, 2024, 3:54pm </time> <meta itemprop='dateModified' content='2024-01-02T15:54:54Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>I have deployed the zoom video sdk samples on both android and react-web apps.</p> <p>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.</p> <p>I would like to see the video in full screen on android device.</p> <p><strong>How To Reproduce</strong><br> <em>Steps to reproduce the behavior including:</em><br> *1. Use the zoom video sdk sample apps on android and react-web app on 2 different phones and be in the same session.<br> *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.</p> <p>Expected Result:<br> The remote side video on the android app side must be in portrait and in full screen.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://devforum.zoom.us/t/set-video-orientation-from-react-web-app/100980/2">Set video orientation from react-web app</a> <meta itemprop='position' content='1'> </div> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/ekaansh.zoom'><span itemprop='name'>ekaansh.zoom</span></a> (Ekaansh) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-03T12:07:47Z' class='post-time'> January 3, 2024, 12:07pm </time> <meta itemprop='dateModified' content='2024-01-03T12:07:47Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>Hi Balaji, you can change how the video is rendered on Android modifying the <code>aspect</code> parameter passed to your <code>VideoView</code>. I understand you’d like to crop the landscape video coming from Web to portrait layout on Android. You can use the <code>ZoomVideoSDKVideoAspect_PanAndScan</code> aspect to crop the video to fit your layout.</p> <p>Here’s a Kotlin snippet:</p> <pre data-code-wrap="kt"><code class="lang-kt">val videoView: ZoomVideoSDKVideoView = findViewById(R.id.video_view) canvas.subscribe(videoView, ZoomVideoSDKVideoAspect.ZoomVideoSDKVideoAspect_PanAndScan) </code></pre> <p>Let me know if that answers your question. <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <link itemprop="image" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c.jpeg"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-03T17:36:18Z' class='post-time'> January 3, 2024, 5:36pm </time> <meta itemprop='dateModified' content='2024-01-03T17:36:18Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote group-Zoom_Staff" data-username="ekaansh.zoom" data-post="2" data-topic="101056"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/48/55004_2.png" class="avatar"> Ekaansh:</div> <blockquote> <p><code>ZoomVideoSDKVideoAspect_PanAndScan</code></p> </blockquote> </aside> <p>First of all, thanks for the response and wish you a happy new year.</p> <p>I tried the solution you mentioned. and it is showing a much more zoomed version of the video on android side compared to the preview shown on the react version. Attaching the screenshots.</p> <p>The above one is from react-web version. Please check the preview version of it.</p> <p>The below one is from Android where the remote side view is zoomed significantly around 5x.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c.jpeg" data-download-href="/uploads/short-url/9olrzRZD0rto3yhu0FNRyQQn01S.jpeg?dl=1" title="WhatsApp (3)" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c_2_230x500.jpeg" alt="WhatsApp (3)" data-base62-sha1="9olrzRZD0rto3yhu0FNRyQQn01S" width="230" height="500" srcset="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c_2_230x500.jpeg, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c_2_345x750.jpeg 1.5x, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/1/41d4180e7558587ff22223b5fce9e49ee4118e7c_2_460x1000.jpeg 2x" data-dominant-color="202020"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">WhatsApp (3)</span><span class="informations">738×1600 30.4 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br> <div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77.jpeg" data-download-href="/uploads/short-url/a63EUkDava4tnaHF22XsvGgT9PN.jpeg?dl=1" title="WhatsApp Image Jan 3" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77_2_223x500.jpeg" alt="WhatsApp Image Jan 3" data-base62-sha1="a63EUkDava4tnaHF22XsvGgT9PN" width="223" height="500" srcset="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77_2_223x500.jpeg, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77_2_334x750.jpeg 1.5x, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/6/46c513dfdacc6d00db91cefcb99bf7dd1606eb77_2_446x1000.jpeg 2x" data-dominant-color="5D5C5F"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">WhatsApp Image Jan 3</span><span class="informations">716×1600 49.4 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/ekaansh.zoom'><span itemprop='name'>ekaansh.zoom</span></a> (Ekaansh) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-04T11:12:47Z' class='post-time'> January 4, 2024, 11:12am </time> <meta itemprop='dateModified' content='2024-01-04T11:12:47Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <p>Happy new year!</p> <p>There’s a couple ways to render the video, <code>ZoomVideoSDKVideoAspect_PanAndScan</code> 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 <code>ZoomVideoSDKVideoAspect_LetterBox</code> aspect parameter. Alternatively, you can stretch the video to fill the view.</p> <p>Here’s a quick reference:</p> <div class="md-table"> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>ZoomVideoSDKVideoAspect_Original</code></td> <td>Display video without any modifications.</td> </tr> <tr> <td><code>ZoomVideoSDKVideoAspect_Full_Filled</code></td> <td>Stretches video to fill the canvas.</td> </tr> <tr> <td><code>ZoomVideoSDKVideoAspect_LetterBox</code></td> <td>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.</td> </tr> <tr> <td><code>ZoomVideoSDKVideoAspect_PanAndScan</code></td> <td>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.</td> </tr> </tbody> </table> </div><p>You can read more in the <a href="https://developers.zoom.us/docs/video-sdk/android/video/#create-a-video-view">docs</a>.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_5' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <link itemprop="image" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238.jpeg"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-07T13:05:15Z' class='post-time'> January 7, 2024, 1:05pm </time> <meta itemprop='dateModified' content='2024-01-07T13:05:15Z'> <span itemprop='position'>5</span> </span> </div> <div class='post' itemprop='text'> <p>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.<br> 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.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238.jpeg" data-download-href="/uploads/short-url/kIrmfSuMhAIejh8IoEvhKdGONsY.jpeg?dl=1" title="Chrome" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238_2_230x500.jpeg" alt="Chrome" data-base62-sha1="kIrmfSuMhAIejh8IoEvhKdGONsY" width="230" height="500" srcset="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238_2_230x500.jpeg, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238_2_345x750.jpeg 1.5x, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/9/1/913188a97beb837e86fd2e8c246f3d593f7b3238_2_460x1000.jpeg 2x" data-dominant-color="7E7D7D"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Chrome</span><span class="informations">1080×2340 130 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br> <div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427.jpeg" data-download-href="/uploads/short-url/nwQYKVhPu5uhdoJMV66WRSUoRW7.jpeg?dl=1" title="No subject Jan 7 Screenshot from balaji" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_223x500.jpeg" alt="No subject Jan 7 Screenshot from balaji" data-base62-sha1="nwQYKVhPu5uhdoJMV66WRSUoRW7" width="223" height="500" srcset="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_223x500.jpeg, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_334x750.jpeg 1.5x, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_446x1000.jpeg 2x" data-dominant-color="302F2F"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">No subject Jan 7 Screenshot from balaji</span><span class="informations">1080×2412 109 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_6' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-08T08:23:09Z' class='post-time'> January 8, 2024, 8:23am </time> <meta itemprop='dateModified' content='2024-01-08T08:23:09Z'> <span itemprop='position'>6</span> </span> </div> <div class='post' itemprop='text'> <p>If I stretch the video, the aspect ratio will break I believe… Please correct me if I am wrong…<br> 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…<br> Can I change the size of the video on the capturing side itself.? on react-web version?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_7' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-10T13:41:27Z' class='post-time'> January 10, 2024, 1:41pm </time> <meta itemprop='dateModified' content='2024-01-10T13:41:27Z'> <span itemprop='position'>7</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/ekaansh.zoom">@ekaansh.zoom</a>. Gentle reminder on the queries i added.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_8' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/ekaansh.zoom'><span itemprop='name'>ekaansh.zoom</span></a> (Ekaansh) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-11T14:40:57Z' class='post-time'> January 11, 2024, 2:40pm </time> <meta itemprop='dateModified' content='2024-01-11T14:40:57Z'> <span itemprop='position'>8</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="balajisunku" data-post="6" data-topic="101056" data-full="true"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/balajisunku/48/53380_2.png" class="avatar"> Balaji:</div> <blockquote> <p>If I stretch the video, the aspect ratio will break I believe… Please correct me if I am wrong…<br> 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…<br> Can I change the size of the video on the capturing side itself.? on react-web version?</p> </blockquote> </aside> <p>In Video SDK <strong>Web</strong> the video will be cropped into a 16/9 ratio by default, if you want to use the original ratio, pass the <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#originalRatio"><code>originalRatio</code></a> when invoking the <code>startVideo</code> method. You can also pass in custom values for <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureWidth">captureWidth</a> and <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureHeight">captureHeight</a> to set it to a specific resolution.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_9' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-14T18:15:30Z' class='post-time'> January 14, 2024, 6:15pm </time> <meta itemprop='dateModified' content='2024-01-14T18:15:30Z'> <span itemprop='position'>9</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote group-Zoom_Staff" data-username="ekaansh.zoom" data-post="8" data-topic="101056"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/48/55004_2.png" class="avatar"> Ekaansh:</div> <blockquote> <p><a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#originalRatio" rel="noopener nofollow ugc"><code>originalRatio</code></a></p> </blockquote> </aside> <p>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.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_10' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-16T07:00:47Z' class='post-time'> January 16, 2024, 7:00am </time> <meta itemprop='dateModified' content='2024-01-16T07:00:47Z'> <span itemprop='position'>10</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote group-Zoom_Staff" data-username="ekaansh.zoom" data-post="8" data-topic="101056"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/48/55004_2.png" class="avatar"> Ekaansh:</div> <blockquote> <p>In Video SDK <strong>Web</strong> the video will be cropped into a 16/9 ratio by default</p> </blockquote> </aside> <p><a class="mention" href="/u/ekaansh.zoom">@ekaansh.zoom</a> Hello, You mentioned that " In Video SDK <strong>Web</strong> 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.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_11' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/ekaansh.zoom'><span itemprop='name'>ekaansh.zoom</span></a> (Ekaansh) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-16T08:19:19Z' class='post-time'> January 16, 2024, 8:19am </time> <meta itemprop='dateModified' content='2024-01-16T08:19:19Z'> <span itemprop='position'>11</span> </span> </div> <div class='post' itemprop='text'> <blockquote> <p>You can also pass in custom values for <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureWidth">captureWidth</a> and <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html#captureHeight">captureHeight</a> to set it to a specific resolution.</p> </blockquote> <p>Like I mentioned you can call <code>startVideo</code> with capture parameters with custom values, for example to capture vertical 480p video:</p> <pre data-code-wrap="js"><code class="lang-js">await mediaStream.startVideo({ captureHeight: 640, captureWidth: 480 }); </code></pre> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_12' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/vic.yang'><span itemprop='name'>vic.yang</span></a> (Vic) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-17T02:56:36Z' class='post-time'> January 17, 2024, 2:56am </time> <meta itemprop='dateModified' content='2024-01-17T02:56:36Z'> <span itemprop='position'>12</span> </span> </div> <div class='post' itemprop='text'> <p>Hey <a class="mention" href="/u/balajisunku">@balajisunku</a></p> <p>When using the <code>stream.startVideo()</code> method, you can pass the <code>originalRatio</code> option to capture the original aspect ratio.</p> <p>On the receiving side, if the rendered aspect ratio is different from the original ratio, you will receive a <code>video-aspect-ratio-change</code> event. This event provides the original capture ratio from the sender, allowing you to adjust the rendering style accordingly.</p> <aside class="onebox allowlistedgeneric" data-onebox-src="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html"> <header class="source"> <a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html" target="_blank" rel="noopener">marketplacefront.zoom.us</a> </header> <article class="onebox-body"> <h3><a href="https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html" target="_blank" rel="noopener">CaptureVideoOption | Zoom Video SDK for Web - 1.10.5</a></h3> <p>Documentation for Zoom Video SDK for Web - 1.10.5</p> </article> <div class="onebox-metadata"> </div> <div style="clear: both"></div> </aside> <aside class="onebox allowlistedgeneric" data-onebox-src="https://marketplacefront.zoom.us/sdk/custom/web/modules.html#event_video_aspect_ratio_change"> <header class="source"> <a href="https://marketplacefront.zoom.us/sdk/custom/web/modules.html#event_video_aspect_ratio_change" target="_blank" rel="noopener">marketplacefront.zoom.us</a> </header> <article class="onebox-body"> <h3><a href="https://marketplacefront.zoom.us/sdk/custom/web/modules.html#event_video_aspect_ratio_change" target="_blank" rel="noopener">Zoom Video SDK for Web - 1.10.5</a></h3> <p>Documentation for Zoom Video SDK for Web - 1.10.5</p> </article> <div class="onebox-metadata"> </div> <div style="clear: both"></div> </aside> <p>Thanks<br> Vic</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_13' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-23T12:54:35Z' class='post-time'> January 23, 2024, 12:54pm </time> <meta itemprop='dateModified' content='2024-01-23T12:54:35Z'> <span itemprop='position'>13</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/vic.yang">@vic.yang</a> … thank you so much for your response.</p> <p>I am changing my code from</p> <p>await mediaStream?.startVideo({ videoElement });<br> const startVideoOptions = { hd: true, ptz: mediaStream?.isBrowserSupportPTZ() };</p> <p>To</p> <p>await mediaStream?.startVideo({ videoElement, captureWidth: 360, captureHeight: 640 });<br> const startVideoOptions = { hd: true, ptz: mediaStream?.isBrowserSupportPTZ(), captureWidth: 360, captureHeight: 640 };</p> <p>Where i reversed the resolution from 640x360 which is default to 360x640…</p> <p>Still i am seeing the remote side video in landscape mode as shown in the above screenshots.</p> <p>Since i am hardcoding these to single values, I believe i need not to handle the change in resolution event… am i correct?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_14' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/vic.yang'><span itemprop='name'>vic.yang</span></a> (Vic) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-24T02:06:17Z' class='post-time'> January 24, 2024, 2:06am </time> <meta itemprop='dateModified' content='2024-01-24T02:06:17Z'> <span itemprop='position'>14</span> </span> </div> <div class='post' itemprop='text'> <p>Hey <a class="mention" href="/u/balajisunku">@balajisunku</a></p> <p>Have you tried the <code>originalRatio</code> option when calling the <code>stream.startVideo</code> method? And have you listened to the <code>video-aspect-ratio-change</code> event on the rendering side?</p> <p>Thanks<br> Vic</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_15' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-02-11T17:34:41Z' class='post-time'> February 11, 2024, 5:34pm </time> <meta itemprop='dateModified' content='2024-02-11T17:34:41Z'> <span itemprop='position'>15</span> </span> </div> <div class='post' itemprop='text'> <p><a class="mention" href="/u/vic.yang">@vic.yang</a> I had tried listening to the event you mentioned. But couldn’t figureout how to do that.<br> If possible, can you please give me the sender side changes in react-web and receiver side code in android?<br> Thanks in advance. it will be a great addon to my product if I can achieve this <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_16' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-02-12T13:03:53Z' class='post-time'> February 12, 2024, 1:03pm </time> <meta itemprop='dateModified' content='2024-02-12T13:03:53Z'> <span itemprop='position'>16</span> </span> </div> <div class='post' itemprop='text'> <p><a class="mention" href="/u/ekaansh.zoom">@ekaansh.zoom</a> <a class="mention" href="/u/vic.yang">@vic.yang</a> I am getting emails from other developers also who are waiting for the same resolution. The help from you resolves the problem for many products <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> Please help</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_17' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/vic.yang'><span itemprop='name'>vic.yang</span></a> (Vic) </span> <link itemprop="image" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/b/4bb0edfaeede341331818d227ddecc27a2ca6b81.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-02-15T05:44:29Z' class='post-time'> February 15, 2024, 5:44am </time> <meta itemprop='dateModified' content='2024-02-15T05:44:29Z'> <span itemprop='position'>17</span> </span> </div> <div class='post' itemprop='text'> <p>Hey <a class="mention" href="/u/balajisunku">@balajisunku</a></p> <p>We will soon update this usage method on the sample app on GitHub.</p> <aside class="onebox allowlistedgeneric" data-onebox-src="https://github.com/zoom/videosdk-web-sample/"> <header class="source"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="site-icon" width="32" height="32"> <a href="https://github.com/zoom/videosdk-web-sample/" target="_blank" rel="noopener">GitHub</a> </header> <article class="onebox-body"> <div class="aspect-image" style="--aspect-ratio:690/344;"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/4/b/4bb0edfaeede341331818d227ddecc27a2ca6b81_2_690x345.png" class="thumbnail" data-dominant-color="E3E9F3" width="690" height="345"></div> <h3><a href="https://github.com/zoom/videosdk-web-sample/" target="_blank" rel="noopener">GitHub - zoom/videosdk-web-sample: Zoom Video SDK web sample</a></h3> <p>Zoom Video SDK web sample. Contribute to zoom/videosdk-web-sample development by creating an account on GitHub.</p> </article> <div class="onebox-metadata"> </div> <div style="clear: both"></div> </aside> <p>Thanks<br> Vic</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_18' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-02-15T08:46:20Z' class='post-time'> February 15, 2024, 8:46am </time> <meta itemprop='dateModified' content='2024-02-15T08:46:20Z'> <span itemprop='position'>18</span> </span> </div> <div class='post' itemprop='text'> <p><a class="mention" href="/u/vic.yang">@vic.yang</a> 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 <a href="mailto:balaji.march31@gmail.com">balaji.march31@gmail.com</a> for a faster communication</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_19' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/vic.yang'><span itemprop='name'>vic.yang</span></a> (Vic) </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-02-19T02:59:24Z' class='post-time'> February 19, 2024, 2:59am </time> <meta itemprop='dateModified' content='2024-02-19T02:59:24Z'> <span itemprop='position'>19</span> </span> </div> <div class='post' itemprop='text'> <p>Hey <a class="mention" href="/u/balajisunku">@balajisunku</a></p> <p>Sorry for late reply.</p> <p>Here is a simple example I wrote based on your scenario:</p> <pre data-code-wrap="javascript"><code class="lang-javascript">/** * On Android browser, sending the video */ // Start video. Starting from 1.10.5, you no longer need to worry about whether to pass the videoElement await stream.startVideo({ originalRatio: true }); // Render self view const targetElement = stream.isRenderSelfViewWithVideoElement() ? document.querySelector("#self-video") : document.querySelector("#self-canvas"); await stream.renderVideo( targetElement, currentUserId, width, height, x, y, videoQuality ); /** * On Desktop browser, receiving the video */ client.on("peer-video-state-change", (payload) => { const { action, userId } = payload; if (action === "Start") { await stream.renderVideo( document.querySelector("#participants-canvas"), userId, width, height, x, y, videoQuality ); } else if (action === "Stop") { await stream.stopRenderVideo( document.querySelector("#participants-canvas"), userId ); } }); /** * Listen to the aspect ratio change event */ client.on("video-aspect-ratio-change", (payload) => { const { userId, aspectRatio } = payload; const height = width / aspectRatio; // resize the video await stream.adjustRenderedVideoPosition( document.querySelector("#participants-canvas"), userId, width, height, x, y ); }); </code></pre> <p>Thanks<br> Vic</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_20' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://devforum.zoom.us/u/balajisunku'><span itemprop='name'>balajisunku</span></a> (Balaji) </span> <link itemprop="image" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427.jpeg"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-03-08T05:54:24Z' class='post-time'> March 8, 2024, 5:54am </time> <meta itemprop='dateModified' content='2024-03-08T05:54:24Z'> <span itemprop='position'>20</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/vic.yang">@vic.yang</a> .<br> I would like to quickly re-iterate that my local view and remove view are fine on the react-web app.<br> But my remote view on the android version is cropped to show only the landscape portion as shown in the below screenshot.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427.jpeg" data-download-href="/uploads/short-url/nwQYKVhPu5uhdoJMV66WRSUoRW7.jpeg?dl=1" title="No subject Jan 7 Screenshot from balaji" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_223x500.jpeg" alt="No subject Jan 7 Screenshot from balaji" data-base62-sha1="nwQYKVhPu5uhdoJMV66WRSUoRW7" width="223" height="500" srcset="https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_223x500.jpeg, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_334x750.jpeg 1.5x, https://global.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/3X/a/4/a4e8c1389f4362685d076e344b7d6fb9e339b427_2_446x1000.jpeg 2x" data-dominant-color="302F2F"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">No subject Jan 7 Screenshot from balaji</span><span class="informations">1080×2412 109 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> <p>Should I still need the react-web changes you mentioned above? or I should change in android side?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> </div> <div role='navigation' itemscope itemtype='http://schema.org/SiteNavigationElement' class="topic-body crawler-post"> <span itemprop='name'><b><a rel="next" itemprop="url" href="/t/change-video-orientation-on-react-web-and-android-sdk/101056?page=2">next page →</a></b></span> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-100980"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://devforum.zoom.us/t/set-video-orientation-from-react-web-app/100980' class='title raw-link raw-topic-link'>Set video orientation from react-web app</a> </span> <div class="link-bottom-line"> <a href='/c/video-sdk/55' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name'>Video SDK</span> </span> </a> <div class="discourse-tags"> <a href='https://devforum.zoom.us/tag/phone' class='discourse-tag'>phone</a> , <a href='https://devforum.zoom.us/tag/video-sdk' class='discourse-tag'>video-sdk</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>443</span> </td> <td> January 3, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-110090"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://devforum.zoom.us/t/video-cropped-and-low-quality-in-landscape/110090' class='title raw-link raw-topic-link'>Video cropped and low quality in landscape</a> </span> <div class="link-bottom-line"> <a href='/c/video-sdk/react-native/38' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name'>React Native</span> </span> </a> <div class="discourse-tags"> <a href='https://devforum.zoom.us/tag/video-sdk' class='discourse-tag'>video-sdk</a> , <a href='https://devforum.zoom.us/tag/sdk' class='discourse-tag'>sdk</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>173</span> </td> <td> June 15, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-103619"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://devforum.zoom.us/t/video-crop-issue-on-landscape-view-on-web/103619' class='title raw-link raw-topic-link'>Video crop issue on landscape view on web</a> </span> <div class="link-bottom-line"> <a href='/c/video-sdk/web/31' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>Web</span> </span> </a> <div class="discourse-tags"> <a href='https://devforum.zoom.us/tag/video-sdk' class='discourse-tag'>video-sdk</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>38</span> </td> <td class="views"> <span class='views' title='views'>890</span> </td> <td> May 5, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-110641"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://devforum.zoom.us/t/zoomview-in-react-native-orientation-issue/110641' class='title raw-link raw-topic-link'>zoomView in react native orientation issue</a> </span> <div class="link-bottom-line"> <a href='/c/video-sdk/55' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name'>Video SDK</span> </span> </a> <div class="discourse-tags"> <a href='https://devforum.zoom.us/tag/video-sdk' class='discourse-tag'>video-sdk</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>0</span> </td> <td class="views"> <span class='views' title='views'>92</span> </td> <td> May 24, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-83096"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://devforum.zoom.us/t/zoom-video-call-ui-is-breaking-on-landscape-rotation/83096' class='title raw-link raw-topic-link'>Zoom Video Call UI is breaking on landscape rotation</a> </span> <div class="link-bottom-line"> <a href='/c/meeting-sdk/56' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #9EB83B'></span> <span class='badge-category clear-badge'> <span class='category-name'>Meeting SDK</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>0</span> </td> <td class="views"> <span class='views' title='views'>359</span> </td> <td> February 14, 2023 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://zoom.us/terms' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://zoom.us/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>