0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Lesson

File Transfer over WebRTC Data Channels

Learn how to send files peer-to-peer through WebRTC data channels, including chunking, backpressure, ordering, and progress tracking.

File Transfer over WebRTC Data Channels is a free Real-Time Streaming Systems (WebRTC + Live Data) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Real-Time Streaming Systems (WebRTC + Live Data) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Beyond Chat: Sending Files

WebRTC data channels are not limited to text chat. They can carry arbitrary binary data, which makes peer-to-peer file transfer possible without uploading to a server.

This keeps large files off your infrastructure and lowers latency.

Binary Types on the Channel

A data channel can send strings or binary. For files you set binaryType so received data arrives as an ArrayBuffer.

const channel = pc.createDataChannel('file');
channel.binaryType = 'arraybuffer';

Why You Must Chunk

You cannot send a 500MB file in one message. Channels have a maximum message size (commonly around 256KB). Send the file as a sequence of chunks.

  • Slice the file into fixed-size pieces.
  • Send each piece in order.
  • Reassemble on the receiver.

Slicing a File

The browser File object supports slice(), which returns a Blob you can read as an ArrayBuffer.

const CHUNK = 16 * 1024;
let offset = 0;
function nextChunk(file) {
  const slice = file.slice(offset, offset + CHUNK);
  offset += CHUNK;
  return slice.arrayBuffer();
}

Sending the Metadata First

Before the bytes, send a small JSON header so the receiver knows the file name, type, and total size. This lets it show progress and build the final blob correctly.

channel.send(JSON.stringify({
  name: file.name,
  size: file.size,
  type: file.type
}));

The Backpressure Problem

If you push chunks faster than the network drains them, the send buffer grows and the page can crash. Watch bufferedAmount and pause when it is high.

channel.bufferedAmountLowThreshold = 65536;
if (channel.bufferedAmount > 1 * 1024 * 1024) {
  await new Promise(r =>
    channel.addEventListener('bufferedamountlow', r, { once: true }));
}

Ordered and Reliable Delivery

By default data channels are ordered and reliable (like TCP), which is exactly what file transfer needs.

For files, do not use the unordered/unreliable options that are good for game state. Keep the defaults.

Reassembling on the Receiver

The receiver collects each ArrayBuffer until the total received equals the announced size, then builds a Blob.

const parts = [];
let received = 0;
channel.onmessage = (e) => {
  parts.push(e.data);
  received += e.data.byteLength;
  if (received === meta.size) {
    const blob = new Blob(parts, { type: meta.type });
    save(blob, meta.name);
  }
};

Showing Progress

Compute a percentage from bytes sent or received versus total size. Update the UI on both ends so users see a live progress bar.

const percent = Math.round((received / meta.size) * 100);

Triggering the Download

Turn the finished Blob into a downloadable link using an object URL.

function save(blob, name) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = name; a.click();
  URL.revokeObjectURL(url);
}

Reliability and Resume

If a connection drops mid-transfer, you can resume by tracking the last acknowledged offset and restarting from there. Combine this with checksums to verify integrity at the end.

Quick Check

Test your understanding of data channel file transfer.

Recap

P2P file transfer over data channels: send metadata, slice into chunks, respect backpressure, keep ordered/reliable delivery, reassemble into a Blob, and download.

Frequently asked questions

Is the “File Transfer over WebRTC Data Channels” lesson free?

Yes — the full text of “File Transfer over WebRTC Data Channels” is free to read here on the web, and the Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Real-Time Streaming Systems (WebRTC + Live Data) course, upgrade to CoddyKit PRO.

What will I learn in “File Transfer over WebRTC Data Channels”?

Learn how to send files peer-to-peer through WebRTC data channels, including chunking, backpressure, ordering, and progress tracking. You practise Real-Time Streaming Systems (WebRTC + Live Data) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Real-Time Streaming Systems (WebRTC + Live Data)?

No prior experience is required. Real-Time Streaming Systems (WebRTC + Live Data) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “File Transfer over WebRTC Data Channels” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Real-Time Streaming Systems (WebRTC + Live Data) lesson?

Yes. Every Real-Time Streaming Systems (WebRTC + Live Data) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Synchronizing WebRTC Metadata
  2. Real-time Chat over Data Channels
  3. Sharing Application State Live
  4. File Transfer over WebRTC Data Channels
← Back to Real-Time Streaming Systems (WebRTC + Live Data)