How to read qr-code from video , without passing deviceId in zxing's js library

Question

The decodeFromInputVideoDevice function only works only when we pass the deviceID to it . It there any other function where could directly pass the camera stream , without passing the deviceId

I cannot any method the specific use case in the docs

Answer 1

To read QR codes from a video stream using ZXing's JavaScript library, you can use the "getUserMedia" API to access the camera and create a video stream, and then use the "canvas" element to capture images from the video stream.

// Create a video element and add it to the page
var video = document.createElement('video');
document.body.appendChild(video);

// Get the user media
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // Set the video source to the stream
    video.srcObject = stream;
    video.play();

    // Create a canvas element to capture images from the video stream
    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var ctx = canvas.getContext('2d');

    // Start decoding QR codes
    const codeReader = new ZXing.BrowserQRCodeReader();
    codeReader.decodeFromVideoDevice(undefined, 'video', (result, error) => {
      if (result) {
        // Do something with the decoded result
        console.log(result.text);
      }
      if (error) {
        console.error(error);
      }
    });
  })
  .catch(function(err) {
    console.error(err);
  });