Share group calling frame buffers to reduce memory usage

ts/calling/constants.ts

@@ -1,6 +1,9 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 export const REQUESTED_VIDEO_WIDTH = 640;
 export const REQUESTED_VIDEO_HEIGHT = 480;
 export const REQUESTED_VIDEO_FRAMERATE = 30;
+
+export const MAX_FRAME_SIZE = 1920 * 1080;
+export const FRAME_BUFFER_SIZE = MAX_FRAME_SIZE * 4;

ts/calling/useGetCallingFrameBuffer.ts

@@ -0,0 +1,24 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useRef, useCallback } from 'react';
+import { FRAME_BUFFER_SIZE } from './constants';
+
+/**
+ * A hook that returns a function. This function returns a "singleton" `ArrayBuffer` to be
+ * used in call video rendering.
+ *
+ * This is most useful for group calls, where we can reuse the same frame buffer instead
+ * of allocating one per participant. Be careful when using this buffer elsewhere, as it
+ * is not cleaned up and may hold stale data.
+ */
+export function useGetCallingFrameBuffer(): () => ArrayBuffer {
+  const ref = useRef<ArrayBuffer | null>(null);
+
+  return useCallback(() => {
+    if (!ref.current) {
+      ref.current = new ArrayBuffer(FRAME_BUFFER_SIZE);
+    }
+    return ref.current;
+  }, []);
+}