Example code

[disbelief]

It would be super helpful to see the code that generated the example screenshots from the bottom of the README.

Particularly curious about how to overlay custom markup for controls over the camera view without blocking the entire thing. Should everything be absolutely positioned with z-index: 99999;? What is the point of the video-record element ID since it appears a <video> node is injected into the HTML body?

[davidecampello]

I'm having same questions.. Have you found a solution?

[disbelief]

@davidecampello yes, it is pretty straightforward actually. I was originally having problems because I wanted the video to be behind my App, but there was a

covering the video player with an opaque background.

I found a combination of some basic CSS styles on the video

plus the width, height, x, and y coordinates on the VideoRecorder previewFrames provided everything I needed to arrange elements behind and on top of the video player.

If you have a specific question, let me know and I'll see if I can help.

[ikishanoza]

I am having the same issue can you share the some line from ur code?

[pfinkbeiner]

Cant find any <video> element on iOS. What am I missing here?

[pfinkbeiner]

Okay I finally figured it out. Basically what I did was:

1. Set backgroundColor to "#ff000000" in capacitor.config.ts. transparent wont work here.
2. Initialize plugin with the following config

const config: VideoRecorderPreviewFrame = {
  id: "video-record",
  stackPosition: "back",
  width: "fill",
  height: "fill",
  x: 0,
  y: 0,
  borderRadius: 0,
}
[...]
await VideoRecorder.initialize({
  camera: VideoRecorderCamera.FRONT,
  previewFrames: [config],
})

3. Video Feed is now behind the App and the tricky part was for me to get the webview transparent. What I did was to add a class to html which sets the background to rgba(0,0,0,0.01) and my app container to display: none;. For some strage reason I wasnt able to completly set the backend to transparent. rgba(0,0,0,0.01) was the closest I could get. ¯_(ツ)_/¯

Maybe this one helps someone else.

[itshazlan]

@pfinkbeiner I still don't figure out how to make all layers transparent on the front frame, the only solution I did is to set background-color: transparent and visibility: hidden on the html, it does not show my component but previous page stack instead :(

app.component.ts

      const config: VideoRecorderPreviewFrame = {
        id: 'video-record',
        stackPosition: 'back',
        width: 'fill',
        height: 'fill',
        x: 0,
        y: 0,
        borderRadius: 0,
      };

      const options: VideoRecorderOptions = {
        camera: VideoRecorderCamera.BACK,
        quality: VideoRecorderQuality.MAX_720P,
        // autoShow: true,
        previewFrames: [config]
      };

      await VideoRecorder.initialize(options);

app.component.html

  <div class="w-full min-h-full" *ngIf="mediaType === 'video'">
    <div id="video-record"></div>

    <ion-fab vertical="bottom" horizontal="center" slot="fixed" class="bottom-10">
      <ion-fab-button color="danger" (click)="startCaptureVideo()">
        <!-- <ion-icon name="stop"></ion-icon> -->
      </ion-fab-button>
    </ion-fab>
  </div>

maybe you could give me help with this one? @pfinkbeiner @disbelief