HTML5 Canvas-এ ভিডিও ডিসপ্লে/রেন্ডার করা (Real-time)

`drawImage(video, ...)` দিয়ে প্রতিটি ফ্রেম ক্যানভাসে কপি করুন

`

কোড উদাহরণ

 {
  function renderFrame() {
    if (video.paused || video.ended) return;

    // ভিডিও ফ্রেম ক্যানভাসে ড্র
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // এখানে কাস্টম ইফেক্ট যোগ করা যায়:
    // ctx.filter = 'grayscale(100%)';
    // ctx.globalCompositeOperation = 'difference';

    requestAnimationFrame(renderFrame);
  }
  renderFrame();
});

// অটো-প্লে হ্যান্ডলিং (ব্রাউজার পলিসি)
video.play().catch(() => {
  // ইউজার ইন্টারঅ্যাকশনের انتظار
  document.body.addEventListener('click', () => video.play(), { once: true });
});
</script>

কী পয়েন্টস

• crossorigin="anonymous" — CORS ইমেজ/ভিডিও ক্যানভাসে ড্র করলে tainting রোধে।
• playsinline — iOS-এ ফুলস্ক্রিন না যেতে দেয়।
• requestAnimationFrame — ব্রাউজার রিফ্রেশ রেটের সাথে সিঙ্ক (৬০fps)।
• পারফরম্যান্স: বড় রেজোলিউশনে `drawImage` এক্সপেনসিভ; `OffscreenCanvas` + Worker বিবেচনা করুন।

অফস্ক্রিন ক্যানভাস (Worker-এ ভিডিও প্রসেসিং)