Skip to content

Add video calls and P2P file sharing via WebRTC#21

Closed
Copilot wants to merge 3 commits intomainfrom
copilot/add-video-button-to-call
Closed

Add video calls and P2P file sharing via WebRTC#21
Copilot wants to merge 3 commits intomainfrom
copilot/add-video-button-to-call

Conversation

Copy link

Copilot AI commented Mar 10, 2026

Adds two features: in-call video (camera or screen share) with multi-peer grid display, and serverless file sharing over WebRTC DataChannels — no file data ever touches the server.

Video

  • media.jsenableCamera(), startScreenShare(), switchCamera(), disableVideo(). Shared _bindEndedHandler covers browser-initiated "stop sharing".
  • rtc.jsonnegotiationneeded on every RTCPeerConnection for automatic renegotiation when tracks are added/removed. Race-condition guard checks signalingState === 'stable' before and after createOffer. replaceVideoTrackInAll() / removeVideoTrackFromAll() helpers.
  • ui.jsupdateLocalVideo(track) renders a muted local PiP tile; createMediaElementsForPeer() handles both audio and video kind tracks, deduplicating by peer ID.
  • controls.js — Video toggle opens a source picker (Camera / Screen). Switch-camera button visible only when camera is active (not screen share).
  • New buttons: #videoButton (hidden until in call), #switchCameraButton (hidden until camera active), #videoSourcePanel picker.
  • CSS: responsive flex video grid (aspect-ratio: 16/9), local PiP tile distinguished with a purple border.

File sharing

  • fileShare.js (new) — Manages local and remote file lists. Transfer protocol over DataChannel: 16 KB chunks with back-pressure (bufferedAmount > 512 KB → poll 50 ms). Chunk framing: JSON file_chunk_header message immediately precedes the binary ArrayBuffer, carrying transferId to demux concurrent transfers. Download triggered only on explicit user click; if sender disconnects the DataChannel closes and the transfer halts.
  • filePanel.js (new) — Drag-and-drop zone + file input. Local files listed with remove button; remote files with download button and live % progress. On DataChannel open, announces all already-queued local files to the new peer.
  • rtc.js — Offer side creates a "files" ordered DataChannel on every RTCPeerConnection; answer side receives via ondatachannel.
  • app.py — Two new socket events (file_announce, file_remove) broadcast metadata only (name, size, MIME, sender SID) to the room. No file bytes pass through the server.
// When a peer joins mid-session, they immediately learn about shared files:
channel.onopen = () => {
    for (const f of localFiles.values()) {
        _sendJson(channel, { type: 'file_info', id: f.id, name: f.name, size: f.size, mime: f.mime });
    }
};

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Co-authored-by: falbue <64151271+falbue@users.noreply.github.com>
Copilot AI changed the title [WIP] Add video button for user video sharing in call Add video calls and P2P file sharing via WebRTC Mar 10, 2026
@falbue falbue closed this Mar 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants