Flipping video data in JavaScript

Alex Nuzum

Hi. I'm using a js library to record videos from a webcam. I display the webcam stream in a <video> element and flip it in css:
rotateY().

When the library finishes recording, it creates a data URI.
The video is then saved but isn't flipped. How did I "flip" the data URI?

I hope I made sense.
Thanks in advance.

colm_c

You're flipping the display of the video, not the video itself.

Unless you can get the js library to do it, or even the webcam to do it, unlikely to do with with css...

Alex Nuzum

That's what I was trying to explain. Do you know any libraries. I couldn't find any. If I do though I'll post it here., others must surely have this problem.

rd1izb7lvpuksx

Do you want to do this serverside or in the browser? If serverside, then use ffmpeg to hflip or vlip it - there even a JS port (https://github.com/Kagami/ffmpeg.js). It'll be a lot more awkward to do clientside.

rgodard80a

Alternatively, some IP cameras / webcams have an admin page/controls to alter brightness, contrast etc.

And they may have a setting to flip the video for you at source.

Alex Nuzum

Thanks. I'll look into ffmpeg