Update index.html

index.html

@@ -22,32 +22,34 @@
         const video = document.getElementById("video");
         const canvas = document.getElementById("canvas");
         const ctx = canvas.getContext("2d");
+        let pipWindow;
+        let img;
 
         async function startCapture() {
             try {
-                const pipWindow = await documentPictureInPicture.requestWindow();
+                pipWindow = await documentPictureInPicture.requestWindow();
                 const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
                 video.srcObject = stream;
-                video.onloadedmetadata = async () => {
+                video.onloadedmetadata = () => {
                     canvas.width = video.videoWidth;
                     canvas.height = video.videoHeight;
-                    captureFrame(pipWindow);
+                    img = document.createElement("img");
+                    img.style.width = "100%";
+                    img.style.height = "100%";
+                    img.style.objectFit = "cover";
+                    pipWindow.document.body.appendChild(img);
+                    updateFrame();
                 };
             } catch (err) {
                 console.error("エラー: ", err);
             }
         }
 
-        async function captureFrame(pipWindow) {
+        function updateFrame() {
+            if (!pipWindow || pipWindow.closed) return;
             ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            canvas.toBlob(async (blob) => {
-                const img = document.createElement("img");
-                img.src = URL.createObjectURL(blob);
-                pipWindow.document.body.appendChild(img);
-                img.style.width = "100%";
-                img.style.height = "100%";
-                img.style.objectFit = "cover";
-            }, "image/png");
+            img.src = canvas.toDataURL("image/png");
+            requestAnimationFrame(updateFrame);
         }
 
         startButton.addEventListener("click", startCapture);