draw on canvas with camera frame

Canvas element:

🎥 Unable to access video stream (please make sure you have a webcam enabled)

Video element: (with stream object)


      // 希望IHH可以暴露一個輸入參數,參數為一個function,這個function會在每一個frame被呼叫
      // 輸入參數為canvasElement,這樣就可以在每一個frame上畫上自己的東西
      function drawFrameTick(canvasElement) {
          // Draw green background for timestamp
          var timestamp = new Date().getTime();
          canvas.fillStyle = "green";
          canvas.fillRect(0, 0, canvasElement.width, 60); // Adjust the size as needed
  
          // Draw timestamp in the top-left corner
          canvas.font = "45px Arial";
          canvas.fillStyle = "white";
          var x = Math.floor(Math.random() * 1025);
          var y = Math.floor(Math.random() * 1025);
          canvas.fillText('T=' + timestamp + ' ;TBLoc (' + x +','+ y + ') TBMode: 1', 20, 50);
        }