Camera preview dimensions ignored? - distorted on iOS
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 160
- PR merge metrics
- No merged PRs in 30d
Description
#### 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";
...
{hasPermission && (
thecamera.current,
}}
>
)}
...
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.


Contributor guide
Assessment
This issue has not been assessed yet.