Samstag, 17 Januar 2026

Diese Woche am beliebtesten

Vertiefendes Material

Chatroulette Klon

Erleben Sie die Zukunft des Online-Video-Chats mit unserem Chatroulette Multi-Paar Klon – alles in einer einzigen, leistungsstarken PHP-Datei. Professionell gestaltet wie von einer Marketing-Agentur, bietet dieses Script eine vollständige Chatroulette-Erfahrung mit modernem Design und allen wichtigen Features.

Highlights:

  • Multi-Paar-Unterstützung: Verbinde mehrere Nutzer gleichzeitig, automatische Partnerzuweisung und Warteschlange
  • Echtzeit-Video & Audio: High-Quality-WebRTC-Streaming für reibungslosen Videochat
  • Integrierter Chat: Nachrichten in Echtzeit, Speicherung der letzten 100 Nachrichten
  • Automatisches Reconnect: Partnerverlust? Kein Problem, das Script weist sofort einen neuen Partner zu
  • Mobile-optimiert: Perfekte Darstellung auf Smartphones und Tablets
  • Professionelles Agentur-Design: Modernes Layout, glatte Animationen, stilvolle Buttons
  • Einfache Installation: Alles in einer Datei, JSON-Speicherung, sofort einsatzbereit
  • Inaktive Nutzer werden automatisch entfernt

Technische Details:

  • Vollständig in PHP, AJAX & JavaScript umgesetzt
  • Keine zusätzliche Datenbank erforderlich, JSON-Dateien speichern alle Daten
<?php
session_start();

// JSON-Dateien für Multi-Paar, Chat, WebRTC Signalisierung
$pairFile = 'pairs.json';
$webrtcFile = 'webrtc.json';
$chatFile = 'chat.json';
$inactiveTimeout = 60; // Sekunden für Inaktivität

if(!isset($_SESSION['uid'])) $_SESSION['uid'] = 'U'.rand(1000,9999);

function cleanPairs(){
    global $pairFile, $inactiveTimeout;
    if(!file_exists($pairFile)) return;
    $pairs = json_decode(file_get_contents($pairFile),true);
    $now = time();
    foreach($pairs as $k=>$p){
        if(isset($p['time']) && ($now-$p['time'])>$inactiveTimeout) unset($pairs[$k]);
    }
    file_put_contents($pairFile,json_encode(array_values($pairs)));
}

