Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>画面キャプチャをPiPで表示</title> | |
| <style> | |
| img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="startCapture">画面キャプチャ開始</button> | |
| <video id="video" autoplay hidden></video> | |
| <canvas id="canvas" style="display:none;"></canvas> | |
| <script> | |
| const startButton = document.getElementById("startCapture"); | |
| const video = document.getElementById("video"); | |
| const canvas = document.getElementById("canvas"); | |
| const ctx = canvas.getContext("2d"); | |
| let pipWindow; | |
| let img; | |
| async function startCapture() { | |
| try { | |
| pipWindow = await documentPictureInPicture.requestWindow(); | |
| const stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); | |
| video.srcObject = stream; | |
| video.onloadedmetadata = () => { | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| 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); | |
| } | |
| } | |
| function updateFrame() { | |
| if (!pipWindow || pipWindow.closed) return; | |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); | |
| img.src = canvas.toDataURL("image/png"); | |
| requestAnimationFrame(updateFrame); | |
| } | |
| startButton.addEventListener("click", startCapture); | |
| </script> | |
| </body> | |
| </html> | |