TC
/
arozos-mirror
mirrorاز https://github.com/tobychui/arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Screen Share — Arozcast</title>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/ao_module.js"></script>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --bg:     #0a0a0f;
            --card:   rgba(255,255,255,.05);
            --border: rgba(255,255,255,.1);
            --accent: #b0b0b0;
            --text:   #f0f0f5;
            --text2:  #9090a8;
            --green:  #22c55e;
            --red:    #ef4444;
            --blue:   #3b82f6;
        }
        html, body {
            min-height: 100vh;
            background: var(--bg);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .container { width: 100%; max-width: 480px; }

        .header {
            display: flex; align-items: center; gap: 14px;
            margin-bottom: 32px;
        }
        .brand-icon { width: 42px; height: 42px; }
        .brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
        .brand-sub  { font-size: 12px; color: var(--text2); margin-top: 2px; }

        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 16px;
        }
        .card-title {
            font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
            color: var(--text2); margin-bottom: 16px;
        }

        .code-row { display: flex; gap: 10px; }
        .code-input {
            flex: 1;
            background: rgba(255,255,255,.07);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px;
            color: var(--text);
            font-size: 28px; font-weight: 700; letter-spacing: .25em;
            text-align: center; outline: none;
            transition: border-color .15s;
        }
        .code-input:focus { border-color: rgba(255,255,255,.3); }
        .code-input::placeholder { color: var(--text2); font-size: 16px; letter-spacing: .1em; }

        .btn {
            padding: 12px 20px;
            border-radius: 10px; border: none; cursor: pointer;
            font-size: 14px; font-weight: 600;
            transition: opacity .15s, transform .1s;
        }
        .btn:active { transform: scale(.97); }
        .btn:disabled { opacity: 0.4; cursor: default; transform: none; }
        .btn-primary { background: var(--accent); color: #000; }
        .btn-green   { background: var(--green);  color: #000; }
        .btn-red     { background: var(--red);    color: #fff; }
        .btn-ghost   { background: rgba(255,255,255,.08); color: var(--text); }

        .status-row {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: var(--text2);
        }
        .dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--text2); flex-shrink: 0;
        }
        .dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
        .dot.blue  { background: var(--blue);  box-shadow: 0 0 6px var(--blue);  }
        .dot.red   { background: var(--red); }

        #localPreview {
            width: 100%; border-radius: 10px; background: #000;
            aspect-ratio: 16/9; object-fit: contain;
            display: none; margin-top: 16px;
        }
        #localPreview.visible { display: block; }

        .controls-row { display: flex; gap: 10px; margin-top: 16px; }
        .controls-row .btn { flex: 1; }

        .error-msg {
            font-size: 13px; color: #fca5a5;
            background: rgba(239,68,68,.08);
            border: 1px solid rgba(239,68,68,.2);
            border-radius: 8px; padding: 10px 14px;
            margin-top: 12px; display: none;
        }
        .error-msg.visible { display: block; }

        .hint {
            font-size: 12px; color: var(--text2);
            line-height: 1.65; margin-top: 14px;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="header">
        <svg class="brand-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" rx="12" fill="#b0b0b0"/>
            <path d="M34 14H14a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4v-2h-4V16h20v4h2v-4a2 2 0 0 0-2-2Z" fill="white"/>
            <path d="M10 36v-4a6 6 0 0 1 6 6h-4a2 2 0 0 0-2-2Zm0 4h4a10 10 0 0 0-4-8v4a6 6 0 0 1 4 4Zm0 0h-2v-2h2v2Z" fill="white" fill-opacity="0.8"/>
            <path d="M22 38h-4a14 14 0 0 0-14-14v4a10 10 0 0 1 10 10h4a14 14 0 0 0-14-14v-4a18 18 0 0 1 18 18Z" fill="white" fill-opacity="0.5"/>
        </svg>
        <div>
            <div class="brand-name">Arozcast</div>
            <div class="brand-sub">Screen Share</div>
        </div>
    </div>

    <!-- Step 1: connect to room -->
    <div class="card" id="connectCard">
        <div class="card-title">Step 1 — Connect to receiver</div>
        <div class="code-row">
            <input class="code-input" id="codeInput" type="text" inputmode="numeric"
                   maxlength="4" placeholder="0000" autocomplete="off">
            <button class="btn btn-primary" id="connectBtn" onclick="connectRoom()">Connect</button>
        </div>
        <div style="margin-top:12px;">
            <div class="status-row">
                <div class="dot" id="connDot"></div>
                <span id="connStatus">Enter the 4-digit code shown on the Arozcast receiver</span>
            </div>
        </div>
        <div class="error-msg" id="connectError"></div>
    </div>

    <!-- Step 2: share controls (shown after connecting) -->
    <div class="card" id="shareCard" style="display:none;">
        <div class="card-title">Step 2 — Share your screen</div>
        <div class="status-row">
            <div class="dot green" id="shareDot"></div>
            <span id="shareStatus">Connected</span>
        </div>

        <!-- Local preview (shown while sharing) -->
        <video id="localPreview" muted playsinline autoplay></video>

        <div class="controls-row">
            <button class="btn btn-green"  id="startBtn"      onclick="startShare()">Start sharing</button>
            <button class="btn btn-red"    id="stopBtn"       onclick="stopShare()"  style="display:none;" disabled>Stop sharing</button>
            <button class="btn btn-ghost"  id="disconnectBtn" onclick="disconnect()">Disconnect</button>
        </div>
        <div class="error-msg" id="shareError"></div>
        <p class="hint">
            Your screen will be streamed live to the Arozcast receiver via a direct peer-to-peer connection.
            System audio is included when your browser and OS support it.
        </p>
    </div>

</div>
<script>
// ── WebRTC configuration ───────────────────────────────────────────────────
const RTC_CONFIG = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
    ]
};

