capacitor-community / capacitor-community/camera-preview

Can't apply styles to camera view on Android

Open
#338 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
227
Forks
185
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
When loaded on Android, the video element will not adopt any styles. It can be resized passing a height and width option via the CameraPreview.start(cameraPreviewOptions); but then won't (for example) centre via CSS and seems to have different dimensions to those provided to it.

On a desktop in the browser, it works as expected.

**To Reproduce**
Steps to reproduce the behavior:
1.) I load the element as such

`
async function startup () {
await platformInfo();
const cameraPreviewOptions = {
parent: 'cameraControl',
enableZoom: true,
position: 'front',
toBack: true,
disableAudio: true,
width: vars.width,
height: vars.height
};

await CameraPreview.start(cameraPreviewOptions);
// other things to start up
}`

Then the usual npm run build (with vite), npx cap sync, npx cap run android

**Expected behavior**
To be able to style, position the camera output

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
- OS: Ubuntu 23.10
- Chrome
- Version 125.0.6422.141

**Smartphone (please complete the following information):**
- Device: Redmi Note 9
- OS: Android 11
- Browser Chrome
- Version 125.0.6422.165

**Additional context**

I am using this plugin to get around PTZ limitations in the webview. Using a normal video element or canvas works, this seems to exist separate to the webview.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.