Как перевернуть веб-камеру по горизонтали видео «картинка в картинке» [дубликат] ⇐ CSS

[Anonymous]

Я работаю над приложением для видеоконференций, и пользователь может переключаться между режимом «картинка в картинке» или просто на веб-странице. Для веб-страницы я использовал элемент видео, который будет использовать поток getUserMedia в качестве srcObject и отображать текущую веб-камеру. Однако, поскольку поток с веб-камер зеркалируется «неправильно», я использовал преобразование CSS, чтобы перевернуть видеоэлемент по горизонтали на 180. Однако он работает нормально при попытке войти в «Картинка в картинке», видео по-прежнему зеркально отображается/"неправильно".
Я пробовал использовать :картинка в картинке в CSS, чтобы применить преобразование и там, однако, это не дало эффекта

Код: Выделить всё

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;
}

Код: Выделить всё

Display Webcam feed in Picture-in-Picture mode

Подробнее здесь: https://stackoverflow.com/questions/791 ... ture-video