<video> flux d'image est l'image miroir, comment transformer une image à miroir non

Question

fonctionnalité:

utilisateur de se tenir devant la caméra et prendre une photo.

ce qui a été fait:

Utilisation faite d'un <video> pour capturer l'image de mouvement et ont créé un bouton « Prendre une photo » pour capturer l'image d'imposer une image fixe. Ont également incorporé une fonctionnalité de zoom.

Problème:

L'image se reflète. Par conséquent, lorsque l'utilisateur se déplace à gauche, l'image dans le flux vidéo se déplace vers la droite et lorsque l'utilisateur se déplace à gauche, l'image dans le flux vidéo se déplace vers la droite.

J'ai changé le suivant transform:rotateY(), cependant, il me donne toujours la même fonctionnalité où lorsque l'utilisateur se déplace à gauche, l'image dans le flux de la caméra se déplace vers la droite et vice versa. Par conséquent, qu'ai-je fait de mal et comment puis-je rectifier le problème suivant.

.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

Je ne sais pas la transformation css du tout, mais il me semble que vous faites pivoter l'image de 0 degré (et par conséquent ne change pas du tout). Ne devrait-il pas être de 180 degrés?

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

mais je n'ai jamais utilisé ce CSS. Je peux ne pas être précis et donc gvinig vous une solution incorrecte - désolé si c'est le cas :)