Support screen pixel density for react native (#651)

* react-native pixel ratio

* fix naming

* changeset

* pr comment fixes

.changeset/ten-buckets-knock.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Support screen pixel density for react-native

src/index.ts

@@ -28,6 +28,7 @@ import {
 } from './room/utils';
 
 import type { AudioAnalyserOptions } from './room/utils';
+import type { LiveKitReactNativeInfo } from './room/types';
 
 export * from './options';
 export * from './room/errors';
@@ -73,4 +74,5 @@ export {
   ElementInfo,
   DefaultReconnectPolicy,
   CriticalTimers,
+  LiveKitReactNativeInfo,
 };

src/room/track/RemoteVideoTrack.ts

@@ -4,6 +4,7 @@ import { TrackEvent } from '../events';
 import { computeBitrate, VideoReceiverStats } from '../stats';
 import CriticalTimers from '../timers';
 import {
+  getDevicePixelRatio,
   getIntersectionObserver,
   getResizeObserver,
   isWeb,
@@ -253,7 +254,7 @@ export default class RemoteVideoTrack extends RemoteTrack {
     let maxHeight = 0;
     for (const info of this.elementInfos) {
       const pixelDensity = this.adaptiveStreamSettings?.pixelDensity ?? 1;
-      const pixelDensityValue = pixelDensity === 'screen' ? window.devicePixelRatio : pixelDensity;
+      const pixelDensityValue = pixelDensity === 'screen' ? getDevicePixelRatio() : pixelDensity;
       const currentElementWidth = info.width() * pixelDensityValue;
       const currentElementHeight = info.height() * pixelDensityValue;
       if (currentElementWidth + currentElementHeight > maxWidth + maxHeight) {

src/room/types.ts

@@ -20,3 +20,9 @@ export type DataPublishOptions = {
   /** the topic under which the message gets published */
   topic?: string;
 };
+
+export type LiveKitReactNativeInfo = {
+  // Corresponds to RN's PlatformOSType
+  platform: 'ios' | 'android' | 'windows' | 'macos' | 'web' | 'native';
+  devicePixelRatio: number;
+};

src/room/utils.ts

@@ -4,6 +4,7 @@ import { protocolVersion, version } from '../version';
 import type LocalAudioTrack from './track/LocalAudioTrack';
 import type RemoteAudioTrack from './track/RemoteAudioTrack';
 import { getNewAudioContext } from './track/utils';
+import type { LiveKitReactNativeInfo } from './types';
 
 const separator = '|';
 
@@ -127,21 +128,45 @@ export function isReactNative(): boolean {
   return navigator.product == 'ReactNative';
 }
 
+function getLKReactNativeInfo(): LiveKitReactNativeInfo | undefined {
+  // global defined only for ReactNative.
+  // @ts-ignore
+  if (global && global.LiveKitReactNativeGlobal) {
+    // @ts-ignore
+    return global.LiveKitReactNativeGlobal as LiveKitReactNativeInfo;
+  }
+
+  return undefined;
+}
+
 export function getReactNativeOs(): string | undefined {
   if (!isReactNative()) {
     return undefined;
   }
 
-  // global defined only for ReactNative.
-  // @ts-ignore
-  if (global && global.LiveKitReactNativeGlobal) {
-    // @ts-ignore
-    return global.LiveKitReactNativeGlobal.platform;
+  let info = getLKReactNativeInfo();
+  if (info) {
+    return info.platform;
   }
 
   return undefined;
 }
 
+export function getDevicePixelRatio(): number {
+  if (isWeb()) {
+    return window.devicePixelRatio;
+  }
+
+  if (isReactNative()) {
+    let info = getLKReactNativeInfo();
+    if (info) {
+      return info.devicePixelRatio;
+    }
+  }
+
+  return 1;
+}
+
 export function compareVersions(v1: string, v2: string): number {
   const parts1 = v1.split('.');
   const parts2 = v2.split('.');