NetworkWebRtcPage

(no submodules)

## Purpose

The NetworkWebRtcPage demonstrates peer-to-peer WebRTC data channel communication between two browser tabs. It uses the Hono server's /api/signalling routes as a simple SDP exchange intermediary. One tab acts as the host (creates offer, initiates data channel), the other as the peer (polls for offer, creates answer). Once connected, both sides can exchange arbitrary text messages over a reliable ordered data channel.

Features

Role-based behaviour (?role=host or ?role=peer) driven from URL search params
Session ID (?session=<id>) used to namespace the SDP exchange
RTCPeerConnection with public STUN server (stun:stun.l.google.com:19302)
Host creates offer via pc.createOffer() and posts to /api/signalling/offer
Peer polls /api/signalling/offer, creates answer, posts to /api/signalling/answer
Host polls /api/signalling/answer to complete the handshake
data-status attribute on status indicator reflects connection state for E2E tests
All required data-testid attributes for Playwright E2E testing

Usage: Basic Example

import React from "react";
import { NetworkWebRtcPage } from "./network-webrtc-page.js";

// Open two browser tabs:
// Tab 1: http://localhost:3200/network-webrtc?role=host&session=abc123
// Tab 2: http://localhost:3200/network-webrtc?role=peer&session=abc123

Usage: Advanced Example

In multi-session Playwright tests, the host and peer pages are opened in separate browser contexts:

import { createMultiSession } from "@suaveplan/testing-e2e/multi-session";

const session = await createMultiSession({
  browser,
  count: 2,
  baseUrl: "http://localhost:3200/network-webrtc?session=test-123",
  roles: ["host", "peer"],
});
// session.pages[0] is host, session.pages[1] is peer
await expect(session.pages[0].locator("[data-status='connected']")).toBeVisible();

API Reference