<!doctype html><html lang="de"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebRTC-Beispielspiel – Peer-to-Peer in PHP, kostenlos online spielen</title> <meta name="description" content="Zwei WebRTC-Peers, die auf einem Bildschirm sprechen, dann ein Sternenduell Peer-to-Peer, gegen einen Bot oder online: das Beispielspiel der JumPHP-Erweiterung WebRTC."> <link rel="canonical" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/fr/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="WebRTC-Beispielspiel – Peer-to-Peer in PHP, kostenlos online spielen"> <meta property="og:description" content="Zwei WebRTC-Peers, die auf einem Bildschirm sprechen, dann ein Sternenduell Peer-to-Peer, gegen einen Bot oder online: das Beispielspiel der JumPHP-Erweiterung WebRTC."> <meta property="og:url" content="https://{{DOMAIN}}/de/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="de_DE"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="WebRTC-Beispielspiel – Peer-to-Peer in PHP, kostenlos online spielen"> <meta name="twitter:description" content="Zwei WebRTC-Peers, die auf einem Bildschirm sprechen, dann ein Sternenduell Peer-to-Peer, gegen einen Bot oder online: das Beispielspiel der JumPHP-Erweiterung WebRTC."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "VideoGame", "name": "WebRTC – JumPHP", "description": "Zwei WebRTC-Peers, die auf einem Bildschirm sprechen, dann ein Sternenduell Peer-to-Peer, gegen einen Bot oder online: das Beispielspiel der JumPHP-Erweiterung WebRTC.", "url": "https://{{DOMAIN}}/de/", "genre": "Mehrspieler-Demo", "gamePlatform": [ "Web browser", "PC", "Mobile" ], "applicationCategory": "Game", "operatingSystem": "Any", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": [ "https://{{DOMAIN}}/images/shot-1.png", "https://{{DOMAIN}}/images/shot-2.png", "https://{{DOMAIN}}/images/shot-3.png", "https://{{DOMAIN}}/images/shot-4.png" ], "isAccessibleForFree": true, "inLanguage": "de", "numberOfPlayers": { "@type": "QuantitativeValue", "minValue": 1, "maxValue": 2 }, "potentialAction": { "@type": "PlayAction", "target": "https://{{DOMAIN}}/play/" }} </script> <style> :root { --bg: #0a0c18; --panel: #161a30; --text: #eef0ff; --muted: #a7acc9; --me: #40d680; --other: #ff9640; --accent: #5ac8ff; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; } main { max-width: 1000px; margin: 0 auto; padding: 16px 16px 64px; } nav { font-size: 13px; color: var(--muted); text-align: center; line-height: 2; } nav a { color: var(--muted); text-decoration: none; white-space: nowrap; } nav a[aria-current] { color: var(--text); font-weight: 700; } header { text-align: center; padding: 24px 0 8px; } .peers { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; } .peers i { width: 28px; height: 28px; display: block; } .peers b { flex: 0 1 220px; height: 2px; background: linear-gradient(90deg, var(--me), var(--other)); } h1 { font-size: clamp(32px, 7vw, 56px); margin: 0 0 8px; letter-spacing: 1px; } h2 { margin: 48px 0 12px; font-size: 24px; } p, li { color: var(--muted); } li { margin-bottom: 8px; } li strong { color: var(--text); } .play { display: inline-block; margin: 20px 0; padding: 16px 40px; border-radius: 12px; background: var(--me); color: #07130c; font-weight: 800; font-size: 22px; text-decoration: none; box-shadow: 0 6px 0 #1f8a4c; } .play:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f8a4c; } .hero img, .gallery img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 10px; display: block; background: #000; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } code { background: var(--panel); padding: 2px 6px; border-radius: 6px; color: var(--text); word-break: break-all; } footer { text-align: center; color: var(--muted); font-size: 14px; margin-top: 56px; } a { color: var(--accent); } </style></head><body> <main> <nav aria-label="Language"><a href="../" lang="en">English</a> · <a href="../fr/" lang="fr">Français</a> · <a href="../es/" lang="es">Español</a> · <a href="../de/" lang="de" aria-current="page">Deutsch</a> · <a href="../it/" lang="it">Italiano</a> · <a href="../pt/" lang="pt">Português</a> · <a href="../nl/" lang="nl">Nederlands</a> · <a href="../pl/" lang="pl">Polski</a> · <a href="../ru/" lang="ru">Русский</a> · <a href="../uk/" lang="uk">Українська</a> · <a href="../tr/" lang="tr">Türkçe</a> · <a href="../ja/" lang="ja">日本語</a> · <a href="../zh/" lang="zh">中文</a> · <a href="../ko/" lang="ko">한국어</a></nav> <header> <div class="peers" aria-hidden="true"><i style="background: var(--me)"></i><b></b><i style="background: var(--other)"></i></div> <h1>WebRTC</h1> <p>Zwei WebRTC-Peers, die auf einem Bildschirm sprechen, dann ein Sternenduell Peer-to-Peer, gegen einen Bot oder online: das Beispielspiel der JumPHP-Erweiterung WebRTC.</p> <a class="play" href="../play/?lang=de&back=../de/">▶ Spielen</a> </header> <div class="hero"><img src="../images/shot-3.png" alt="Screenshot des WebRTC-Beispielspiels" width="640" height="360"></div> <section> <h2>Was du ausprobieren kannst</h2> <ul> <li>Zwei Peers auf diesem Bildschirm: zwei WebRTC-Verbindungen in deiner Seite sprechen über Datenkanäle. Ein PING kommt als PONG mit seiner Laufzeit zurück, und dein Cursor reist über einen unzuverlässigen Kanal, wie UDP.</li> <li>Gegen einen Bot üben: ein Duell ums Sternefangen. Der Bot hat seinen eigenen WebRTC-Peer und spielt darüber, wie ein entfernter Spieler.</li> <li>Online spielen: zwei Spieler treffen sich auf dem Relay, das nur ihre WebRTC-Signale weitergibt; danach läuft das Spiel direkt von Browser zu Browser.</li> </ul> </section> <section> <h2>Steuerung</h2> <p>Tastatur: Pfeile, Leertaste, Enter, Escape. Maus oder Finger: Knöpfe anklicken, gedrückt halten zum Bewegen. Handy: das Steuerkreuz auf dem Bildschirm geht auch.</p> </section> <section> <h2>In deinem eigenen Spiel nutzen</h2> <p>Die Erweiterung jumphp/webrtc: derselbe PHP-Code im Browser (RTCPeerConnection) und auf dem Desktop (GStreamer).</p> <p><a href="https://jumphp.net/extensions/jumphp/webrtc/tutoriel">Tutorial Schritt für Schritt</a> · <a href="https://jumphp.net/extensions/jumphp/webrtc/documentation">Dokumentation</a> · <code>bin/jumphp extension:add <game> jumphp/webrtc</code></p> </section> <section> <h2>Screenshots</h2> <div class="gallery"> <img src="../images/shot-1.png" alt="Screenshot des WebRTC-Beispielspiels 1" width="640" height="360" loading="lazy"> <img src="../images/shot-2.png" alt="Screenshot des WebRTC-Beispielspiels 2" width="640" height="360" loading="lazy"> <img src="../images/shot-3.png" alt="Screenshot des WebRTC-Beispielspiels 3" width="640" height="360" loading="lazy"> <img src="../images/shot-4.png" alt="Screenshot des WebRTC-Beispielspiels 4" width="640" height="360" loading="lazy"> </div> </section> <p style="text-align: center"><a class="play" href="../play/?lang=de&back=../de/">▶ Spielen</a></p> <footer>Gemacht in PHP mit JumPHP.</footer> </main></body></html>