Skip to content
MeshedFlowMeshedFlow

Quickstart

Get MeshedFlow serving segments peer-to-peer on a test page in a few minutes. MeshedFlow ships as an hls.js loader, so you keep your player and your stream — you just point hls.js at the MeshedFlow loader.

  1. Get your credentials from the portal.

    Sign in to the MeshedFlow Dashboard and open your stream. You need three values:

    • signalingUrl — your tenant’s signaling/WebSocket endpoint (the wssEndpoint shown when your tenant was provisioned, e.g. wss://signal.meshedflow.com:8445/ws).
    • streamId — formatted as <customerId>:<name>, e.g. cust_20260808_eb8790f7:live-demo. The <customerId> prefix is what scopes the stream to your account.
    • authToken — the SDK JWT you embed in your build.

    See Authentication & provisioning for where each value comes from and how tokens rotate.

  2. Add your content origin in the portal.

    Peer delivery only works for segments served from an origin you’ve allowlisted — signing refuses any URL that isn’t. In the portal, add your segment origin (e.g. https://cdn.example.com) to your tenant’s content origins. See Content signing & origins.

  3. Include the SDK and hls.js.

    Load the SDK as an ES module from the CDN, alongside hls.js — no build step needed. (Using a bundler instead? npm install @meshedflow/sdk hls.js and import from @meshedflow/sdk — same build, see the SDK reference.)

    index.html
    <script type="importmap">
      {
        "imports": {
          "hls.js": "https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.mjs",
          "@meshedflow/sdk": "https://meshedflow.com/sdk/dist/sdk.mjs"
        }
      }
    </script>
    <video id="video" controls playsinline></video>
    <script type="module" src="./player.js"></script>

  4. Wire the MeshedFlow loader into hls.js.

    Pass MeshedFlowLoader as the hls.js loader and put the MeshedFlow options under loaderConfig. Then attach your <video> element and load the source exactly as you would with plain hls.js.

    player.js
    import Hls from 'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.mjs';
    import { MeshedFlowLoader } from 'https://meshedflow.com/sdk/dist/sdk.mjs';
    

    const video = document.getElementById('video');
    

    const hls = new Hls({
      loader: MeshedFlowLoader,
      loaderConfig: {
        signalingUrl: 'wss://signal.meshedflow.com:8445/ws',
        streamId: 'cust_20260808_eb8790f7:live-demo',
        authToken: '<your-sdk-token>',
      },
    });
    

    hls.attachMedia(video);
    hls.loadSource('https://cdn.example.com/live-demo/master.m3u8');

    That’s the whole integration. With the three required fields set and your origin allowlisted, the SDK fetches the verification key, joins the mesh, and starts pulling verified segments from peers with automatic CDN fallback.

  5. Wire the two player hooks.

    The SDK delivers segment bytes but does not own the playback buffer, so two quality-of-experience signals must come from your player. Grab the loader instance from hls.js and call them:

    player.js
    // hls.js constructs one loader per media playlist; reach the active
    // instance through the hls networking internals or keep your own reference.
    let loader;
    hls.on(Hls.Events.FRAG_LOADING, (_e, data) => {
      loader = data.frag?.loader ?? loader;
    });
    

    // Call once, when the player actually starts presenting frames.
    video.addEventListener('playing', () => loader?.markPlaybackStart(), { once: true });
    

    // Call on every stall/rebuffer, with the stall duration if you have it.
    video.addEventListener('waiting', () => {
      const start = performance.now();
      video.addEventListener('playing', () => {
        loader?.reportRebuffer(performance.now() - start);
      }, { once: true });
    });

    markPlaybackStart() enables the rebuffer counters so a stall-free session reports honest zeros; reportRebuffer(ms) records each stall. The SDK never estimates these — if you don’t report them, the pilot report shows them as “not captured.”

  6. Verify offload with getStats().

    Poll the loader for its running offload figures:

    player.js
    setInterval(() => {
      const s = loader?.getStats();
      if (s) {
        console.log(
          `offload ${(s.offloadRatio * 100).toFixed(1)}% · ` +
          `p2p ${s.offloadedBytes} B · cdn ${s.cdnBytes} B · shared ${s.sharedBytes} B`
        );
      }
    }, 5000);

    getStats() returns { offloadedBytes, totalBytes, cdnBytes, sharedBytes, offloadRatio }. A rising offloadRatio with more than one viewer on the stream means the mesh is working. Your account-level figures are also visible in the Dashboard — see Analytics & pilot reports.

Next steps

Section titled “Next steps”