search

capacitor-community / camera-preview

Capacitor plugin that allows camera interaction from HTML code
MIT License
189 stars 166 forks source link

Camera preview doesn't work with native platforms, but web works well #310

Open Beercokol opened 1 year ago

Beercokol commented 1 year ago

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"}`

2023-08-09 08 18 21

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

2023-08-09 08 21 40

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 1 year ago

@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

image