Camera preview dimensions ignored? - distorted on iOS

[Tom Yates]

library version

gl-react-dom@5.1.0
├─ gl-react-expo@5.0.0
├─ gl-react-native@5.0.0
└─ gl-react@5.0.0

bug report

I'm using the following code to display a 100 x 100 preview of the camera:

import { Camera } from "expo-camera";
import { Surface } from "gl-react-expo";
import { GLSL, Node, Shaders } from "gl-react";
import "webgltexture-loader-expo-camera";

...

<View>
      {hasPermission && (
        <Surface style={{ width:100, height:100 }} ref={surface}>
          <Node
            shader={shaders.HexagonCrop}
            uniforms={{
              t: () => thecamera.current,
            }}
          >
            <Camera
              style={{
                width:100,
                height:100,
              }}
              ratio="1:1"
              ref={thecamera}
              type={Camera.Constants.Type.front}
            />
          </Node>
        </Surface>
      )}
    </View>


...

const shaders = Shaders.create({
 HexagonCrop: {
 frag: GLSL`
 precision highp float;
 varying vec2 uv;
 uniform sampler2D t;

 void main() {

 vec4 c = texture2D(t, uv);

 gl_FragColor = texture2D(t, vec2(uv.x, 1.0 - uv.y));
 }

The preview is shown correctly at 100x100, however it is distorted.
The video is stretched by a factor of 1.3333 (4/3).
What’s the easiest way to un-stretch the video? I’ve tried all sorts unsuccessfully and need help.
I assume I could crop the video somehow in the shader, but it would be easiest if I could crop the video before it’s passed to the shader.

See screen shots below, first with distortion is with the Camera preview using gl-react, and the second is just using the vanilla expo-camera component.

[Tom Yates]

Does anyone have any thoughts to how I could resolve this?

[MRota]

Camera.ratio prop is valid only on Android.
Camera.style.width and Camera.style.height seems to be used only when taking a snapshot by cropping the full image, only on iOS though.
Also, setting Camera.pictureSize seems to affect the ratio, but not the snapshot resolution (again, only on iOS)
Try callling Camera.getAvailablePictureSizesAsync and check if there are any available 1:1 ratios.