// ── State ─────────────────────────────────────────────────────────────────
let ws               = null;
let pc               = null;   // RTCPeerConnection
let stream           = null;   // MediaStream from getDisplayMedia
let currentCode      = null;
let heartbeatTimer   = null;
let isSharing        = false;
let iceQueue         = [];     // ICE candidates buffered before remote description is set

// ── DOM refs ──────────────────────────────────────────────────────────────
const codeInput       = document.getElementById('codeInput');
const connectBtn      = document.getElementById('connectBtn');
const connDot         = document.getElementById('connDot');
const connStatus      = document.getElementById('connStatus');
const connectError    = document.getElementById('connectError');
const connectCard     = document.getElementById('connectCard');
const shareCard       = document.getElementById('shareCard');
const shareStatus     = document.getElementById('shareStatus');
const shareDot        = document.getElementById('shareDot');
const startBtn        = document.getElementById('startBtn');
const stopBtn         = document.getElementById('stopBtn');
const disconnectBtn   = document.getElementById('disconnectBtn');
const shareError      = document.getElementById('shareError');
const localPreview    = document.getElementById('localPreview');

// ── Helpers ───────────────────────────────────────────────────────────────
function showError(el, msg) { el.textContent = msg; el.classList.add('visible'); }
function clearError(el)     { el.classList.remove('visible'); }

function setConnStatus(dotClass, html) {
    connDot.className = 'dot' + (dotClass ? ' ' + dotClass : '');
    connStatus.innerHTML = html;
}
function setShareStatus(dotClass, html) {
    shareDot.className = 'dot' + (dotClass ? ' ' + dotClass : '');
    shareStatus.innerHTML = html;
}

function wsSend(topic, payload) {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ topic, payload: payload || {} }));
    }
}

// ── Room connection ───────────────────────────────────────────────────────
async function connectRoom() {
    const code = codeInput.value.trim();
    if (!/^\d{4}$/.test(code)) {
        showError(connectError, 'Please enter a valid 4-digit room code.');
        return;
    }
    clearError(connectError);
    connectBtn.disabled = true;
    codeInput.disabled  = true;
    setConnStatus('', 'Checking room…');

    const root = (typeof ao_root !== 'undefined' && ao_root) ? ao_root : '/';

    try {
        const res  = await fetch(root + 'api/arozcast/ping?code=' + code);
        const data = await res.json();
        if (!data.exists) {
            showError(connectError, 'Room ' + code + ' not found. Check the code on the Arozcast receiver.');
            connectBtn.disabled = false;
            codeInput.disabled  = false;
            setConnStatus('', 'Enter the 4-digit code shown on the Arozcast receiver');
            return;
        }
    } catch (e) {
        showError(connectError, 'Could not reach the server. Check your connection.');
        connectBtn.disabled = false;
        codeInput.disabled  = false;
        return;
    }

    setConnStatus('', 'Connecting…');

    const wsUrl = new URL(root + 'api/arozcast/ws?code=' + code, window.location.href);
    wsUrl.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    ws = new WebSocket(wsUrl.toString());

    ws.onopen = () => {
        currentCode = code;
        wsSend('peer.hello', {});
        heartbeatTimer = setInterval(() => wsSend('peer.heartbeat', {}), 5000);

        connectCard.style.display = 'none';
        shareCard.style.display   = 'block';
        setShareStatus('green', 'Connected to room <strong>' + code + '</strong>');
    };

    ws.onmessage = (evt) => {
        let msg;
        try { msg = JSON.parse(evt.data); } catch (_) { return; }
        handleMessage(msg);
    };

    ws.onclose = () => {
        clearInterval(heartbeatTimer);
        heartbeatTimer = null;
        if (isSharing) _cleanupRTC();
        if (currentCode) {
            setShareStatus('red',
                'Disconnected. <a href="" onclick="location.reload();return false;" style="color:#93c5fd;">Reconnect</a>');
        }
    };

    ws.onerror = () => {};
}

// ── Incoming message handler ──────────────────────────────────────────────
async function handleMessage(msg) {
    switch (msg.topic) {
        case 'webrtc.answer':
            if (pc && pc.signalingState === 'have-local-offer') {
                try {
                    await pc.setRemoteDescription({ type: 'answer', sdp: msg.payload.sdp });
                    for (const c of iceQueue) await pc.addIceCandidate(c).catch(() => {});
                    iceQueue = [];
                } catch (e) {
                    showError(shareError, 'WebRTC negotiation failed: ' + e.message);
                }
            }
            break;

        case 'webrtc.ice':
            if (pc) {
                if (pc.remoteDescription) {
                    pc.addIceCandidate(msg.payload.candidate).catch(() => {});
                } else {
                    iceQueue.push(msg.payload.candidate);
                }
            }
            break;

        case 'room.closed':
            clearInterval(heartbeatTimer);
            if (isSharing) _cleanupRTC();
            setShareStatus('red', 'Room was closed by the server.');
            break;
    }
}

// ── Screen sharing ────────────────────────────────────────────────────────
async function startShare() {
    clearError(shareError);
    startBtn.disabled = true;

    try {
        stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
    } catch (e) {
        showError(shareError,
            e.name === 'NotAllowedError'
                ? 'Screen capture permission denied.'
                : 'Could not start screen capture: ' + e.message);
        startBtn.disabled = false;
        return;
    }

    localPreview.srcObject = stream;
    localPreview.classList.add('visible');

    iceQueue = [];
    pc = new RTCPeerConnection(RTC_CONFIG);

    pc.onicecandidate = (e) => {
        if (e.candidate) wsSend('webrtc.ice', { candidate: e.candidate.toJSON() });
    };

    pc.onconnectionstatechange = () => {
        if (!pc) return;
        if (pc.connectionState === 'connected') {
            setShareStatus('blue', 'Streaming to room <strong>' + currentCode + '</strong>');
        } else if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
            showError(shareError, 'Peer connection lost. The receiver may have closed.');
            stopShare(true);
        }
    };

    for (const track of stream.getTracks()) {
        pc.addTrack(track, stream);
    }

    // Handle user pressing the browser's native "Stop sharing" button
    stream.getVideoTracks()[0].onended = () => stopShare();

    wsSend('screen.start', {});

    try {
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);
        wsSend('webrtc.offer', { sdp: offer.sdp, type: offer.type });
    } catch (e) {
        showError(shareError, 'Failed to create WebRTC offer: ' + e.message);
        stopShare(true);
        return;
    }

    isSharing = true;
    startBtn.style.display      = 'none';
    stopBtn.style.display       = 'block';
    stopBtn.disabled            = false;
    disconnectBtn.disabled      = true;
    setShareStatus('blue', 'Connecting to receiver… room <strong>' + currentCode + '</strong>');
}

function stopShare(silent) {
    _cleanupRTC();
    if (!silent) wsSend('screen.stop', {});

    startBtn.style.display  = 'block';
    startBtn.disabled       = false;
    stopBtn.style.display   = 'none';
    stopBtn.disabled        = true;
    disconnectBtn.disabled  = false;
    setShareStatus('green', 'Connected to room <strong>' + currentCode + '</strong>');
}

function _cleanupRTC() {
    isSharing = false;
    if (stream) { stream.getTracks().forEach(t => t.stop()); stream = null; }
    if (pc)     { pc.close(); pc = null; }
    localPreview.srcObject = null;
    localPreview.classList.remove('visible');
}

function disconnect() {
    if (isSharing) stopShare();
    clearInterval(heartbeatTimer);
    heartbeatTimer = null;
    currentCode    = null;
    if (ws) { ws.onclose = null; ws.close(); ws = null; }

    connectCard.style.display = 'block';
    shareCard.style.display   = 'none';
    connectBtn.disabled = false;
    codeInput.disabled  = false;
    codeInput.value     = '';
    setConnStatus('', 'Enter the 4-digit code shown on the Arozcast receiver');
}

// ── Keyboard shortcut ────────────────────────────────────────────────────
codeInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') connectRoom(); });

// ── Clean up on unload ────────────────────────────────────────────────────
window.addEventListener('beforeunload', () => {
    if (isSharing) _cleanupRTC();
    if (ws) { ws.onclose = null; ws.close(); }
});
</script>
</body>
</html>