if(isset($_GET['action'])){
    header('Content-Type: application/json');
    $action = $_GET['action'];
    $uid = $_SESSION['uid'];

    // Neue Partner suchen
    if($action==='get_pair'){
        cleanPairs();
        $pairs = file_exists($pairFile)?json_decode(file_get_contents($pairFile),true):[];
        $partner = null;
        foreach($pairs as &$p){
            if(count($p['users'])===1 && $p['users'][0]!==$uid){
                $p['users'][]=$uid;
                $p['time']=time();
                $partner = $p['users'][0];
                break;
            }
        }
        if(!$partner) $pairs[]=['users'=>[$uid],'time'=>time()];
        file_put_contents($pairFile,json_encode($pairs));
        echo json_encode(['partner'=>$partner]);
        exit;
    }

    if($action==='offer' && isset($_POST['data'])){
        $webrtc = file_exists($webrtcFile)?json_decode(file_get_contents($webrtcFile),true):[];
        $webrtc[$uid]=['offer'=>$_POST['data'],'answer'=>null,'time'=>time()];
        file_put_contents($webrtcFile,json_encode($webrtc));
        echo json_encode(['status'=>'ok']);
        exit;
    }

    if($action==='answer' && isset($_POST['target']) && isset($_POST['data'])){
        $webrtc = file_exists($webrtcFile)?json_decode(file_get_contents($webrtcFile),true):[];
        if(isset($webrtc[$_POST['target']])) $webrtc[$_POST['target']]['answer']=$_POST['data'];
        file_put_contents($webrtcFile,json_encode($webrtc));
        echo json_encode(['status'=>'ok']);
        exit;
    }

    if($action==='check_answer'){
        $webrtc = file_exists($webrtcFile)?json_decode(file_get_contents($webrtcFile),true):[];
        $ans = isset($webrtc[$uid])?$webrtc[$uid]['answer']:null;
        echo json_encode(['answer'=>$ans]);
        exit;
    }

    // Chat
    if($action==='get_messages'){
        if(!file_exists($chatFile)) file_put_contents($chatFile,json_encode([]));
        echo file_get_contents($chatFile);
        exit;
    }

    if($action==='send_message' && isset($_POST['message'])){
        $messages = file_exists($chatFile)?json_decode(file_get_contents($chatFile),true):[];
        $messages[]=['user'=>$uid,'message'=>htmlspecialchars($_POST['message']),'time'=>date('H:i:s')];
        if(count($messages)>100) $messages = array_slice($messages,-100);
        file_put_contents($chatFile,json_encode($messages));
        echo json_encode(['status'=>'ok']);
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatroulette Multi-Paar Klon</title>
<style>
body{font-family:'Helvetica Neue',sans-serif;margin:0;padding:0;background:#f0f2f5;color:#333;display:flex;flex-direction:column;min-height:100vh;}
header{background:linear-gradient(90deg,#4A90E2,#50E3C2);color:#fff;padding:1.5rem;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
header h1{margin:0;font-size:2rem;letter-spacing:1px;}
#videoContainer{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;padding:1rem;transition:0.3s;}
video{width:45%;max-width:480px;border-radius:12px;border:2px solid #4A90E2;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:0.3s;}
#chat{max-width:700px;margin:auto;background:#fff;border-radius:12px;padding:1rem;box-shadow:0 6px 15px rgba(0,0,0,0.1);flex:1;display:flex;flex-direction:column;}
#messages{height:250px;overflow-y:auto;border:1px solid #ddd;padding:0.5rem;margin-bottom:0.5rem;border-radius:8px;background:#fafafa;}
input[type=text]{width:75%;padding:0.5rem;border-radius:8px;border:1px solid #ccc;font-size:1rem;margin-bottom:0.5rem;}
button{padding:0.5rem 1rem;border:none;border-radius:8px;background:#4A90E2;color:#fff;cursor:pointer;font-size:1rem;transition:0.3s;}
button:hover{background:#357ABD;}
footer{text-align:center;padding:1rem;color:#888;margin-top:auto;background:#f0f2f5;}
a{color:#4A90E2;text-decoration:none;}
a:hover{text-decoration:underline;}
@media(max-width:768px){video{width:100%;}}
</style>
</head>
<body>
<header><h1>Chatroulette Multi-Paar Klon</h1></header>

<div id="videoContainer">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>

<div id="chat">
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="Nachricht eingeben...">
<button onclick="sendMessage()">Senden</button>
</div>

<footer>© <?=date('Y')?> <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a></footer>

<script>
let localStream, pc, partnerUid, reconnectInterval;

function fetchMessages(){
    fetch('?action=get_messages').then(r=>r.json()).then(data=>{
        const messagesDiv = document.getElementById('messages');
        messagesDiv.innerHTML = data.map(m=>`<b>${m.user}</b> [${m.time}]: ${m.message}`).join('<br>');
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    });
}

function sendMessage(){
    const msg=document.getElementById('messageInput').value;
    if(!msg) return;
    fetch('?action=send_message',{method:'POST',body:new URLSearchParams({message:msg})})
    .then(()=>{document.getElementById('messageInput').value=''; fetchMessages();});
}

setInterval(fetchMessages,2000);
fetchMessages();

async function startWebRTC(){
    localStream = await navigator.mediaDevices.getUserMedia({video:true,audio:true});
    document.getElementById('localVideo').srcObject = localStream;

    while(!partnerUid){
        const resp = await fetch('?action=get_pair').then(r=>r.json());
        partnerUid = resp.partner;
        await new Promise(r=>setTimeout(r,1000));
    }

    await connectPeer();
}

async function connectPeer(){
    pc = new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});
    localStream.getTracks().forEach(track=>pc.addTrack(track,localStream));
    pc.ontrack = e=>{document.getElementById('remoteVideo').srcObject=e.streams[0]};
    pc.onconnectionstatechange = ()=>{if(pc.connectionState==='disconnected'){partnerUid=null; startWebRTC();}};

    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    await fetch('?action=offer',{method:'POST',body:new URLSearchParams({data:JSON.stringify(offer)})});

    let answer = null;
    while(!answer){
        answer = await fetch('?action=check_answer').then(r=>r.json()).then(d=>d.answer);
        await new Promise(r=>setTimeout(r,1000));
    }
    await pc.setRemoteDescription(JSON.parse(answer));
}

startWebRTC().catch(console.error);
</script>
</body>
</html>

Dreamcodes Redaktion
Dreamcodes Redaktion
Jeder auf Dreamcodes bereitgestellte Codeschnipsel sowie jede Tutorial Anleitung basiert auf geprüften Best Practices und fundierter Praxiserfahrung. Ziel ist es, ein belastbares technisches Fundament bereitzustellen und keine unausgereiften oder experimentellen Lösungen zu veröffentlichen. Die konkrete Nutzung, Integration, Anpassung und Absicherung der Inhalte obliegt jedoch dem Anwender. Vor dem produktiven Einsatz sind sämtliche Inhalte eigenverantwortlich zu prüfen, zu testen und gegebenenfalls abzusichern. Dreamcodes stellt die technische Grundlage zur Verfügung, die finale Umsetzung und Verantwortung verbleibt beim Nutzer.
Vorheriges Tutorial
Nächstes Tutorial

Vielleicht einen Blick WERT?