Group call video rendering performance improvements

ts/components/GroupCallRemoteParticipant.tsx

@@ -38,7 +38,8 @@ interface NotInPipPropsType {
 
 type PropsType = BasePropsType & (InPipPropsType | NotInPipPropsType);
 
-export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
+export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
+  props => {
     const {
       demuxId,
       getGroupCallVideoFrameSource,
@@ -46,10 +47,10 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
       hasRemoteVideo,
     } = props;
 
-  const [canvasStyles, setCanvasStyles] = useState<CSSProperties>({});
+    const [isWide, setIsWide] = useState(true);
 
     const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
-  const rafIdRef = useRef<number | null>(null);
+    const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null);
     const frameBufferRef = useRef<ArrayBuffer>(
       new ArrayBuffer(FRAME_BUFFER_SIZE)
     );
@@ -65,8 +66,8 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
         return;
       }
 
-    const context = canvasEl.getContext('2d');
-    if (!context) {
+      const canvasContext = canvasContextRef.current;
+      if (!canvasContext) {
         return;
       }
 
@@ -78,10 +79,14 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
       }
 
       const [frameWidth, frameHeight] = frameDimensions;
+      if (frameWidth < 2 || frameHeight < 2) {
+        return;
+      }
+
       canvasEl.width = frameWidth;
       canvasEl.height = frameHeight;
 
-    context.putImageData(
+      canvasContext.putImageData(
         new ImageData(
           new Uint8ClampedArray(
             frameBufferRef.current,
@@ -95,14 +100,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
         0
       );
 
-    // If our `width` and `height` props don't match the canvas's aspect ratio, we want to
-    //   fill the container. This can happen when RingRTC gives us an inaccurate
-    //   `videoAspectRatio`, or if the container is an unexpected size.
-    if (frameWidth > frameHeight) {
-      setCanvasStyles({ width: '100%' });
-    } else {
-      setCanvasStyles({ height: '100%' });
-    }
+      setIsWide(frameWidth > frameHeight);
     }, [videoFrameSource]);
 
     useEffect(() => {
@@ -110,23 +108,30 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
         return noop;
       }
 
-    const tick = () => {
-      renderVideoFrame();
-      rafIdRef.current = requestAnimationFrame(tick);
-    };
+      let rafId = requestAnimationFrame(tick);
 
-    rafIdRef.current = requestAnimationFrame(tick);
+      function tick() {
+        renderVideoFrame();
+        rafId = requestAnimationFrame(tick);
+      }
 
       return () => {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
+        cancelAnimationFrame(rafId);
       };
     }, [hasRemoteVideo, renderVideoFrame, videoFrameSource]);
 
+    let canvasStyles: CSSProperties;
     let containerStyles: CSSProperties;
 
+    // If our `width` and `height` props don't match the canvas's aspect ratio, we want to
+    //   fill the container. This can happen when RingRTC gives us an inaccurate
+    //   `videoAspectRatio`, or if the container is an unexpected size.
+    if (isWide) {
+      canvasStyles = { width: '100%' };
+    } else {
+      canvasStyles = { height: '100%' };
+    }
+
     // TypeScript isn't smart enough to know that `isInPip` by itself disambiguates the
     //   types, so we have to use `props.isInPip` instead.
     // eslint-disable-next-line react/destructuring-assignment
@@ -158,7 +163,18 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
           <canvas
             className="module-ongoing-call__group-call-remote-participant__remote-video"
             style={canvasStyles}
-          ref={remoteVideoRef}
+            ref={canvasEl => {
+              remoteVideoRef.current = canvasEl;
+              if (canvasEl) {
+                canvasContextRef.current = canvasEl.getContext('2d', {
+                  alpha: false,
+                  desynchronized: true,
+                  storage: 'discardable',
+                } as CanvasRenderingContext2DSettings);
+              } else {
+                canvasContextRef.current = null;
+              }
+            }}
           />
         ) : (
           <CallBackgroundBlur>
@@ -168,4 +184,5 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = props => {
         )}
       </div>
     );
-};
+  }
+);

ts/components/GroupCallRemoteParticipants.tsx

@@ -162,7 +162,9 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
   ]);
 
   // 4. Lay out this arrangement on the screen.
-  const gridParticipantHeight = gridArrangement.scalar * MIN_RENDERED_HEIGHT;
+  const gridParticipantHeight = Math.floor(
+    gridArrangement.scalar * MIN_RENDERED_HEIGHT
+  );
   const gridParticipantHeightWithMargin =
     gridParticipantHeight + PARTICIPANT_MARGIN;
   const gridTotalRowHeightWithMargin =
@@ -181,12 +183,15 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
       const totalRowWidth =
         totalRowWidthWithoutMargins +
         PARTICIPANT_MARGIN * (remoteParticipantsInRow.length - 1);
-      const leftOffset = (containerDimensions.width - totalRowWidth) / 2;
+      const leftOffset = Math.floor(
+        (containerDimensions.width - totalRowWidth) / 2
+      );
 
       let rowWidthSoFar = 0;
       return remoteParticipantsInRow.map(remoteParticipant => {
-        const renderedWidth =
-          remoteParticipant.videoAspectRatio * gridParticipantHeight;
+        const renderedWidth = Math.floor(
+          remoteParticipant.videoAspectRatio * gridParticipantHeight
+        );
         const left = rowWidthSoFar + leftOffset;
 
         rowWidthSoFar += renderedWidth + PARTICIPANT_MARGIN;

ts/util/lint/exceptions.json

@@ -14579,10 +14579,10 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/GroupCallRemoteParticipant.js",
-    "line": "    const rafIdRef = react_1.useRef(null);",
+    "line": "    const canvasContextRef = react_1.useRef(null);",
     "lineNumber": 25,
     "reasonCategory": "usageTrusted",
-    "updated": "2020-11-17T16:24:25.480Z",
+    "updated": "2020-11-17T23:29:38.698Z",
     "reasonDetail": "Doesn't touch the DOM."
   },
   {