<video> 图像源是镜像，如何将图像转换为非镜像

Question

功能：

用户站在相机前拍照。

已完成：

使用 <video> 捕捉运动图像，并创建了 "Take Picture" 按钮捕捉图像以拼接静止图像。还加入了缩放功能。

问题：

图像已镜像。因此，当用户向左移动时，视频源中的图像将向右移动，当用户向左移动时，视频源中的图像将向右移动。

我已经更改了以下 transform:rotateY()，但是，它仍然给我相同的功能，即当用户向左移动时，相机源中的图像向右移动，反之亦然。因此，我做错了什么以及如何纠正以下问题。

.camera_feed_flip {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  /* Safari and Chrome */
  -moz-transform: rotateY(0deg);
  /* Firefox */
  transform: scale(1.0);
}

<div id="CameraFeed" align="center" style="position:absolute; widths:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=7; top:600px; left:0px; ">

  <video id="video" width="1300px" height="1350" class="camera_feed_flip" style="position:absolute; z-index:16; top: 600px; left:-110px" autoplay></video>
</div>

Answer 1

我根本不知道变换 css，但令我印象深刻的是您将图像旋转了 0 度（因此根本没有改变它）。不应该是180度吗？

.camera_feed_flip {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  /* Safari and Chrome */
  -moz-transform: rotateY(180deg);
  /* Firefox */
  transform: scale(1.0);
}

但是我从来没有用过这个css。我可能不准确，因此给你一个错误的解决方案 - 如果是这样的话，我很抱歉 :)

<video> 图像源是镜像，如何将图像转换为非镜像

<video> image feed is in mirror image, how to transform image to non-mirror image

html

css

image

html5-video

ip-camera