Camera Mirror Effect

OpenCV, or Open Source Computer Vision Library, is an open-source computer vision and machine learning software library. It provides various tools and functions for real-time computer vision applications. OpenCV was originally developed by Intel in 1999 and has since been continually updated and expanded by a community of contributors.

OpenCV.js is a JavaScript binding for OpenCV, which allows you to run OpenCV algorithms in the browser. OpenCV.js is generated by compiling the C++ code of OpenCV into JavaScript using Emscripten, a tool for compiling C and C++ code into JavaScript. More about OpenCV you can find here.

To read a user's camera feed in a web browser, you can use the MediaDevices API. In this example the MediaStream object from camera passed to <video> tag as srcObject property. Later, frames from the video are captured with cv.VideoCapture and handled with cv. In this demo, the mirror effect is simply achieved by two OpenCV methods: first, converting image to grayscale, and then adding a border to the edges.

cv.cvtColor(sourceMat, grayMat, cv.COLOR_RGBA2GRAY);
cv.copyMakeBorder(
  grayMat,
  borderMat,
  this.height / 2,
  this.height / 2,
  this.width / 2,
  this.width / 2,
  cv.BORDER_DEFAULT,
  s
);