1

I am attempting to flip in image captured from the webcam stream. The webcam view in the CSS is flipped, but when I take a snapshot, it takes it directly from the camera stream. I am doing this for OCR recognition. (TesseractJS)

Capture Function: 

function captureSnapshot() {
  if (null != cameraStream) {
    var ctx = capture.getContext("2d");
    var img = new Image();

    ctx.drawImage(stream, 0, 0, capture.width, capture.height);

    img.src = capture.toDataURL("image/png");
    img.width = 240;

    snapshot.innerHTML = "";

    snapshot.appendChild(img);
  }
}
Full JavaScript 
// The buttons to start & stop stream and to capture the image
var btnStart = document.getElementById("btn-start");
var btnStop = document.getElementById("btn-stop");
var btnCapture = document.getElementById("btn-capture");

// The stream & capture
var stream = document.getElementById("stream");
var capture = document.getElementById("capture");
var snapshot = document.getElementById("snapshot");

// The video stream
var cameraStream = null;

// Attach listeners
btnStart.addEventListener("click", startStreaming);
btnStop.addEventListener("click", stopStreaming);
// Start Streaming
function startStreaming() {
  var mediaSupport = "mediaDevices" in navigator;

  if (mediaSupport && null == cameraStream) {
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(function(mediaStream) {
        cameraStream = mediaStream;

        stream.srcObject = mediaStream;

        stream.play();
      })
      .catch(function(err) {
        console.log("Unable to access camera: " + err);
      });
  } else {
    alert("Your browser does not support media devices.");

    return;
  }
}
// Stop Streaming
function stopStreaming() {
  if (null != cameraStream) {
    var track = cameraStream.getTracks()[0];

    track.stop();
    stream.load();

    cameraStream = null;
  }
}
btnCapture.addEventListener("click", captureSnapshot);

function captureSnapshot() {
  if (null != cameraStream) {
    var ctx = capture.getContext("2d");
    var img = new Image();

    ctx.drawImage(stream, 0, 0, capture.width, capture.height);

    img.src = capture.toDataURL("image/png");
    img.width = 240;

    snapshot.innerHTML = "";

    snapshot.appendChild(img);
  }
}
function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(",")[1]);
  var mimeString = dataURI
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];

  var buffer = new ArrayBuffer(byteString.length);
  var data = new DataView(buffer);

  for (var i = 0; i < byteString.length; i++) {
    data.setUint8(i, byteString.charCodeAt(i));
  }

  return new Blob([buffer], { type: mimeString });
}

function recognizeText(img) {
  Tesseract.recognize(
    "https://tesseract.projectnaptha.com/img/eng_bw.png",
    "eng",
    { logger: m => console.log(m) }
  ).then(({ data: { text } }) => {
    console.log(text);
  });
}
CSS Flip (I don't know if this matters): 

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
Cerquaas
  • 11
  • 1
  • Does this answer your question? [How to horizontally flip an image](https://stackoverflow.com/questions/35973441/how-to-horizontally-flip-an-image) – Emiel Zuurbier Dec 20 '21 at 22:34
  • I've looked at it. I have an img variable, that is set to a png. I want to manipulate that. – Cerquaas Dec 20 '21 at 22:36
  • I understand. That also means that the link suggested is still relevant. You still need to *draw* the image on the canvas flipped. This cannot be done with CSS. – Emiel Zuurbier Dec 20 '21 at 22:45
  • You seem to use canvas so flip it on canvas https://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5 – epascarello Dec 20 '21 at 22:47

1 Answers1

0

This code below you have should work for css. i would recommend just adding a class to the image when you instantiate it. that class in css will use that of below.

Is this something you have tried?

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
Isaac Lyne
  • 190
  • 1
  • 3
  • 18