fix(web): made it work with Capacitor 4

[trancee]

refers to #243 and #247

• cleaned up code a bit
• possible breaking change: added format on Web to choose which picture format should be output
• quality will default to 85% to achieve feature parity with other platforms
• made sure streams are properly handled when opening, capturing and closing camera

please kindly review my changes.

[riderx]

Hey @trancee can you open your Pr to https://github.com/Cap-go/camera-preview i will merge it directly

[rrdesignweb]

Hey there, any news on this PR?

I am having some issues with this plugin on Capacitor 4 not sure if it is related to my issue I raised - https://github.com/capacitor-community/camera-preview/issues/270

[riderx]

@rrdesignweb can you try my fork and tell me it that work ?

[rrdesignweb]

@rrdesignweb can you try my fork and tell me it that work ?

Thanks for your reply,

this one here: https://github.com/riderx/camera-preview ?

I checked out this issue.- gh pr checkout 249 and did an npm run build locally, build was successful but showed a number of TS errors. Not sure if I am doing something wrong here? Apologies if so I am a newbie to capacitor (about 2 months)

Screenshot: https://ibb.co/0htQhSJ

Node version - 16.3.0 Capacitor 4

[riderx]

you can just npm install it's published: npm i @capago@camera-preview :)

[rrdesignweb]

Thanks, I have installed the package https://www.npmjs.com/package/@capgo/camera-preview and done an npx cap sync but still getting similar errors,

Console: SyntaxError: Cannot use import statement outside a module (https://github.com/capacitor-community/camera-preview/issues/270) Capacitor WebPlugin "CameraPreview" config object was deprecated in v3 and will be removed in v4. (https://github.com/capacitor-community/camera-preview/issues/243) Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild') (https://github.com/capacitor-community/camera-preview/issues/264)

Imports

...
import { CameraPreview, CameraPreviewOptions, CameraPreviewPictureOptions } from "@capgo/camera-preview";
import '@capgo/camera-preview'; //web?
...

Component

...
const onStartCamera = async () => {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      width: 1080,
      toBack: true
    };
    await CameraPreview.start(cameraPreviewOptions);
  }
...

Package.json cap related deps

"@capacitor/android": "^4.6.1",
"@capacitor/core": "^4.6.1",
"@capacitor/filesystem": "^4.1.4",
"@capacitor/geolocation": "^4.1.0",
"@capacitor/ios": "^4.6.1",
"@capacitor/preferences": "^4.0.2",
"@capacitor/status-bar": "^4.1.1",
"@capgo/camera-preview": "^3.5.1",
"@codetrix-studio/capacitor-google-auth": "^3.2.0",