react-video-recorder icon indicating copy to clipboard operation
react-video-recorder copied to clipboard

Video gets flipped in preview.

Open dolly-kumar opened this issue 4 years ago • 4 comments

Hi,

  1. While recording I need it to be like a mirror.
  2. After recording, it must play exactly what I recorded and not flip just like we have normally in our smartphones while making videos.

dolly-kumar avatar Feb 11 '21 11:02 dolly-kumar

Apparently it's MediaRecorder api's fault

the isFlipped property "cheats" by using a css transform on the video element, it doesn't actually alter the video

Orsucciu avatar Aug 27 '21 22:08 Orsucciu

I see in video-recorder.js that there is a condition to flip the vide element when the isFlipped property is checked, but it doesn't reach in even though i checked it.


var Video = _styledComponents["default"].video.withConfig({
  displayName: "video-recorder__Video",
  componentId: "sc-7k20rv-2"
})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-height:100%;min-width:100%;width:100%;height:100%;object-fit:cover;", ";", ";"], function (props) {
  return props.isFlipped && (0, _styledComponents.css)(["transform:translate(-50%,-50%) scaleX(-1);"]); 

What exactly is the last line doing ?

Orsucciu avatar Aug 30 '21 14:08 Orsucciu

@dolly-kumar well, if like me you checked isFlipped but the preview is still in the wrong direction, you can as a temp fix edit the line n°85 of the video-recorder.js file to have transform:translate(-50%,-50%) scaleX(-1); unconditionally.

Orsucciu avatar Aug 30 '21 14:08 Orsucciu

@Orsucciu is this working ?

gurupal avatar Sep 22 '22 08:09 gurupal