/**
 * Video Stream Layer
 * https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
 */

function fetchVideoStream(videoEle) {
  let constraints = { video: { facingMode: 'environment' } };
  if (navigator.mediaDevices !== undefined) {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        videoEle.srcObject = stream;
        videoEle.play();
        console.log('videoEle =', videoEle);
        console.log('stream =', stream);
        // ???
        // videoStream = stream;
        // Initiate frame capture - Processing Layer.
      })
      .catch((error) => {
        console.debug(error);
        console.warn(`Failed to access the stream:${error.name}`);
      });
  } else {
    console.warn(`getUserMedia API not supported!!`);
  }
}

/**
 * Processing Layer - Frame Capture
 * https://developer.mozilla.org/docs/Web/API/Canvas_API/Manipulating_video_using_cacanvas
 */

async function captureFrames(videoEle, canvasEle, canvasCtx) {
  if (videoEle.readyState === videoEle.HAVE_ENOUGH_DATA) {
    const canvasHeight = (canvasEle.height = videoEle.videoHeight);
    const canvasWidth = (canvasEle.width = videoEle.videoWidth);
    canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);
    // Transfer the `canvasEle` to the decoder for barcode detection.
    const result = await decodeBarcode(canvasEle);
    console.log('result ', result);
  } else {
    console.log('Video feed not available yet');
  }
}

/**
 * Barcode Decoder with Shape Detection API
 * https://web.dev/shape-detection/
 */
async function decodeBarcode(canvas) {
  const formats = [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e',
  ];
  const barcodeDetector = new window.BarcodeDetector({
    formats,
  });
  try {
    const barcodes = await barcodeDetector.detect(canvas);
    console.log(barcodes);
    return barcodes.length > 0 ? barcodes[0]['rawValue'] : undefined;
  } catch (e) {
    throw e;
  }
}



function testBarcodeDetector() {
  // Feature detection.
  if (!('BarcodeDetector' in window)) {
    return false;
  } else {
    // Check supported barcode formats.
    BarcodeDetector.getSupportedFormats()
    .then((formats) => {
      console.log('formats =', formats, typeof formats)
      for (const [i, format] of formats.entries()) {
        // console.log(`BarcodeDetector SupportedFormat ${i} = ${format}`);
      }
    });
    return true;
  }
}


const app = (videoId = 'video', canvasId = 'canvas') => {
  const flag = testBarcodeDetector();
  if(!flag) {
    return;
  }
  console.log('BarcodeDetector flag =', flag);
  const videoEle = document.getElementById(videoId);
  const canvasEle = document.getElementById(canvasId);
  const canvasCtx = canvasEle.getContext('2d');
  // console.log('videoEle =', videoEle);
  // console.log('canvasEle, canvasCtx =', canvasEle, canvasCtx);
  fetchVideoStream(videoEle);
  setTimeout(() => {
    captureFrames(videoEle, canvasEle, canvasCtx);
    decodeBarcode(canvasEle);
    // decodeBarcode(canvasCtx);
  }, 3000);
}

export default app;
// app('video', 'canvas');

/*


Web API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition


*/

@@ -476,16 +476,170 @@
 tream);%0A
+        console.log('%5Cn videoEle', videoEle);%0A        console.log('%E2%9C%85%E2%9C%85 videoEle.videoHeight,  videoEle.height =', videoEle.videoHeight,  videoEle.height);%0A
         
@@ -1145,16 +1145,192 @@
 sCtx) %7B%0A
+  console.log('%5Cn %E2%9D%8C videoEle', videoEle);%0A  console.log('videoEle.readyState =', videoEle.readyState);%0A  console.log('videoEle.HAVE_ENOUGH_DATA =', videoEle.HAVE_ENOUGH_DATA);%0A
   if (vi
@@ -1379,24 +1379,27 @@
 _DATA) %7B%0A   
+ //
  const canva
@@ -1450,24 +1450,27 @@
 Height);%0A   
+ //
  const canva
@@ -1527,42 +1527,524 @@
     
-canvasCtx.drawImage(videoEle, 0, 0
+// const canvasHeight = videoEle.videoHeight;%0A    // const canvasWidth = videoEle.videoWidth;%0A    console.log('%5Cn videoEle', videoEle);%0A    console.log('%E2%9C%85 videoEle.videoHeight,  videoEle.height =', videoEle.videoHeight,  videoEle.height);%0A    console.log('canvasEle.height, canvasEle.width', canvasEle.height, canvasEle.width);%0A    const canvasHeight = videoEle.height;%0A    const canvasWidth = videoEle.width;%0A    canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);%0A    console.log('canvasCtx', canvasCtx
 , ca
@@ -3695,16 +3695,205 @@
 ('2d');%0A
+  // width=%22400%22 height=%22300%22%0A  // canvasCtx.width  = 400;%0A  // canvasCtx.height = 300;%0A  // canvasCtx.canvas.width  = window.innerWidth;%0A  // canvasCtx.canvas.height = window.innerHeight;%0A
   // con

Update app.js