128 lines
4.5 KiB
HTML
128 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>MWSE — Sesli Görüşme Demo</title>
|
||
<script src="/script"></script>
|
||
<style>
|
||
body { font-family: sans-serif; max-width: 700px; margin: 2rem auto; padding: 0 1rem; }
|
||
h2 { margin-bottom: .3rem; }
|
||
.note { font-size: .85rem; color: #666; margin-bottom: 1rem; }
|
||
#status { padding: 6px 10px; background: #f5f5f5; border-radius: 4px;
|
||
font-size: .9rem; margin-bottom: 1rem; }
|
||
#peers { display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.peer-card {
|
||
border: 1px solid #bbb; border-radius: 6px; padding: 10px 14px;
|
||
min-width: 160px; background: #fff;
|
||
}
|
||
.peer-card .id { font-family: monospace; font-size: .8rem; color: #555; }
|
||
.peer-card .st { font-size: .85rem; margin-top: 4px; }
|
||
.peer-card button { margin-top: 8px; padding: 4px 10px; cursor: pointer; }
|
||
audio { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h2>MWSE Sesli Görüşme Demo</h2>
|
||
<p class="note">
|
||
Aynı anda birden fazla sekme ya da kullanıcı açın. Odaya katılan herkese
|
||
otomatik çift yönlü ses bağlantısı kurulur (P2P WebRTC, max ~10–15 kişi için
|
||
mesh topolojisi; daha fazlası için SRS entegrasyonu gerekir).
|
||
</p>
|
||
<div id="status">Bağlanıyor…</div>
|
||
<div id="peers"></div>
|
||
|
||
<script>
|
||
// Akış: MWSE bağlan → odaya katıl → gelen eşle eşleş →
|
||
// mikrofon aç → WebRTC ses kanalını başlat.
|
||
|
||
const mwse = new MWSE({ endpoint: location.origin.replace(/^http/, 'ws') });
|
||
let localStream; // MediaStream: mikrofon
|
||
const cards = {}; // socketId → DOM element
|
||
|
||
// ---- Bağlantı -------------------------------------------------------
|
||
|
||
mwse.on('scope', async () => {
|
||
status(`Bağlandı: ${mwse.me.socketId}`);
|
||
|
||
// Mikrofon erişimi: kullanıcı iznine gerek var.
|
||
try {
|
||
localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||
} catch (err) {
|
||
status(`Mikrofon erişimi reddedildi: ${err}`);
|
||
return;
|
||
}
|
||
|
||
// "sesli" odasına katıl (varsa mevcut odaya gir, yoksa oluştur).
|
||
const room = mwse.room({ name: 'sesli', joinType: 'free', ifexistsJoin: true });
|
||
await room.createRoom();
|
||
status(`Odada: sesli | Kimliğim: ${mwse.me.socketId}`);
|
||
|
||
// Odaya yeni biri katıldığında — biz eşleme isteği atalım.
|
||
room.on('join', async peer => {
|
||
upsertCard(peer.socketId, 'eşleniyor…');
|
||
await peer.requestPair();
|
||
});
|
||
|
||
// Birisi bize eşleme isteği gönderdiğinde — otomatik kabul.
|
||
mwse.me.on('request/pair', async peer => {
|
||
await peer.acceptPair();
|
||
});
|
||
|
||
// Eşleme kabul edildiğinde — WebRTC sesini başlat.
|
||
mwse.me.on('accepted/pair', peer => {
|
||
startAudio(peer);
|
||
});
|
||
|
||
// Eş bağlantıyı kestiğinde kart güncelle.
|
||
mwse.me.on('end/pair', (peerId) => {
|
||
upsertCard(peerId, 'ayrıldı');
|
||
});
|
||
});
|
||
|
||
// ---- WebRTC ses kurulumu -------------------------------------------
|
||
|
||
function startAudio(peer) {
|
||
upsertCard(peer.socketId, 'bağlanıyor…');
|
||
|
||
// Peer.rtc WebRTC.ts'deki mevcut örnek; signaling MWSE üzerinden gider.
|
||
const rtc = peer.rtc;
|
||
rtc.connect(); // varsayılan data kanalını aç (sinyal trafiği için)
|
||
|
||
// Ses akışını peer'a gönder.
|
||
rtc.sendStream(localStream, 'audio', { kind: 'audio' });
|
||
|
||
// Uzak ses akışı gelince çal.
|
||
rtc.on('stream:added', ({ stream, name }) => {
|
||
if (name !== 'audio') return;
|
||
const audio = document.createElement('audio');
|
||
audio.autoplay = true;
|
||
audio.srcObject = stream;
|
||
document.body.appendChild(audio);
|
||
upsertCard(peer.socketId, `🔊 konuşuyor`);
|
||
});
|
||
|
||
rtc.on('connected', () => upsertCard(peer.socketId, '🟢 bağlandı'));
|
||
rtc.on('disconnected', () => upsertCard(peer.socketId, '🔴 kesildi'));
|
||
}
|
||
|
||
// ---- UI yardımcıları -----------------------------------------------
|
||
|
||
function upsertCard(id, state) {
|
||
if (!cards[id]) {
|
||
const card = document.createElement('div');
|
||
card.className = 'peer-card';
|
||
card.innerHTML = `<div class="id">${id}</div><div class="st"></div>`;
|
||
document.getElementById('peers').appendChild(card);
|
||
cards[id] = card;
|
||
}
|
||
cards[id].querySelector('.st').textContent = state;
|
||
}
|
||
|
||
function status(msg) {
|
||
document.getElementById('status').textContent = msg;
|
||
console.log('[audio-demo]', msg);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|