Camera preview doesn't work with native platforms, but web works well
Opened this issue · 1 comments
Beercokol commented
Describe the bug
Camera preview doesn't work with native platforms, only white screen with out preview
IOS logs:
Loading app at capacitor://localhost...
To Native Cordova -> File requestAllPaths File731812688 ⚡️ [log] - onscript loading complete
["options": []]
To Native Cordova -> LottieSplashScreen initialAnimationEnded LottieSplashScreen731812689 ["options": []]
⚡️ WebView loaded
⚡️ To Native -> App addListener 120489526
⚡️ To Native -> Preferences get 120489527
⚡️ To Native -> Preferences get 120489528
⚡️ To Native -> Preferences get 120489529
⚡️ To Native -> Preferences get 120489530
⚡️ To Native -> Preferences get 120489531
⚡️ To Native -> Preferences get 120489532
⚡️ To Native -> CameraPreview start 120489533
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS undefined
⚡️ To Native -> Preferences get 120489534
⚡️ To Native -> Preferences get 120489535
⚡️ To Native -> Preferences get 120489536
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ TO JS {"value":null}
⚡️ To Native -> CameraPreview startRecordVideo 120489537
captureSessionIsMissing
ERROR MESSAGE: {"message":"Capture Session is Missing","errorMessage":"Capture Session is Missing"}
⚡️ [error] - {"message":"Capture Session is Missing","errorMessage":"Capture Session is Missing"}`
Android logs
08-08 16:35:59.912 D/Codec2Client(20974): Surface configure completed
08-08 16:35:59.912 D/SurfaceUtils(20974): disconnecting from surface 0xb4000071363b8470, reason disconnectFromSurface
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.912 D/CCodecBufferChannel(20974): [c2.exynos.h264.decoder#599] MediaCodec discarded an unknown buffer
08-08 16:35:59.913 W/cr_MediaCodecBridge(20974): Codec released
08-08 16:35:59.923 I/hw-BpHwBinder(20974): onLastStrongRef automatically unlinking death recipients
08-08 16:35:59.923 D/SurfaceUtils(20974): disconnecting from surface 0xb4000071362b6ae0, reason disconnectFromSurface
08-08 16:35:59.923 E/BufferQueueProducer(20974): [MediaCodec.release](id:51ee00000007,api:0,p:-1,c:20974) detachBuffer: BufferQueue has no connected producer
08-08 16:36:04.704 D/BufferPoolAccessor2.0(20974): bufferpool2 0xb40000709630f598 : 0(0 size) total buffers - 0(0 size) used buffers - 11/17 (recycle/alloc) - 6/13 (fetch/transfer)
08-08 16:36:04.705 D/BufferPoolAccessor2.0(20974): evictor expired: 1, evicted: 1
08-08 16:36:05.705 D/BufferPoolAccessor2.0(20974): bufferpool2 0xb4000070962e46c8 : 0(0 size) total buffers - 0(0 size) used buffers - 7/12 (recycle/alloc) - 5/8 (fetch/transfer)
08-08 16:36:05.705 D/BufferPoolAccessor2.0(20974): bufferpool2 0xb4000070963088e8 : 0(0 size) total buffers - 0(0 size) used buffers - 12/18 (recycle/alloc) - 6/14 (fetch/transfer)
08-08 16:36:05.705 D/BufferPoolAccessor2.0(20974): evictor expired: 2, evicted: 2
08-08 16:36:07.628 W/cr_media(20974): Requires MODIFY_AUDIO_SETTINGS and RECORD_AUDIO. No audio device will be available for recording
08-08 16:36:07.690 D/Preview (20974): screen is rotated 0deg from natural
08-08 16:36:07.690 D/Preview (20974): back camera is oriented -90deg from natural
08-08 16:36:07.690 D/Preview (20974): need to rotate preview 90deg
08-08 16:36:07.691 D/CameraActivity(20974): cameraCurrentlyLocked:0
08-08 16:36:07.711 I/CameraManagerGlobal(20974): Connecting to camera service
08-08 16:36:07.712 D/Preview (20974): optimal preview size: w: 2048 h: 1536
08-08 16:36:07.712 D/Preview (20974): optimal preview size: w: 2048 h: 1536
08-08 16:36:07.718 D/Preview (20974): center vertically
08-08 16:36:07.718 D/layout (20974): left:0
08-08 16:36:07.718 D/layout (20974): top:-1060
08-08 16:36:07.718 D/layout (20974): right:2401
08-08 16:36:07.718 D/layout (20974): bottom:2141
08-08 16:36:07.718 D/Preview (20974): optimal preview size: w: 176 h: 144
08-08 16:36:07.718 D/Preview (20974): optimal preview size: w: 176 h: 144
08-08 16:36:07.718 D/Preview (20974): optimal preview size: w: 176 h: 144
08-08 16:36:07.720 D/Preview (20974): optimal preview size: w: 2048 h: 1536
08-08 16:36:07.799 W/cr_media(20974): Requires MODIFY_AUDIO_SETTINGS and RECORD_AUDIO. No audio device will be available for recording
08-08 16:36:07.801 D/Preview (20974): optimal preview size: w: 2048 h: 1536
08-08 16:36:07.801 D/Preview (20974): optimal preview size: w: 2048 h: 1536`
full android logs from browser stack:
app-arm64-v8a-release.apk_2023_8_8_16_53_46.log
Additional context
CameraPreviewOptions = {
parent: "style_story_container",
className: "video_container",
width: height,
height: width,
toBack: true,
};
All dependencies
"dependencies": {
"@awesome-cordova-plugins/core": "^6.2.0",
"@awesome-cordova-plugins/lottie-splash-screen": "^6.2.0",
"@capacitor/android": "4.4.0",
"@capacitor/app": "4.1.0",
"@capacitor/camera": "^4.1.4",
"@capacitor/core": "4.4.0",
"@capacitor/filesystem": "^4.1.4",
"@capacitor/haptics": "4.0.1",
"@capacitor/ios": "4.4.0",
"@capacitor/keyboard": "4.0.1",
"@capacitor/preferences": "^4.0.2",
"@capacitor/status-bar": "4.0.1",
"@capacitor-community/camera-preview 4.0.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@ffmpeg/core": "^0.11.0",
"@ffmpeg/ffmpeg": "^0.11.6",
"@ionic-native/core": "^5.36.0",
"@ionic-native/lottie-splash-screen": "^5.36.0",
"@ionic-native/media-capture": "^5.36.0",
"@ionic/cli": "^7.1.1",
"@ionic/pwa-elements": "^3.1.1",
"@ionic/react": "^6.0.0",
"@ionic/react-router": "^6.0.0",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.15",
"@react-oauth/google": "^0.11.0",
"@react-spring/web": "^9.7.2",
"@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^12.6.3",
"@use-gesture/react": "^10.2.24",
"antd": "^5.7.0",
"axios": "^1.1.3",
"com-sarriaroman-photoviewer": "^1.2.5",
"cordova-plugin-androidx-adapter": "^1.1.3",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-lottie-splashscreen": "^0.9.6",
"cordova-plugin-media-capture": "^4.0.0",
"dayjs": "^1.11.7",
"draft-js": "^0.11.7",
"draft-js-mention-plugin": "^3.1.5",
"draft-js-plugins-editor": "^3.0.0",
"firebase": "^9.17.2",
"formik": "^2.2.9",
"html2canvas": "^1.4.1",
"i18next": "^22.0.4",
"i18next-browser-languagedetector": "^7.0.1",
"ionicons": "^6.0.3",
"javascript-time-ago": "^2.5.9",
"jimp": "^0.22.8",
"js-sha256": "^0.9.0",
"libphonenumber-js": "1.10.36",
"lottie-web": "^5.10.0",
"patch-package": "^6.5.0",
"react": "^18.2.0",
"react-apple-login": "^1.1.6",
"react-apple-signin-auth": "^1.0.9",
"react-auth-code-input": "^3.2.1",
"react-code-input": "^3.10.1",
"react-convert-image": "^0.5.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.39.4",
"react-i18next": "^12.0.0",
"react-icons": "^4.7.1",
"react-imask": "7.0.1",
"react-inlinesvg": "^3.0.1",
"react-media-recorder": "^1.6.6",
"react-mentions": "^4.4.7",
"react-pin-field": "^3.1.3",
"react-redux": "^8.0.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"react-simple-keyboard": "^3.5.53",
"react-spring": "^9.7.1",
"react-swipeable": "^7.0.0",
"react-virtuoso": "^4.1.0",
"react-zoom-pan-pinch": "^3.0.7",
"redux-logger": "^3.0.6",
"shortid": "^2.2.16",
"styled-components": "^5.3.6",
"swiper": "^9.1.0",
"typescript": "^4.5.2",
"universal-cookie": "^4.0.4",
"uuid": "^9.0.0",
"web-vitals": "^1.1.2",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
ashchan3811 commented
@Beercokol Are you trying to run camera on iOS simulator or Browerstack? If yes then It will not work since camera doesn't work there as per Apple. That's why you are seeing error "Capture Session is Missing".
You need to verify on real device.
For android one, did u apply css for background?
Please look at Readme.md - https://github.com/capacitor-community/camera-preview#startoptions
