capacitor-community / capacitor-community/camera-preview
Can't apply styles to camera view on Android
- 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
Assessment
This issue has not been assessed yet.