react-video-recorder
react-video-recorder copied to clipboard
Video gets flipped in preview.
Hi,
- While recording I need it to be like a mirror.
- After recording, it must play exactly what I recorded and not flip just like we have normally in our smartphones while making videos.
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
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 ?
@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 is this working ?