Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Camera preview dimensions ignored? - distorted on iOS #336

Open
tomyates opened this issue Jul 4, 2021 · 2 comments
Open

Camera preview dimensions ignored? - distorted on iOS #336

tomyates opened this issue Jul 4, 2021 · 2 comments
Labels

Comments

@tomyates
Copy link

tomyates commented Jul 4, 2021

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.

IMG_5810
IMG_5811

@tomyates
Copy link
Author

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

@MRotaKalpa
Copy link

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.

@gre gre added the video label May 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants