zero-query 1.1.1 → 1.2.0

package/cli/scaffold/webrtc/app/components/video-room.js

@@ -0,0 +1,295 @@
+// video-room.js - Mini-Discord style room: video tiles + screen share + chat.
+//
+// Backed by app/lib/room.js (BroadcastChannel signaling) so multiple tabs
+// on the same browser form a working mesh room with no server at all.
+
+import { LocalRoom } from '../lib/room.js';
+
+$.component('video-room', {
+    state: () => ({
+        // Pre-join form ----------------------------------------------------
+        roomName:    'lobby',
+        displayName: 'User-' + Math.random().toString(36).slice(2, 6),
+        // Live state -------------------------------------------------------
+        joined:      false,
+        status:      'Pick a room + name and click Join. Open this URL in a second tab to see a peer appear.',
+        error:       '',
+        // Local media ------------------------------------------------------
+        localStream: null,
+        micOn:       true,
+        camOn:       true,
+        sharing:     false,
+        // Roster + chat ----------------------------------------------------
+        peers:       [],            // [{ id, name, stream }]
+        messages:    [],            // [{ from, name, text, t, mine }]
+        draft:       '',
+    }),
+
+    mounted() {
+        this._room        = null;
+        this._cameraTrack = null;   // original camera video track (kept while screen sharing)
+        this._screenStream = null;  // current display-media stream (cleared on stop)
+    },
+
+    async destroyed() {
+        await this._teardown();
+    },
+
+    // ---- Pre-join form bindings -----------------------------------------
+
+    setRoom(e) { this.setState({ roomName:    e.target.value }); },
+    setName(e) { this.setState({ displayName: e.target.value }); },
+
+    // ---- Join / leave ----------------------------------------------------
+
+    async join() {
+        if (this.state.joined) return;
+        this.setState({ status: 'Requesting camera + microphone...', error: '' });
+
+        let stream = null;
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+        } catch (err) {
+            // Joining without media is still useful (viewer + chat only).
+            this.setState({ status: 'No camera/mic - joining as viewer.', error: '' });
+        }
+
+        const cam = stream && stream.getVideoTracks()[0];
+        if (cam) this._cameraTrack = cam;
+
+        this._room = new LocalRoom(this.state.roomName, { displayName: this.state.displayName });
+        this._room.on('peers',  (peers)  => this._onPeers(peers));
+        this._room.on('chat',   (msg)    => this._onChat(msg));
+        this._room.on('status', (status) => this.setState({ status }));
+        this._room.on('error',  (err)    => this.setState({ error: String(err && err.message || err) }));
+        this._room.join(stream);
+
+        this.setState({
+            joined:      true,
+            localStream: stream,
+            micOn:       !!(stream && stream.getAudioTracks()[0]),
+            camOn:       !!cam,
+            sharing:     false,
+        });
+    },
+
+    async leave() {
+        await this._teardown();
+        this.setState({
+            joined:      false,
+            localStream: null,
+            peers:       [],
+            messages:    [],
+            sharing:     false,
+            status:      'Left the room. Click Join to reconnect.',
+        });
+    },
+
+    async _teardown() {
+        if (this._room) { try { this._room.leave(); } catch (_) {} this._room = null; }
+        if (this._screenStream) {
+            for (const t of this._screenStream.getTracks()) { try { t.stop(); } catch (_) {} }
+            this._screenStream = null;
+        }
+        if (this.state.localStream) {
+            for (const t of this.state.localStream.getTracks()) { try { t.stop(); } catch (_) {} }
+        }
+        this._cameraTrack = null;
+    },
+
+    // ---- Mic / cam toggles ----------------------------------------------
+
+    toggleMic() {
+        const stream = this.state.localStream;
+        if (!stream) return;
+        const next = !this.state.micOn;
+        for (const t of stream.getAudioTracks()) t.enabled = next;
+        this.setState({ micOn: next });
+    },
+
+    toggleCam() {
+        const stream = this.state.localStream;
+        if (!stream) return;
+        const next = !this.state.camOn;
+        for (const t of stream.getVideoTracks()) t.enabled = next;
+        this.setState({ camOn: next });
+    },
+
+    // ---- Screen share ----------------------------------------------------
+
+    async toggleShare() {
+        if (!this._room) return;
+        if (this.state.sharing) {
+            // Stop sharing: revert every peer to the camera track.
+            if (this._screenStream) {
+                for (const t of this._screenStream.getTracks()) { try { t.stop(); } catch (_) {} }
+                this._screenStream = null;
+            }
+            await this._room.replaceVideoTrack(this._cameraTrack || null);
+            this.setState({ sharing: false, status: 'Stopped sharing screen.' });
+            return;
+        }
+
+        try {
+            const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+            this._screenStream = stream;
+            const shareTrack = stream.getVideoTracks()[0];
+            // When the user clicks the browser's native "Stop sharing", flip back.
+            shareTrack.onended = () => { if (this.state.sharing) this.toggleShare(); };
+            await this._room.replaceVideoTrack(shareTrack);
+            this.setState({ sharing: true, status: 'Sharing your screen.' });
+        } catch (err) {
+            this.setState({ error: 'Screen share denied or unavailable.' });
+        }
+    },
+
+    // ---- Roster + chat ---------------------------------------------------
+
+    _onPeers(peersMap) {
+        const list = Array.from(peersMap.values()).map((p) => ({
+            id: p.id, name: p.name, stream: p.stream,
+        }));
+        this.setState({ peers: list });
+    },
+
+    _onChat(msg) {
+        const mine = this._room && msg.from === this._room.id;
+        const next = this.state.messages.concat([{ ...msg, mine }]);
+        // Cap history so a long-running room doesn't grow forever.
+        if (next.length > 200) next.splice(0, next.length - 200);
+        this.setState({ messages: next });
+    },
+
+    setDraft(e) { this.setState({ draft: e.target.value }); },
+
+    sendChat(e) {
+        if (e && e.preventDefault) e.preventDefault();
+        const text = (this.state.draft || '').trim();
+        if (!text || !this._room) return;
+        this._room.sendChat(text);
+        this.setState({ draft: '' });
+    },
+
+    // ---- Render ----------------------------------------------------------
+
+    render() {
+        if (!this.state.joined) return this._renderLobby();
+        return this._renderRoom();
+    },
+
+    _renderLobby() {
+        const { roomName, displayName, status, error } = this.state;
+        return `
+            <div class="lobby">
+                <h1>zQuery WebRTC Demo</h1>
+                <p class="lead">
+                    A mini, no-backend room. Signaling runs over
+                    <code>BroadcastChannel</code>, so opening this page in
+                    multiple tabs / windows gives you a working mesh call
+                    with audio, video, screen share, and chat &mdash; no
+                    server required.
+                </p>
+                <form class="join-form" @submit="join">
+                    <label>
+                        Room
+                        <input type="text" value="${$.escapeHtml(roomName)}" @input="setRoom" placeholder="lobby" />
+                    </label>
+                    <label>
+                        Your name
+                        <input type="text" value="${$.escapeHtml(displayName)}" @input="setName" placeholder="display name" />
+                    </label>
+                    <button type="button" class="primary" @click="join">Join room</button>
+                </form>
+                <p class="status ${error ? 'error' : ''}">
+                    ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
+                </p>
+            </div>
+        `;
+    },
+
+    _renderRoom() {
+        const { localStream, peers, status, error, micOn, camOn, sharing, messages, draft, displayName, roomName } = this.state;
+
+        const peerCount = peers.length + 1; // include self
+        const peerTiles = peers.map((p, i) => `
+            <div class="tile">
+                <video z-stream="peers[${i}].stream" autoplay playsinline></video>
+                <div class="label">${$.escapeHtml(p.name || p.id)}</div>
+            </div>
+        `).join('');
+
+        const chatLines = messages.map((m) => `
+            <div class="msg ${m.mine ? 'mine' : ''}">
+                <span class="who">${$.escapeHtml(m.name)}</span>
+                <span class="text">${$.escapeHtml(m.text)}</span>
+            </div>
+        `).join('');
+
+        return `
+            <div class="room">
+                <aside class="sidebar">
+                    <div class="room-meta">
+                        <div class="room-name">#${$.escapeHtml(roomName)}</div>
+                        <div class="room-sub">${peerCount} ${peerCount === 1 ? 'person' : 'people'}</div>
+                    </div>
+                    <div class="roster">
+                        <div class="roster-row me">
+                            <span class="dot ${micOn ? 'on' : 'off'}"></span>
+                            ${$.escapeHtml(displayName)} <small>(you)</small>
+                        </div>
+                        ${peers.map((p) => `
+                            <div class="roster-row">
+                                <span class="dot on"></span>
+                                ${$.escapeHtml(p.name || p.id)}
+                            </div>
+                        `).join('')}
+                    </div>
+                    <button class="leave" @click="leave">Leave room</button>
+                </aside>
+
+                <section class="stage">
+                    <div class="tiles">
+                        <div class="tile self">
+                            <video z-stream="localStream" autoplay playsinline muted></video>
+                            <div class="label">You${sharing ? ' &middot; sharing' : ''}</div>
+                            ${!camOn && !sharing ? '<div class="camoff">Camera off</div>' : ''}
+                        </div>
+                        ${peerTiles}
+                    </div>
+
+                    <div class="controls">
+                        <button class="${micOn ? '' : 'off'}" @click="toggleMic">
+                            ${micOn ? '🎤 Mute' : '🔇 Unmute'}
+                        </button>
+                        <button class="${camOn ? '' : 'off'}" @click="toggleCam">
+                            ${camOn ? '📷 Stop video' : '🚫 Start video'}
+                        </button>
+                        <button class="${sharing ? 'active' : ''}" @click="toggleShare">
+                            ${sharing ? '🛑 Stop share' : '🖥️ Share screen'}
+                        </button>
+                        <div class="status-inline ${error ? 'error' : ''}">
+                            ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
+                        </div>
+                    </div>
+                </section>
+
+                <aside class="chat">
+                    <div class="chat-header">Chat</div>
+                    <div class="chat-log" id="chat-log">
+                        ${chatLines || '<div class="empty">No messages yet. Say hi 👋</div>'}
+                    </div>
+                    <form class="chat-form" @submit="sendChat">
+                        <input type="text" value="${$.escapeHtml(draft)}" @input="setDraft" placeholder="Message #${$.escapeHtml(roomName)}" />
+                        <button type="button" class="primary" @click="sendChat">Send</button>
+                    </form>
+                </aside>
+            </div>
+        `;
+    },
+
+    updated() {
+        // Auto-scroll chat to the latest message after each render.
+        const log = this.$el && this.$el.querySelector ? this.$el.querySelector('#chat-log') : null;
+        if (log) log.scrollTop = log.scrollHeight;
+    },
+});

package/cli/scaffold/webrtc/app/lib/room.js

@@ -0,0 +1,252 @@
+// lib/room.js - Backend-less WebRTC room built on BroadcastChannel.
+//
+// Why no backend?
+//   WebRTC needs a signaling channel to swap SDP + ICE between peers. We use
+//   BroadcastChannel, which lets every same-origin tab on the same browser
+//   talk to every other tab for free. Open the demo in 2+ tabs (or windows)
+//   and you have a working mesh room with audio, video, screen share, and
+//   text chat - zero servers required.
+//
+// Caveats:
+//   - BroadcastChannel is same-origin / same-browser only. To connect across
+//     machines, plug in any real signaling transport (WebSocket, SSE, etc.)
+//     in place of BroadcastChannel and the rest of this file keeps working.
+//   - Mesh topology: every peer has an RTCPeerConnection with every other
+//     peer. Works great up to ~6 peers; beyond that, use an SFU.
+
+const SIGNAL_VERSION = 1;
+
+/**
+ * Wrap a BroadcastChannel as a "SignalingClient" that $.Peer can consume.
+ * The Peer class expects `.send(type, payload)` and `.on(type, cb)`.
+ */
+function makeSignaling(channel, myId) {
+    return {
+        send(type, payload) {
+            channel.postMessage({ v: SIGNAL_VERSION, type, from: myId, ...payload });
+        },
+        on(type, cb) {
+            const handler = (ev) => {
+                const msg = ev.data;
+                if (!msg || msg.v !== SIGNAL_VERSION) return;
+                if (msg.type !== type) return;
+                if (msg.from === myId) return;                       // ignore self
+                if (msg.to !== undefined && msg.to !== myId) return; // not addressed to us
+                cb(msg);
+            };
+            channel.addEventListener('message', handler);
+            return () => channel.removeEventListener('message', handler);
+        },
+    };
+}
+
+/**
+ * Backend-less mesh room.
+ *
+ * Events (subscribe via `.on(type, cb)`):
+ *   - 'peers'     payload: Map<id, PeerInfo>     - roster changed
+ *   - 'chat'      payload: { from, name, text, t }
+ *   - 'status'    payload: string                - human-readable status line
+ *   - 'error'     payload: Error
+ *
+ * PeerInfo: { id, name, stream: MediaStream|null, peer: $.Peer, chat: RTCDataChannel|null }
+ */
+export class LocalRoom {
+    constructor(name, { id, displayName, iceServers = [] } = {}) {
+        this.name        = name;
+        this.id          = id          || ('p-' + Math.random().toString(36).slice(2, 10));
+        this.displayName = displayName || ('User-' + this.id.slice(-4));
+        this.iceServers  = iceServers;
+
+        this._channel    = null;
+        this._signaling  = null;
+        this._peers      = new Map();          // id -> PeerInfo
+        this._localStream = null;
+        this._videoSenders = new Map();        // peerId -> RTCRtpSender (current video sender)
+        this._listeners  = new Map();
+        this._heartbeat  = null;
+        this._unsubHello = null;
+        this._unsubBye   = null;
+        this.closed      = false;
+    }
+
+    // ---- Pub/sub ---------------------------------------------------------
+
+    on(type, cb) {
+        if (typeof cb !== 'function') return () => {};
+        let set = this._listeners.get(type);
+        if (!set) { set = new Set(); this._listeners.set(type, set); }
+        set.add(cb);
+        return () => set.delete(cb);
+    }
+
+    _emit(type, payload) {
+        const set = this._listeners.get(type);
+        if (!set) return;
+        for (const cb of [...set]) { try { cb(payload); } catch (_) {} }
+    }
+
+    get peers() { return this._peers; }
+
+    // ---- Lifecycle -------------------------------------------------------
+
+    /**
+     * Open the BroadcastChannel, announce presence, and start accepting peers.
+     * `localStream` is optional - join as a viewer if you have no camera/mic.
+     */
+    join(localStream = null) {
+        if (this.closed) throw new Error('LocalRoom already closed');
+        this._localStream = localStream;
+
+        this._channel   = new BroadcastChannel('zquery-room::' + this.name);
+        this._signaling = makeSignaling(this._channel, this.id);
+
+        // Listen for newcomers' hellos and respond with our own hello so the
+        // newcomer learns about us too. Net effect: every pair exchanges
+        // hellos exactly once and both sides bring up a peer connection.
+        this._unsubHello = this._signaling.on('hello', (m) => {
+            // Ignore if we already track this peer.
+            if (this._peers.has(m.from)) return;
+            this._addPeer(m.from, m.name || 'User');
+            // Reply directly so the newcomer adds us.
+            this._signaling.send('hello', { to: m.from, name: this.displayName });
+        });
+
+        this._unsubBye = this._signaling.on('bye', (m) => {
+            this._removePeer(m.from);
+        });
+
+        // Broadcast hello to the whole room (no `to` field = everyone).
+        this._signaling.send('hello', { name: this.displayName });
+        this._emit('status', 'Looking for peers in room "' + this.name + '"...');
+
+        // Periodic hello so late-comers refresh the roster even if they miss
+        // the first broadcast (e.g. tab woken from background).
+        this._heartbeat = setInterval(() => {
+            if (this.closed) return;
+            this._signaling.send('hello', { name: this.displayName });
+        }, 5000);
+
+        return this;
+    }
+
+    leave() {
+        if (this.closed) return;
+        this.closed = true;
+
+        if (this._heartbeat)  { clearInterval(this._heartbeat); this._heartbeat = null; }
+        if (this._unsubHello) { this._unsubHello(); this._unsubHello = null; }
+        if (this._unsubBye)   { this._unsubBye();   this._unsubBye   = null; }
+
+        try { this._signaling && this._signaling.send('bye', {}); } catch (_) {}
+
+        for (const info of this._peers.values()) {
+            try { info.peer.close(); } catch (_) {}
+        }
+        this._peers.clear();
+        this._videoSenders.clear();
+        this._emit('peers', this._peers);
+
+        if (this._channel) {
+            try { this._channel.close(); } catch (_) {}
+            this._channel = null;
+        }
+    }
+
+    // ---- Media control ---------------------------------------------------
+
+    /**
+     * Replace our outgoing video track on every peer (used for screen share).
+     * Pass `null` to remove video entirely (camera-off).
+     */
+    async replaceVideoTrack(newTrack) {
+        for (const [id, sender] of this._videoSenders) {
+            try { await sender.replaceTrack(newTrack); }
+            catch (err) { this._emit('error', err); }
+        }
+    }
+
+    /** Broadcast a chat message over every peer's data channel. */
+    sendChat(text) {
+        const msg = { from: this.id, name: this.displayName, text, t: Date.now() };
+        const payload = JSON.stringify(msg);
+        for (const info of this._peers.values()) {
+            const dc = info.chat;
+            if (dc && dc.readyState === 'open') {
+                try { dc.send(payload); } catch (_) {}
+            }
+        }
+        // Echo locally so the sender sees their own message.
+        this._emit('chat', msg);
+    }
+
+    // ---- Peer plumbing ---------------------------------------------------
+
+    _addPeer(remoteId, remoteName) {
+        // Perfect-negotiation politeness: the peer with the larger id is polite.
+        const polite = this.id > remoteId;
+        const peer = new window.$.Peer(remoteId, this._signaling, {
+            polite,
+            iceServers: this.iceServers,
+        });
+
+        /** @type {PeerInfo} */
+        const info = { id: remoteId, name: remoteName, stream: null, peer, chat: null };
+        this._peers.set(remoteId, info);
+
+        // Collect remote tracks into a single MediaStream per peer.
+        peer.on('track', (ev) => {
+            const stream = ev.streams && ev.streams[0]
+                ? ev.streams[0]
+                : (info.stream || new MediaStream([ev.track]));
+            info.stream = stream;
+            this._emit('peers', this._peers);
+        });
+
+        // The peer with the smaller id opens the chat channel so we only get
+        // one per pair. The other side picks it up via 'datachannel'.
+        if (this.id < remoteId) {
+            const dc = peer.createDataChannel('chat');
+            this._wireChat(info, dc);
+        } else {
+            peer.on('datachannel', (ev) => this._wireChat(info, ev.channel));
+        }
+
+        peer.on('connectionstatechange', (state) => {
+            if (state === 'failed' || state === 'closed') this._removePeer(remoteId);
+        });
+
+        peer.on('error', (err) => this._emit('error', err));
+
+        // Publish local tracks (camera + mic) so the negotiation fires.
+        if (this._localStream) {
+            for (const track of this._localStream.getTracks()) {
+                const sender = peer.addTrack(track, this._localStream);
+                if (track.kind === 'video') this._videoSenders.set(remoteId, sender);
+            }
+        }
+
+        this._emit('peers', this._peers);
+        this._emit('status', 'Peer joined: ' + remoteName);
+    }
+
+    _wireChat(info, dc) {
+        info.chat = dc;
+        dc.onmessage = (ev) => {
+            try { this._emit('chat', JSON.parse(ev.data)); }
+            catch (_) { /* ignore malformed */ }
+        };
+        dc.onopen  = () => this._emit('status', info.name + ' is now connected.');
+        dc.onclose = () => { if (info.chat === dc) info.chat = null; };
+    }
+
+    _removePeer(remoteId) {
+        const info = this._peers.get(remoteId);
+        if (!info) return;
+        try { info.peer.close(); } catch (_) {}
+        this._peers.delete(remoteId);
+        this._videoSenders.delete(remoteId);
+        this._emit('peers', this._peers);
+        this._emit('status', 'Peer left: ' + info.name);
+    }
+}