Merge pull request #206 from ant-media/screenShareAspectRatio

Fix cropped video during screen share

.gitignore

@@ -3,3 +3,4 @@ codesigning.asc
 webapp/src/main/webapp/
 .vscode/
 
+react/.env.development

react/src/Components/Cards/VideoCard.js

@@ -131,6 +131,8 @@ function VideoCard(props) {
 
   const timeoutRef = React.useRef(null);
 
+  const isScreenSharedVideo = (conference?.screenSharedVideoId === props?.id) || (conference?.isScreenShared === true && isLocal);
+
   const mirrorView = isLocal && !conference?.isScreenShared;
   //const isScreenSharing =
   //  conference?.isScreenShared ||
@@ -259,7 +261,7 @@ function VideoCard(props) {
         >
           <CustomizedVideo
             {...props}
-            style={{ objectFit: props.pinned ? "contain" : "cover" }}
+            style={{ objectFit: props.pinned || isScreenSharedVideo ? "contain" : "cover" }}
             ref={refVideo}
             playsInline
             muted={isLocal}

react/src/pages/AntMedia.js

@@ -33,6 +33,13 @@ function getMediaConstraints(videoSendResolution, frameRate) {
   let constraint = null;
 
   switch (videoSendResolution) {
+    case "screenConstraints":
+      constraint = {
+        video: {
+          width: {max: window.screen.width}, height: {max: window.screen.height}, frameRate: {ideal: frameRate}
+        }
+      };
+      break;
     case "qvgaConstraints":
       constraint = {
         video: {
@@ -1261,7 +1268,7 @@ function AntMedia() {
     let mediaConstraints = {video: true};
 
     if (isScreenShared) {
-      mediaConstraints = getMediaConstraints("fullHdConstraints", 25);
+      mediaConstraints = getMediaConstraints("screenConstraints", 20);
       promise = webRTCAdaptor?.applyConstraints(mediaConstraints);
     } else if (videoSendResolution === "auto" && !isPinned) {
       mediaConstraints = getMediaConstraints("qvgaConstraints", 15);