Camera view is not showing on android

[makinox]

I followed all the steps, and the video view or controlers are not showing, only can see the audio log captured with 'onVolumeInput' event listener

    const config: VideoRecorderPreviewFrame = {
      id: 'video-record',
      stackPosition: 'front',
      width: 'fill',
      height: 'fill',
      x: 0,
      y: 0,
      borderRadius: 0,
    };
    Plugins.VideoRecorder.initialize({
      camera: VideoRecorderCamera.FRONT,
      previewFrames: [config],
    }).then(() => {
      // Plugins.VideoRecorder.switchToPreviewFrame({ id: 'video-record' });
      Plugins.VideoRecorder.startRecording()
    });

This is the code i'm using, any help?

[rbenzing]

I use "back" stackPosition and overlay my elements on top of the recorder view:

I also run it through the Plugins importing it like this: import { VideoRecorderCamera, VideoRecorderPreviewFrame } from '@teamhive/capacitor-video-recorder'; import { Plugins, Capacitor } from '@capacitor/core'; const { VideoRecorder } = Plugins;

Then I run this in my construct: VideoRecorder.initialize({ camera: VideoRecorderCamera.FRONT, previewFrames: [this.config] });

Then i have a overlay button on my recorder view that runs: VideoRecorder.startRecording()

[AdaLollA]

Having the exact same issue here. What i found out is that the stackPosition attribute doesn't work on android - here it will always place the camera view at the very back. Anybody have any input on whether that is intentional behaviour and how to work around that?

It does work on iOS without problems.

[AdaLollA]

Has anybody gotten stackPosition: 'front' to work on android yet? Or is this not intended to be supported?

[mueslirieger]

Any news here? I'm having the exact same issues as @AdaLollA. Somehow the view of the camera gets placed behind ion-content even though I'm using stackPosition: 'front.

[AdaLollA]

Here is arepository that showcases the issue on the most minimal implementation possible. If you clone it and change between native- and web-implementation (its just one line in the MainActivity and described in detail in the README of the repo) you will see the discrepancies between them (preview does not work on native).

[AdaLollA]

@rbenzing and @makinox if you still need to use the stackPosition front property: I just created a pull request to this repository. If they don't respond (like they did for a month now) you can just copy the MainActivity from my repository over the current faulty MainActivity.

If you have trouble getting this to work feel free to ask.

[ilbertt]

I use "back" stackPosition and overlay my elements on top of the recorder view:

I also run it through the Plugins importing it like this: import { VideoRecorderCamera, VideoRecorderPreviewFrame } from '@teamhive/capacitor-video-recorder'; import { Plugins, Capacitor } from '@capacitor/core'; const { VideoRecorder } = Plugins;

Then I run this in my construct: VideoRecorder.initialize({ camera: VideoRecorderCamera.FRONT, previewFrames: [this.config] });

Then i have a overlay button on my recorder view that runs: VideoRecorder.startRecording()

@rbenzing I don't think this could be a good solution, as the UX may be affected. I think @AdaLollA reached a better one in https://github.com/TeamHive/capacitor-video-recorder/pull/30. I'd advise to take it into account