Real-Time Streaming Systems (WebRTC + Live Data) · レッスン

WebRTCデータチャネルによるファイル転送

チャンク分割、バックプレッシャー、順序制御、進捗追跡を含め、WebRTCデータチャネルを介してファイルをピアツーピアで送信する方法を学びます。

「WebRTCデータチャネルによるファイル転送」はCoddyKit上の無料Real-Time Streaming Systems (WebRTC + Live Data)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReal-Time Streaming Systems (WebRTC + Live Data)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

よくある質問

「WebRTCデータチャネルによるファイル転送」レッスンは無料ですか？

はい。「WebRTCデータチャネルによるファイル転送」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Real-Time Streaming Systems (WebRTC + Live Data)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

「WebRTCデータチャネルによるファイル転送」で何を学びますか？

チャンク分割、バックプレッシャー、順序制御、進捗追跡を含め、WebRTCデータチャネルを介してファイルをピアツーピアで送信する方法を学びます。ブラウザで直接実行するハンズオンコードでReal-Time Streaming Systems (WebRTC + Live Data)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Real-Time Streaming Systems (WebRTC + Live Data)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReal-Time Streaming Systems (WebRTC + Live Data)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「WebRTCデータチャネルによるファイル転送」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReal-Time Streaming Systems (WebRTC + Live Data)レッスンでコードを書いて実行できますか？

はい。すべてのReal-Time Streaming Systems (WebRTC + Live Data)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Real-Time Streaming Systems (WebRTC + Live Data)に戻る