Running into "Cannot read properties of null (reading 'appendChild')"

[hangrydave]

Describe the bug
I've got an Ionic project using this plugin, and when I call CameraPreview.start this error gets spit out in the console:

core.mjs:9215 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'appendChild')
TypeError: Cannot read properties of null (reading 'appendChild')
    at web.js:43:20
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:25762:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:25762:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:25441:55
handleError @ core.mjs:9215

To Reproduce
Version numbers that are probably relevant:

• Ionic CLI 6.20.4
• Node 18.12.1
• Capacitor Android 4.6.0
• Capacitor Camera 4.1.4
• Capacitor CLI 4.6.0
• Capacitor Core 4.6.0

I'm running this code:

const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      height: 1920,
      width: 1080
    };
CameraPreview.start(cameraPreviewOptions);

The error occurs whenever that code is run.
Issue #247 looked similar, but the fixes linked here didn't work for me: Cap-go/capacitor-camera-preview#3

Any help is appreciated, thanks.

[rrdesignweb]

Describe the bug I've got an Ionic project using this plugin, and when I call CameraPreview.start this error gets spit out in the console:

core.mjs:9215 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'appendChild')
TypeError: Cannot read properties of null (reading 'appendChild')
    at web.js:43:20
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:25762:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:25762:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:25441:55
handleError @ core.mjs:9215

To Reproduce Version numbers that are probably relevant:

• Ionic CLI 6.20.4
• Node 18.12.1
• Capacitor Android 4.6.0
• Capacitor Camera 4.1.4
• Capacitor CLI 4.6.0
• Capacitor Core 4.6.0

I'm running this code:

const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',
      height: 1920,
      width: 1080
    };
CameraPreview.start(cameraPreviewOptions);

The error occurs whenever that code is run. Issue #247 looked similar, but the fixes linked here didn't work for me: Cap-go/camera-preview#3

Any help is appreciated, thanks.

Hi there wondering if you got anywhere with this? I am having a same issue when I have this in my MainActivity.java file

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    registerPlugin(CameraPreview.class);
    super.onCreate(savedInstanceState);
  }
}

[FernetB]

Same issue here, i cannot make it work on web

[thomascallahan]

Add a parent property to your config object, with the value set to the ID of the HTML element you want to attach the video preview to. So my app uses Vue and the root element is <div id="app"></div> so I needed to use this:

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'rear',
  height: 1920,
  width: 1080,
  parent: "app",
};
CameraPreview.start(cameraPreviewOptions);

I still can't get it to show anything, but at least this error is resolved and the <video> element shows in the DOM now.