映像リアタイ変換 #3

Shiryu-Toujima-1f10210346 · 2023-08-17T08:31:05Z

ばくしんちです

カメラの映像をリアタイで処理してドット化､rgbを二次元配列のcolor[][]に保存できるものです
ドットの大きさ､FPSはいじれます

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Video Processing</title>
</head>
<body>
  <video id="video" autoplay></video>
  <canvas id="canvas"></canvas>

  <script>
    const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const blockWidth = 10;
const blockHeight = 10;
const fps = 10;

async function startCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;
}

function processFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  const numBlocksX = Math.floor(canvas.width / blockWidth);
  const numBlocksY = Math.floor(canvas.height / blockHeight);
  const colors = [];
  for (let y = 0; y < numBlocksY; y++) {
    colors[y] = [];
    for (let x = 0; x < numBlocksX; x++) {
      const centerX = x * blockWidth + Math.floor(blockWidth / 2);
      const centerY = y * blockHeight + Math.floor(blockHeight / 2);
      const pixelData = ctx.getImageData(centerX, centerY, 1, 1).data;
      const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
      colors[y][x] = color;
      ctx.fillStyle = color;
      ctx.fillRect(x * blockWidth, y * blockHeight, blockWidth, blockHeight);
    }
  }
  setTimeout(() => {
    requestAnimationFrame(processFrame);
    console.log("colors table");
    console.table(colors);
  }, 1000 / fps);
 
}

video.addEventListener('play', () => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  processFrame();
});

startCamera();
  </script>
</body>
</html>

Shiryu-Toujima-1f10210346 · 2023-08-17T08:40:02Z

ベースができてきたら適した場所にPRします

Shiryu-Toujima-1f10210346 · 2023-08-17T12:39:07Z

たんに背景に生映像投射しといて数字がくり抜かれたマスを配置したほうがいいのではという案が松田さんから出ました
テストページつくってみてどっちがいいかをみよう

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

映像リアタイ変換 #3

映像リアタイ変換 #3

Shiryu-Toujima-1f10210346 commented Aug 17, 2023 •

edited

Loading

Shiryu-Toujima-1f10210346 commented Aug 17, 2023

Shiryu-Toujima-1f10210346 commented Aug 17, 2023

映像リアタイ変換 #3

映像リアタイ変換 #3

Comments

Shiryu-Toujima-1f10210346 commented Aug 17, 2023 • edited Loading

Shiryu-Toujima-1f10210346 commented Aug 17, 2023

Shiryu-Toujima-1f10210346 commented Aug 17, 2023

Shiryu-Toujima-1f10210346 commented Aug 17, 2023 •

edited

Loading