Spaces:
Running
Running
| const cfg = window.TELEARN_PLAYER || {}; | |
| const className = cfg.className || ""; | |
| const studentName = cfg.studentName || ""; | |
| const studentToken = cfg.studentToken || ""; | |
| const projectName = cfg.projectName || ""; | |
| const projectType = cfg.projectType || ""; | |
| const externalUrl = cfg.externalUrl || ""; | |
| const apkName = cfg.apkName || ""; | |
| const apkSize = cfg.apkSize || ""; | |
| const appetizeKey = cfg.appetizeKey || ""; | |
| const viewOnly = !!cfg.viewOnly; | |
| const sessionTimeoutSec = cfg.sessionTimeoutSec || 900; | |
| const idleWarningSec = cfg.idleWarningSec || 600; | |
| const idleTimeoutSec = cfg.idleTimeoutSec || 720; | |
| const heartbeatIntervalSec = cfg.heartbeatIntervalSec || 20; | |
| const viewportFrame = document.getElementById("viewport-frame"); | |
| const focusPrompt = document.getElementById("focus-prompt-el"); | |
| const consoleLogs = document.getElementById("console-logs"); | |
| const statusWrapper = document.getElementById("server-status"); | |
| const statusText = document.getElementById("status-text"); | |
| const btnToggleWebcam = document.getElementById("btn-toggle-webcam"); | |
| const webcamVideo = document.getElementById("webcam-video"); | |
| const webcamCanvas = document.getElementById("webcam-canvas"); | |
| const webcamCtx = webcamCanvas.getContext("2d"); | |
| const idleDialog = document.getElementById("idle-dialog"); | |
| const idleCountdown = document.getElementById("idle-countdown"); | |
| const btnContinueSession = document.getElementById("btn-continue-session"); | |
| let socket = null; | |
| let oldUrl = null; | |
| let webcamStream = null; | |
| let webcamInterval = null; | |
| let isWebcamStreaming = false; | |
| let isFocused = false; | |
| let heartbeatTimer = null; | |
| let idleCountdownTimer = null; | |
| let idleDeadline = 0; | |
| let lastActivitySentAt = 0; | |
| let stopReason = null; | |
| function sendSocketMessage(message) { | |
| if (!socket || socket.readyState !== WebSocket.OPEN) return false; | |
| socket.send(JSON.stringify(message)); | |
| return true; | |
| } | |
| function sendActivity(force = false) { | |
| const now = Date.now(); | |
| if (!force && now - lastActivitySentAt < 10000) return; | |
| if (sendSocketMessage({ type: "activity" })) { | |
| lastActivitySentAt = now; | |
| hideIdleWarning(); | |
| } | |
| } | |
| function startHeartbeat() { | |
| stopHeartbeat(); | |
| heartbeatTimer = setInterval(() => { | |
| sendSocketMessage({ type: "heartbeat" }); | |
| }, heartbeatIntervalSec * 1000); | |
| } | |
| function stopHeartbeat() { | |
| if (heartbeatTimer) { | |
| clearInterval(heartbeatTimer); | |
| heartbeatTimer = null; | |
| } | |
| } | |
| function formatCountdown(seconds) { | |
| const safeSeconds = Math.max(0, Math.ceil(seconds)); | |
| const minutes = Math.floor(safeSeconds / 60); | |
| return `${minutes}:${String(safeSeconds % 60).padStart(2, "0")}`; | |
| } | |
| function showIdleWarning(remainingSec) { | |
| if (!idleDialog) return; | |
| idleDeadline = Date.now() + Math.max(0, remainingSec) * 1000; | |
| idleDialog.hidden = false; | |
| updateIdleCountdown(); | |
| if (idleCountdownTimer) clearInterval(idleCountdownTimer); | |
| idleCountdownTimer = setInterval(updateIdleCountdown, 250); | |
| if (btnContinueSession) btnContinueSession.focus(); | |
| } | |
| function updateIdleCountdown() { | |
| if (!idleCountdown) return; | |
| idleCountdown.textContent = formatCountdown((idleDeadline - Date.now()) / 1000); | |
| } | |
| function hideIdleWarning() { | |
| if (idleDialog) idleDialog.hidden = true; | |
| if (idleCountdownTimer) { | |
| clearInterval(idleCountdownTimer); | |
| idleCountdownTimer = null; | |
| } | |
| } | |
| function setupActivityTracking() { | |
| ["pointerdown", "pointermove", "keydown", "touchstart", "scroll"].forEach((eventName) => { | |
| window.addEventListener(eventName, () => sendActivity(), { passive: true }); | |
| }); | |
| document.addEventListener("visibilitychange", () => { | |
| if (!document.hidden) sendActivity(true); | |
| }); | |
| if (btnContinueSession) { | |
| btnContinueSession.addEventListener("click", () => sendActivity(true)); | |
| } | |
| } | |
| // Auto-transform Scratch URLs into embed links | |
| function formatEmbedUrl(url) { | |
| if (url.includes("scratch.mit.edu/projects/")) { | |
| const matches = url.match(/\/projects\/(\d+)/); | |
| if (matches && matches[1]) { | |
| return `https://scratch.mit.edu/projects/${matches[1]}/embed`; | |
| } | |
| } | |
| return url; | |
| } | |
| // Initialize view based on project type | |
| function initViewport() { | |
| const layout = document.getElementById("player-layout"); | |
| const sidePanel = document.getElementById("side-panel"); | |
| if (projectType === "python") { | |
| if (viewOnly) { | |
| statusWrapper.classList.remove("status-connecting"); | |
| statusWrapper.classList.add("status-idle"); | |
| statusText.innerText = "僅供預覽"; | |
| document.getElementById("python-device-section").style.display = "none"; | |
| const img = document.createElement("div"); | |
| img.style.cssText = "color:#94a3b8;text-align:center;padding:2rem;max-width:28rem;line-height:1.6;"; | |
| const title = document.createElement("h3"); | |
| title.textContent = projectName; | |
| title.style.cssText = "color:#fff;margin-bottom:0.75rem;"; | |
| const identity = document.createElement("p"); | |
| identity.textContent = `班級：${className}｜學生：${studentName}`; | |
| const note = document.createElement("p"); | |
| note.style.cssText = "margin-top:1rem;font-size:0.9rem;"; | |
| note.append("此連結為「僅預覽」模式，不會在伺服器上執行程式。若要實際操作，請使用不含 "); | |
| const query = document.createElement("code"); | |
| query.textContent = "?view=1"; | |
| note.append(query, " 的連結。"); | |
| img.append(title, identity, note); | |
| viewportFrame.appendChild(img); | |
| appendConsole("[系統] view=1 僅預覽模式，未啟動執行器。\n"); | |
| } else { | |
| const img = document.createElement("img"); | |
| img.id = "game-screen"; | |
| img.src = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480'><rect width='100%' height='100%' fill='%23000'/><text x='50%' y='50%' font-size='20' fill='%2394a3b8' text-anchor='middle' font-family='sans-serif'>正在與伺服器建立連接...</text></svg>"; | |
| img.tabIndex = 1; | |
| viewportFrame.appendChild(img); | |
| focusPrompt.style.display = "flex"; | |
| setLoading(true, "正在與伺服器建立連線…", "啟動 headless 執行器與模型載入中"); | |
| setupPythonControls(img); | |
| connectWebSocket(); | |
| } | |
| } else if (projectType === "apk") { | |
| // Hide Python sections, show APK sections | |
| document.getElementById("python-device-section").style.display = "none"; | |
| document.getElementById("python-terminal-section").style.display = "none"; | |
| statusWrapper.style.display = "none"; | |
| const apkInfoSec = document.getElementById("apk-info-section"); | |
| apkInfoSec.style.display = "flex"; | |
| // Setup downloads & sizes | |
| const dlUrl = window.location.origin + `/static_projects/${encodeURIComponent(studentToken)}/${encodeURIComponent(projectName)}/${encodeURIComponent(apkName)}`; | |
| document.getElementById("btn-apk-download").href = dlUrl; | |
| document.getElementById("apk-file-label").innerText = apkName; | |
| document.getElementById("apk-size-label").innerText = apkSize ? `檔案大小: ${apkSize}` : "已偵測到安裝檔"; | |
| // Generate QR code | |
| const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(dlUrl)}`; | |
| const apkQrImage = document.createElement("img"); | |
| apkQrImage.src = qrUrl; | |
| apkQrImage.alt = "QR Code"; | |
| document.getElementById("apk-qr-image").replaceChildren(apkQrImage); | |
| // Setup Phone mockup | |
| viewportFrame.classList.add("iframe-mode"); | |
| viewportFrame.style.background = "transparent"; | |
| viewportFrame.style.boxShadow = "none"; | |
| viewportFrame.style.border = "none"; | |
| viewportFrame.style.padding = "0"; | |
| const phone = document.createElement("div"); | |
| phone.className = "phone-mockup"; | |
| const speaker = document.createElement("div"); | |
| speaker.className = "phone-speaker"; | |
| phone.appendChild(speaker); | |
| const camera = document.createElement("div"); | |
| camera.className = "phone-camera"; | |
| phone.appendChild(camera); | |
| const statusBar = document.createElement("div"); | |
| statusBar.className = "phone-status-bar"; | |
| statusBar.innerHTML = ` | |
| <span>14:30</span> | |
| <div style="display:flex; gap: 4px; align-items:center;"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 19.4c3.9 3.9 10.2 3.9 14.1 0l-1.62-1.62C18.26 16.07 19 14.12 19 12c0-4.97-4.03-9-9-9z"/></svg> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg> | |
| </div> | |
| `; | |
| phone.appendChild(statusBar); | |
| const screen = document.createElement("div"); | |
| screen.className = "phone-screen"; | |
| if (appetizeKey) { | |
| const iframe = document.createElement("iframe"); | |
| iframe.className = "phone-screen-iframe"; | |
| iframe.src = `https://appetize.io/embed/${encodeURIComponent(appetizeKey)}?device=pixel4&scale=auto&autoplay=false&orientation=portrait&deviceColor=black`; | |
| iframe.referrerPolicy = "no-referrer"; | |
| screen.appendChild(iframe); | |
| } else { | |
| screen.innerHTML = ` | |
| <div class="android-icon-wrapper"> | |
| <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ef8068" stroke-width="1.8"> | |
| <path d="M4 10v6m16-6v6M6 18c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9H6v9zm3-13l-1.5-2M15 5l1.5-2M9 13v.01M15 13v.01" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 id="apk-project-title" style="font-weight: 800; font-size: 1.25rem; color: #ffffff; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3);"></h4> | |
| <p style="font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.4; padding: 0 1rem;">本專案為 Android 應用程式</p> | |
| </div> | |
| <div style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); padding: 0.8rem; border-radius: 12px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px;"> | |
| <span style="font-size: 0.72rem; color: var(--text-muted); line-height: 1.3;">掃描此條碼以安裝至您的實體手機</span> | |
| <div id="apk-qr-slot"></div> | |
| </div> | |
| <a id="apk-download-link" class="btn-launch btn-launch-apk" style="text-decoration: none; width: 100%; font-size: 0.82rem;" download> | |
| 下載 APK 安裝檔 | |
| </a> | |
| `; | |
| screen.querySelector("#apk-project-title").textContent = projectName; | |
| const qrImage = document.createElement("img"); | |
| qrImage.src = qrUrl; | |
| qrImage.alt = "QR Code"; | |
| qrImage.style.cssText = "width:100px;height:100px;border-radius:6px;border:4px solid #fff;display:block;"; | |
| screen.querySelector("#apk-qr-slot").append(qrImage); | |
| screen.querySelector("#apk-download-link").href = dlUrl; | |
| } | |
| phone.appendChild(screen); | |
| viewportFrame.appendChild(phone); | |
| if (appetizeKey) { | |
| const helper = document.createElement("div"); | |
| helper.style.marginTop = "1rem"; | |
| helper.style.fontSize = "0.85rem"; | |
| helper.style.color = "var(--text-muted)"; | |
| helper.style.textAlign = "center"; | |
| helper.style.maxWidth = "320px"; | |
| helper.style.lineHeight = "1.5"; | |
| helper.append("⚠️ 因 Appetize.io 免費方案限制內嵌功能，若畫面顯示「未啟用內嵌」，請 "); | |
| const openAppetize = document.createElement("a"); | |
| openAppetize.href = `https://appetize.io/app/${encodeURIComponent(appetizeKey)}`; | |
| openAppetize.target = "_blank"; | |
| openAppetize.rel = "noopener noreferrer"; | |
| openAppetize.textContent = "點此在新分頁中打開模擬器"; | |
| openAppetize.style.cssText = "color:#ef8068;text-decoration:underline;font-weight:600;"; | |
| helper.append(openAppetize, "。"); | |
| viewportFrame.appendChild(helper); | |
| } | |
| } else { | |
| // Web based game (HTML or External Link) | |
| // Hide side controls and console log panel, render full viewport width | |
| sidePanel.style.display = "none"; | |
| layout.style.gridTemplateColumns = "1fr"; | |
| statusWrapper.style.display = "none"; | |
| if (projectType === "html") { | |
| viewportFrame.classList.add("iframe-mode"); | |
| const iframe = document.createElement("iframe"); | |
| iframe.className = "iframe-viewport"; | |
| iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-pointer-lock"); | |
| iframe.referrerPolicy = "no-referrer"; | |
| iframe.allow = "autoplay; fullscreen"; | |
| iframe.src = `/static_projects/${encodeURIComponent(studentToken)}/${encodeURIComponent(projectName)}/index.html`; | |
| viewportFrame.appendChild(iframe); | |
| } else if (projectType === "external") { | |
| // MakeCode supports an interactive shared-project page. Use a | |
| // credentialless iframe so the app can load under this | |
| // platform's cross-origin isolation headers. | |
| const isMakeCode = /(^|\.)makecode\.com$/i.test(new URL(externalUrl).hostname); | |
| if (isMakeCode) { | |
| viewportFrame.classList.add("iframe-mode"); | |
| const iframe = document.createElement("iframe"); | |
| iframe.className = "iframe-viewport"; | |
| iframe.allow = "autoplay; fullscreen; gamepad"; | |
| iframe.setAttribute("allowfullscreen", "true"); | |
| iframe.setAttribute("credentialless", ""); | |
| iframe.referrerPolicy = "no-referrer"; | |
| iframe.src = externalUrl; | |
| viewportFrame.appendChild(iframe); | |
| return; | |
| } | |
| // Other external sites may send restrictive frame headers; | |
| // open them directly instead of embedding an iframe. | |
| const card = document.createElement("div"); | |
| card.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:18rem;padding:2rem;text-align:center;color:#e5eefb;"; | |
| const title = document.createElement("h2"); | |
| title.textContent = projectName; | |
| title.style.margin = "0"; | |
| const note = document.createElement("p"); | |
| note.textContent = "此作品位於外部網站，請點擊按鈕開啟。"; | |
| note.style.cssText = "margin:0;color:#94a3b8;"; | |
| const link = document.createElement("a"); | |
| link.href = formatEmbedUrl(externalUrl); | |
| link.target = "_blank"; | |
| link.rel = "noopener noreferrer"; | |
| link.className = "btn-launch btn-launch-html"; | |
| link.textContent = "開啟作品 ↗"; | |
| card.append(title, note, link); | |
| viewportFrame.appendChild(card); | |
| } | |
| } | |
| } | |
| // Connect Pygame/OpenCV WebSocket server | |
| function connectWebSocket() { | |
| const loc = window.location; | |
| const wsProto = loc.protocol === "https:" ? "wss:" : "ws:"; | |
| const wsUrl = `${wsProto}//${loc.host}/ws/play/${encodeURIComponent(studentToken)}/${encodeURIComponent(projectName)}`; | |
| socket = new WebSocket(wsUrl); | |
| socket.binaryType = "blob"; | |
| stopReason = null; | |
| socket.onopen = () => { | |
| statusWrapper.classList.remove("status-stopped", "status-connecting", "status-idle"); | |
| statusWrapper.classList.add("status-running"); | |
| statusText.innerText = "已連線 (運作中)"; | |
| appendConsole("[系統] 連線成功，學生專案已啟動。\n"); | |
| appendConsole(`[系統] 閒置 ${Math.round(idleWarningSec/60)} 分鐘會提醒，${Math.round(idleTimeoutSec/60)} 分鐘後自動釋放名額。\n`); | |
| setLoading(true, "專案執行中…", `閒置 ${Math.round(idleTimeoutSec/60)} 分鐘會自動結束`); | |
| sendActivity(true); | |
| startHeartbeat(); | |
| // Hide loading once first frame or after short delay | |
| setTimeout(() => setLoading(false), 2500); | |
| }; | |
| socket.onmessage = (event) => { | |
| const gameScreen = document.getElementById("game-screen"); | |
| if (event.data instanceof Blob) { | |
| const url = URL.createObjectURL(event.data); | |
| if (gameScreen) { | |
| gameScreen.src = url; | |
| } | |
| if (oldUrl) { | |
| URL.revokeObjectURL(oldUrl); | |
| } | |
| oldUrl = url; | |
| setLoading(false); | |
| } else { | |
| try { | |
| const data = JSON.parse(event.data); | |
| if (data.type === "log") { | |
| appendConsole(data.data); | |
| } else if (data.type === "idle_warning") { | |
| showIdleWarning(data.remaining_sec || 0); | |
| } else if (data.type === "idle_resumed") { | |
| hideIdleWarning(); | |
| } else if (data.type === "status") { | |
| if (["stopped", "timeout", "idle_timeout", "connection_timeout", "error", "busy", "rate_limited"].includes(data.data)) { | |
| setStoppedStatus(data.data); | |
| setLoading(false); | |
| } else if (data.data === "running") { | |
| statusWrapper.classList.remove("status-stopped", "status-connecting", "status-idle"); | |
| statusWrapper.classList.add("status-running"); | |
| statusText.innerText = "已連線 (運作中)"; | |
| } | |
| } | |
| } catch (e) { | |
| console.error("JSON error:", e); | |
| } | |
| } | |
| }; | |
| socket.onclose = () => { | |
| stopHeartbeat(); | |
| hideIdleWarning(); | |
| setStoppedStatus(stopReason); | |
| if (!stopReason) { | |
| appendConsole("\n[系統] 與伺服器的通訊中斷。\n"); | |
| } | |
| }; | |
| socket.onerror = () => { | |
| appendConsole(`\n[系統] 連線錯誤。\n`); | |
| }; | |
| } | |
| function setStoppedStatus(reason) { | |
| if (reason) stopReason = reason; | |
| statusWrapper.classList.remove("status-running", "status-connecting", "status-idle"); | |
| statusWrapper.classList.add("status-stopped"); | |
| const labels = { | |
| stopped: "已停止", | |
| timeout: "已達執行上限", | |
| idle_timeout: "閒置結束", | |
| connection_timeout: "連線已離開", | |
| error: "錯誤", | |
| busy: "名額已滿", | |
| rate_limited: "啟動太頻繁" | |
| }; | |
| statusText.innerText = labels[reason] || "已停止"; | |
| stopWebcamStream(); | |
| stopHeartbeat(); | |
| hideIdleWarning(); | |
| setLoading(false); | |
| } | |
| function setLoading(show, title, sub) { | |
| const el = document.getElementById("loading-overlay"); | |
| if (!el) return; | |
| el.style.display = show ? "flex" : "none"; | |
| const t = document.getElementById("loading-text"); | |
| const s = document.getElementById("loading-sub"); | |
| if (title && t) t.textContent = title; | |
| if (sub && s) s.textContent = sub; | |
| } | |
| function showWebcamDenied(msg) { | |
| const el = document.getElementById("webcam-denied"); | |
| if (!el) return; | |
| el.style.display = "block"; | |
| const m = document.getElementById("webcam-denied-msg"); | |
| if (m && msg) m.textContent = msg; | |
| } | |
| function hideWebcamDenied() { | |
| const el = document.getElementById("webcam-denied"); | |
| if (el) el.style.display = "none"; | |
| } | |
| function restartProject() { | |
| appendConsole("\n[系統] 正在重新啟動專案...\n"); | |
| if (socket) { | |
| socket.close(); | |
| } | |
| setTimeout(connectWebSocket, 1000); | |
| } | |
| function stopProjectElegant() { | |
| appendConsole("\n[系統] 正在發送退出訊號並結束專案...\n"); | |
| if (projectType === "python" && socket && socket.readyState === WebSocket.OPEN) { | |
| socket.send(JSON.stringify({ | |
| type: "pygame_quit" | |
| })); | |
| // Wait 1.5s before closing to let Pygame script do graceful cleanup | |
| setTimeout(() => { | |
| window.close(); | |
| }, 1500); | |
| } else { | |
| window.close(); | |
| } | |
| } | |
| function appendConsole(text) { | |
| if (consoleLogs) { | |
| consoleLogs.textContent += text; | |
| consoleLogs.scrollTop = consoleLogs.scrollHeight; | |
| } | |
| } | |
| function clearConsole() { | |
| if (consoleLogs) consoleLogs.textContent = ""; | |
| } | |
| // Setup mouse and keyboard input triggers for Python | |
| function setupPythonControls(gameScreen) { | |
| gameScreen.addEventListener("focus", () => { | |
| isFocused = true; | |
| focusPrompt.classList.add("active"); | |
| focusPrompt.querySelector("span").innerText = "控制已啟用 (按 ESC 解除鎖定)"; | |
| }); | |
| gameScreen.addEventListener("blur", () => { | |
| isFocused = false; | |
| focusPrompt.classList.remove("active"); | |
| focusPrompt.querySelector("span").innerText = "點選畫面啟用鍵盤/滑鼠控制"; | |
| }); | |
| gameScreen.addEventListener("click", (e) => { | |
| gameScreen.focus(); | |
| e.preventDefault(); | |
| }); | |
| window.addEventListener("keydown", (e) => { | |
| if (isFocused && ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.code)) { | |
| e.preventDefault(); | |
| } | |
| }); | |
| window.addEventListener("keydown", (event) => { | |
| if (!isFocused || !socket || socket.readyState !== WebSocket.OPEN) return; | |
| if (event.key === "Escape") { | |
| gameScreen.blur(); | |
| return; | |
| } | |
| socket.send(JSON.stringify({ | |
| type: "keydown", | |
| key: event.key, | |
| unicode: event.key.length === 1 ? event.key : "" | |
| })); | |
| socket.send(JSON.stringify({ | |
| type: "cv2key", | |
| keyCode: event.key.charCodeAt(0) || -1 | |
| })); | |
| }); | |
| window.addEventListener("keyup", (event) => { | |
| if (!isFocused || !socket || socket.readyState !== WebSocket.OPEN) return; | |
| socket.send(JSON.stringify({ | |
| type: "keyup", | |
| key: event.key | |
| })); | |
| }); | |
| function sendMouseEvent(type, event) { | |
| if (!socket || socket.readyState !== WebSocket.OPEN) return; | |
| const rect = gameScreen.getBoundingClientRect(); | |
| const scaleX = gameScreen.naturalWidth / rect.width; | |
| const scaleY = gameScreen.naturalHeight / rect.height; | |
| const x = Math.round((event.clientX - rect.left) * scaleX); | |
| const y = Math.round((event.clientY - rect.top) * scaleY); | |
| socket.send(JSON.stringify({ | |
| type: type, | |
| x: x, | |
| y: y, | |
| button: event.button, | |
| btnLeft: (event.buttons & 1) === 1, | |
| btnMiddle: (event.buttons & 4) === 4, | |
| btnRight: (event.buttons & 2) === 2 | |
| })); | |
| } | |
| gameScreen.addEventListener("mousemove", (e) => sendMouseEvent("mousemove", e)); | |
| gameScreen.addEventListener("mousedown", (e) => sendMouseEvent("mousedown", e)); | |
| gameScreen.addEventListener("mouseup", (e) => sendMouseEvent("mouseup", e)); | |
| gameScreen.addEventListener("dragstart", (e) => e.preventDefault()); | |
| } | |
| // ----------------- Webcam Capture ----------------- | |
| if (btnToggleWebcam) { | |
| btnToggleWebcam.addEventListener("click", () => { | |
| if (isWebcamStreaming) { | |
| stopWebcamStream(); | |
| } else { | |
| startWebcamStream(); | |
| } | |
| }); | |
| } | |
| async function startWebcamStream() { | |
| try { | |
| hideWebcamDenied(); | |
| appendConsole("[系統] 正在取得本機相機鏡頭權限...\n"); | |
| if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { | |
| throw new Error("此瀏覽器不支援 getUserMedia，請改用 Chrome/Edge，並以 HTTPS 或 localhost 開啟。"); | |
| } | |
| webcamStream = await navigator.mediaDevices.getUserMedia({ | |
| video: { | |
| width: { ideal: 480, max: 640 }, | |
| height: { ideal: 360, max: 480 }, | |
| frameRate: { ideal: 12, max: 15 } | |
| }, | |
| audio: false | |
| }); | |
| webcamVideo.srcObject = webcamStream; | |
| // Match canvas to lower resolution for upload bandwidth | |
| webcamCanvas.width = 480; | |
| webcamCanvas.height = 360; | |
| btnToggleWebcam.classList.add("active"); | |
| btnToggleWebcam.innerText = "關閉視訊鏡頭"; | |
| isWebcamStreaming = true; | |
| appendConsole("[系統] Webcam 開啟成功，開始串流影格（480p）。\n"); | |
| webcamInterval = setInterval(captureWebcamFrame, 80); | |
| } catch (err) { | |
| console.error("Camera error:", err); | |
| const hint = (err && err.name === "NotAllowedError") | |
| ? "您已拒絕攝影機權限。請點網址列旁的相機圖示允許後再試。若使用遠端網址，需 HTTPS。" | |
| : `開啟鏡頭失敗: ${err.message || err}。請確認使用 HTTPS 或 localhost，並允許瀏覽器存取攝影機。系統將使用虛擬測試影像。`; | |
| appendConsole(`[系統] ${hint}\n`); | |
| showWebcamDenied(hint); | |
| stopWebcamStream(); | |
| } | |
| } | |
| function stopWebcamStream() { | |
| if (webcamInterval) { | |
| clearInterval(webcamInterval); | |
| webcamInterval = null; | |
| } | |
| if (webcamStream) { | |
| webcamStream.getTracks().forEach(track => track.stop()); | |
| webcamStream = null; | |
| } | |
| webcamVideo.srcObject = null; | |
| if (btnToggleWebcam) { | |
| btnToggleWebcam.classList.remove("active"); | |
| btnToggleWebcam.innerText = "啟用 Webcam 影像串流"; | |
| } | |
| isWebcamStreaming = false; | |
| } | |
| function captureWebcamFrame() { | |
| if (!socket || socket.readyState !== WebSocket.OPEN) return; | |
| if (webcamVideo.readyState === webcamVideo.HAVE_ENOUGH_DATA) { | |
| webcamCtx.drawImage(webcamVideo, 0, 0, webcamCanvas.width, webcamCanvas.height); | |
| webcamCanvas.toBlob((blob) => { | |
| if (blob && socket.readyState === WebSocket.OPEN) { | |
| socket.send(blob); | |
| } | |
| }, "image/jpeg", 0.5); | |
| } | |
| } | |
| window.onload = initViewport; | |
| document.getElementById("btn-back")?.addEventListener("click", () => window.close()); | |
| document.getElementById("btn-restart")?.addEventListener("click", restartProject); | |
| document.getElementById("btn-stop")?.addEventListener("click", stopProjectElegant); | |
| document.getElementById("btn-clear-console")?.addEventListener("click", clearConsole); | |
| setupActivityTracking(); | |
| window.onbeforeunload = () => { | |
| stopWebcamStream(); | |
| stopHeartbeat(); | |
| if (socket) socket.close(); | |
| }; | |
| // Setup Terminal Input event listener | |
| const terminalInputField = document.getElementById("terminal-input-field"); | |
| if (terminalInputField) { | |
| terminalInputField.addEventListener("keydown", (event) => { | |
| if (event.key === "Enter") { | |
| const text = terminalInputField.value; | |
| if (socket && socket.readyState === WebSocket.OPEN) { | |
| socket.send(JSON.stringify({ | |
| type: "terminal_input", | |
| data: text | |
| })); | |
| appendConsole(`> ${text}\n`); | |
| terminalInputField.value = ""; | |
| } else { | |
| appendConsole("\n[系統] 錯誤: 無法傳送輸入，連線已中斷。\n"); | |
| } | |
| } | |
| }); | |
| } | |
| // Focus input field when clicking console logs area | |
| const consoleBox = document.getElementById("console-logs"); | |
| if (consoleBox) { | |
| consoleBox.addEventListener("click", () => { | |
| if (terminalInputField) terminalInputField.focus(); | |
| }); | |
| } | |