How to horizontally flip webcam Picture-in-Picture video

I am working on a video conferencing application and user can toggle between having their camera to be Picture-in-Picture or just on the web page. For the webpage I used a video element that would use getUserMedia stream as the srcObject and would display the current webcam. However, as the stream from the webcams are mirrored, “the wrong way around”, I used css transform to flip the video element horizontally by 180. It works fine, however, when try to enter in Picture-in-Picture mode, the video is still mirrored / “wrong way around”.

I tried using :picture-in-picture in css to apply the transformation there too, however, it had no effect

const button = document.getElementById('button');
const webCamVideo = document.querySelector('.webcam-vid')

button.addEventListener('click', async () => {
  webCamVideo.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
  video.play();
  video.addEventListener('loadedmetadata', () => {
    video.requestPictureInPicture()
    .catch(console.error)
  });
});

body {
  padding: 20px;
}

.webcam-vid {
  transform: scaleX(-1)
  width: 100px;
  height: 100px;
  object-fit: cover;
}

<video class="webcam-vid" autoPlay playsInline></video>


<button class="btn btn-primary" id="button">Display Webcam feed in Picture-in-Picture mode</button>