bevy_iroh 0.5.0

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>bevy_iroh</title>
  <style>
    :root { color-scheme: light dark; }
    body { margin: 0; font: 16px/1.55 system-ui, sans-serif; background: #202428; color: #e6e6ea; }
    main { max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
    a { color: #6fd38a; }
    pre { background: #15171a; padding: 0; overflow-x: auto; border-radius: 6px; }
    pre code { display: block; padding: .8rem 1rem; }
    code { font-size: .92em; }
    :not(pre) > code { background: #15171a; padding: .1em .35em; border-radius: 4px; }
    table { border-collapse: collapse; }
    td, th { border: 1px solid #3a3e44; padding: .35rem .6rem; vertical-align: top; }
    .demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
    .demo { display: block; padding: 1rem 1.1rem; background: #15171a; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid #2c3036; }
    .demo:hover { border-color: #6fd38a; }
    .demo b { display: block; color: #6fd38a; margin-bottom: .3rem; }
    .demo small { color: #9a9ea6; }
    .note { color: #9a9ea6; font-size: .9em; }
    .badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
    .badges img { height: 20px; display: block; }
  </style>
</head>
<body>
  <main>
    <h1>bevy_iroh</h1>
    <p class="badges">
      <a href="https://crates.io/crates/bevy_iroh"><img alt="crates.io" src="https://img.shields.io/crates/v/bevy_iroh.svg"></a>
      <a href="https://docs.rs/bevy_iroh"><img alt="docs.rs" src="https://docs.rs/bevy_iroh/badge.svg"></a>
      <a href="https://github.com/rvdende/bevy_iroh/actions/workflows/ci.yml"><img alt="ci" src="https://github.com/rvdende/bevy_iroh/actions/workflows/ci.yml/badge.svg"></a>
      <a href="https://github.com/rvdende/bevy_iroh/actions/workflows/pages.yml"><img alt="pages" src="https://github.com/rvdende/bevy_iroh/actions/workflows/pages.yml/badge.svg"></a>
    </p>
    <p>Share Bevy entities between peers over iroh, with voice, video and screen sharing.
      Code and issues: <a href="https://github.com/rvdende/bevy_iroh">github.com/rvdende/bevy_iroh</a> ·
      crate: <a href="https://crates.io/crates/bevy_iroh">crates.io/crates/bevy_iroh</a> ·
      API docs: <a href="https://docs.rs/bevy_iroh">docs.rs/bevy_iroh</a>.
      The README follows the demos below, which are the crate's examples built for the browser.</p>
    <div class="demos">
      <a class="demo" href="webcam/"><b>webcam</b>Voice, a camera and a screen: everyone's picture floats over their sphere, and a screen they share hangs above it. <small>Asks for microphone and camera; "Share screen" asks for a tab, window or screen when pressed.</small></a>
      <a class="demo" href="voice/"><b>voice</b>Voice only, with a mute button, a meter and device pickers. <small>Asks for a microphone.</small></a>
      <a class="demo" href="cube/"><b>cube</b>The hello world: a cube each, driven with the arrow keys. <small>Nothing to allow.</small></a>
    </div>
    <p class="note">Each demo hosts a room and puts the invite link in the address bar. Open it in a
      second tab or on another device to see it work. A native build can join the same room with
      <code>cargo run -- &lt;ticket&gt;</code> in a checkout, using the ticket from that link; from
      there "Share screen" shares a monitor or window through the desktop's own picker on Linux, the
      main display on macOS, the primary output on Windows. Browsers connect to each other and to
      desktops over WebRTC; until that link is up, traffic goes through a relay.</p>
    <article id="readme">Loading the README…</article>
  </main>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/rust.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
  <script>
    fetch("README.md").then(r => r.text()).then(md => {
      // The title and the demo link are already this page's own header.
      md = md.replace(/^# bevy_iroh\s*\n/, "").replace(/^(\[!\[[^\n]*\n)+/m, "").replace(/^Live demos[^\n]*\n(Code and issues[^\n]*\n)?\s*\n/m, "");
      document.getElementById("readme").innerHTML = marked.parse(md);
      document.querySelectorAll("#readme pre code").forEach(el => {
        if (!el.className.includes("language-")) el.classList.add("language-rust");
        hljs.highlightElement(el);
      });
    }).catch(e => { document.getElementById("readme").textContent = "Could not load the README: " + e; });
  </script>
</body>
</html>