How do I horizontally flip the video?

auduno / headtrackr

Javascript library for headtracking via webcam and WebRTC/getUserMedia

3.69k stars 504 forks source link

How do I horizontally flip the video? #1

Closed rafaelfaria closed 11 years ago

rafaelfaria commented 11 years ago

How do i mirror image/horizontally flip webcam???

auduno commented 11 years ago

I didn't include mirroring the video input as a setting in headtrackr, but it's very simple to flip the video with css, for instance:

video {
  -o-transform : scaleX(-1);
  -moz-transform : scaleX(-1);
  -webkit-transform : scaleX(-1);
  -ms-transform: scaleX(-1);
  transform : scaleX(-1);
}

Note that this won't affect the output positions of headtrackr - if you're drawing something on a canvas overlay, like in the facekat demo, you'll need to flip this as well.

rafaelfaria commented 11 years ago

Cool. It worked like a charm! :)