refactor: Migrate screen sharing media handling from direct WebRTC to Mediasoup.
This commit is contained in:
277
public/viewer.js
277
public/viewer.js
@@ -2,137 +2,196 @@ const socket = io();
|
||||
const remoteVideo = document.getElementById('remoteVideo');
|
||||
const overlay = document.getElementById('overlay');
|
||||
|
||||
let peerConnection;
|
||||
let broadcasterPeerId = null; // Track who the broadcaster is
|
||||
let device;
|
||||
let recvTransport;
|
||||
let consumers = {}; // consumerId -> consumer
|
||||
|
||||
// Fetch TURN credentials dynamically from the server
|
||||
const turnHost = window.location.hostname;
|
||||
let config = {
|
||||
iceServers: [
|
||||
{ urls: `stun:${turnHost}:3478` }
|
||||
],
|
||||
iceCandidatePoolSize: 5
|
||||
};
|
||||
async function init() {
|
||||
try {
|
||||
// 1. Get router RTP capabilities
|
||||
const rtpCapabilities = await new Promise((resolve, reject) => {
|
||||
socket.emit('getRouterRtpCapabilities', (data) => {
|
||||
if (data.error) reject(new Error(data.error));
|
||||
else resolve(data);
|
||||
});
|
||||
});
|
||||
|
||||
// Load TURN credentials before any connections
|
||||
fetch('/turn-config')
|
||||
.then(r => r.json())
|
||||
.then(turn => {
|
||||
config = {
|
||||
iceServers: [
|
||||
{ urls: `stun:${turnHost}:3478` },
|
||||
{ urls: `turn:${turnHost}:3478`, username: turn.username, credential: turn.credential }
|
||||
],
|
||||
iceCandidatePoolSize: 5
|
||||
};
|
||||
})
|
||||
.catch(e => console.error('Failed to load TURN config:', e));
|
||||
// 2. Create mediasoup Device and load capabilities
|
||||
device = new mediasoupClient.Device();
|
||||
await device.load({ routerRtpCapabilities: rtpCapabilities });
|
||||
|
||||
socket.on('offer', (id, description) => {
|
||||
// Track the broadcaster's socket ID so we only react to THEIR disconnect
|
||||
broadcasterPeerId = id;
|
||||
|
||||
// Close any existing connection before creating a new one
|
||||
if (peerConnection) {
|
||||
peerConnection.close();
|
||||
peerConnection = null;
|
||||
// 3. Create recv transport
|
||||
const transportParams = await new Promise((resolve, reject) => {
|
||||
socket.emit('createWebRtcTransport', { direction: 'recv' }, (data) => {
|
||||
if (data.error) reject(new Error(data.error));
|
||||
else resolve(data);
|
||||
});
|
||||
});
|
||||
|
||||
recvTransport = device.createRecvTransport(transportParams);
|
||||
|
||||
// Transport 'connect' event: DTLS handshake
|
||||
recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
|
||||
try {
|
||||
await new Promise((resolve, reject) => {
|
||||
socket.emit('connectTransport', {
|
||||
transportId: recvTransport.id,
|
||||
dtlsParameters
|
||||
}, (result) => {
|
||||
if (result && result.error) reject(new Error(result.error));
|
||||
else resolve();
|
||||
});
|
||||
});
|
||||
callback();
|
||||
} catch (e) {
|
||||
errback(e);
|
||||
}
|
||||
});
|
||||
|
||||
// 4. Get existing producers and consume them
|
||||
const existingProducers = await new Promise((resolve, reject) => {
|
||||
socket.emit('getProducers', (data) => {
|
||||
if (data.error) reject(new Error(data.error));
|
||||
else resolve(data);
|
||||
});
|
||||
});
|
||||
|
||||
for (const { producerId, kind } of existingProducers) {
|
||||
await consumeProducer(producerId, kind);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to initialize mediasoup viewer:', e);
|
||||
}
|
||||
peerConnection = new RTCPeerConnection(config);
|
||||
|
||||
peerConnection.ontrack = event => {
|
||||
remoteVideo.srcObject = event.streams[0];
|
||||
}
|
||||
|
||||
async function consumeProducer(producerId, kind) {
|
||||
try {
|
||||
const result = await new Promise((resolve, reject) => {
|
||||
socket.emit('consume', {
|
||||
transportId: recvTransport.id,
|
||||
producerId,
|
||||
rtpCapabilities: device.rtpCapabilities
|
||||
}, (data) => {
|
||||
if (data.error) reject(new Error(data.error));
|
||||
else resolve(data);
|
||||
});
|
||||
});
|
||||
|
||||
const consumer = await recvTransport.consume({
|
||||
id: result.id,
|
||||
producerId: result.producerId,
|
||||
kind: result.kind,
|
||||
rtpParameters: result.rtpParameters
|
||||
});
|
||||
|
||||
consumers[consumer.id] = consumer;
|
||||
|
||||
// Attach track to the video element
|
||||
const { track } = consumer;
|
||||
|
||||
if (!remoteVideo.srcObject) {
|
||||
remoteVideo.srcObject = new MediaStream();
|
||||
}
|
||||
remoteVideo.srcObject.addTrack(track);
|
||||
|
||||
remoteVideo.classList.add('active');
|
||||
overlay.classList.add('hidden');
|
||||
};
|
||||
|
||||
// Auto-unmute when the user interacts with the document to bypass browser autoplay restrictions
|
||||
document.addEventListener('click', () => {
|
||||
remoteVideo.muted = false;
|
||||
remoteVideo.volume = 1.0;
|
||||
}, {once: true});
|
||||
|
||||
// Monitor ICE connection state for stability
|
||||
peerConnection.oniceconnectionstatechange = () => {
|
||||
console.log('ICE state:', peerConnection.iceConnectionState);
|
||||
if (peerConnection.iceConnectionState === 'failed') {
|
||||
console.log('ICE failed, attempting restart...');
|
||||
peerConnection.restartIce();
|
||||
} else if (peerConnection.iceConnectionState === 'disconnected') {
|
||||
setTimeout(() => {
|
||||
if (peerConnection && peerConnection.iceConnectionState === 'disconnected') {
|
||||
console.log('ICE still disconnected, attempting restart...');
|
||||
peerConnection.restartIce();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
peerConnection.onicecandidate = event => {
|
||||
if (event.candidate) {
|
||||
socket.emit('candidate', id, event.candidate);
|
||||
}
|
||||
};
|
||||
|
||||
peerConnection
|
||||
.setRemoteDescription(description)
|
||||
.then(() => peerConnection.createAnswer())
|
||||
.then(sdp => {
|
||||
let sdpLines = sdp.sdp.split('\r\n');
|
||||
let opusPayloadType = null;
|
||||
for (let i = 0; i < sdpLines.length; i++) {
|
||||
if (sdpLines[i].includes('a=rtpmap:') && sdpLines[i].includes('opus/48000/2')) {
|
||||
const match = sdpLines[i].match(/a=rtpmap:(\d+) /);
|
||||
if (match) opusPayloadType = match[1];
|
||||
}
|
||||
}
|
||||
if (opusPayloadType) {
|
||||
let fmtpFound = false;
|
||||
for (let i = 0; i < sdpLines.length; i++) {
|
||||
if (sdpLines[i].startsWith(`a=fmtp:${opusPayloadType}`)) {
|
||||
sdpLines[i] = `a=fmtp:${opusPayloadType} minptime=10;useinbandfec=1;maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate=510000;cbr=1`;
|
||||
fmtpFound = true;
|
||||
}
|
||||
}
|
||||
if (!fmtpFound) {
|
||||
sdpLines.push(`a=fmtp:${opusPayloadType} minptime=10;useinbandfec=1;maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate=510000;cbr=1`);
|
||||
}
|
||||
}
|
||||
sdp.sdp = sdpLines.join('\r\n');
|
||||
return peerConnection.setLocalDescription(sdp);
|
||||
})
|
||||
.then(() => {
|
||||
socket.emit('answer', id, peerConnection.localDescription);
|
||||
// Resume the consumer (server starts them paused)
|
||||
await new Promise((resolve, reject) => {
|
||||
socket.emit('resumeConsumer', { consumerId: consumer.id }, (result) => {
|
||||
if (result && result.error) reject(new Error(result.error));
|
||||
else resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
socket.on('candidate', (id, candidate) => {
|
||||
if (peerConnection) {
|
||||
peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
|
||||
.catch(e => console.error(e));
|
||||
consumer.on('trackended', () => {
|
||||
console.log(`Track ended for consumer ${consumer.id}`);
|
||||
});
|
||||
|
||||
consumer.on('transportclose', () => {
|
||||
console.log(`Transport closed for consumer ${consumer.id}`);
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to consume producer:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for new producers (e.g. broadcaster adds audio after starting)
|
||||
socket.on('newProducer', async ({ producerId, kind }) => {
|
||||
if (recvTransport) {
|
||||
await consumeProducer(producerId, kind);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('broadcaster', () => {
|
||||
socket.emit('viewer');
|
||||
// Handle producer closed (broadcaster stopped a track)
|
||||
socket.on('producerClosed', ({ consumerId }) => {
|
||||
const consumer = consumers[consumerId];
|
||||
if (consumer) {
|
||||
// Remove the track from the video element
|
||||
if (remoteVideo.srcObject) {
|
||||
const track = consumer.track;
|
||||
if (track) {
|
||||
remoteVideo.srcObject.removeTrack(track);
|
||||
}
|
||||
}
|
||||
consumer.close();
|
||||
delete consumers[consumerId];
|
||||
}
|
||||
|
||||
// If no more consumers, show overlay
|
||||
if (Object.keys(consumers).length === 0) {
|
||||
remoteVideo.classList.remove('active');
|
||||
remoteVideo.srcObject = null;
|
||||
overlay.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// CRITICAL: Only react to the BROADCASTER's disconnect, not other viewers
|
||||
socket.on('disconnectPeer', (id) => {
|
||||
if (id !== broadcasterPeerId) return; // Ignore other viewers disconnecting
|
||||
|
||||
if (peerConnection) {
|
||||
peerConnection.close();
|
||||
peerConnection = null;
|
||||
// Broadcaster connected - try to initialize
|
||||
socket.on('broadcasterConnected', () => {
|
||||
// Re-init to pick up new producers
|
||||
if (!device) {
|
||||
init();
|
||||
} else {
|
||||
// Just fetch new producers
|
||||
socket.emit('getProducers', async (producers) => {
|
||||
for (const { producerId, kind } of producers) {
|
||||
// Check if we're already consuming this producer
|
||||
const alreadyConsuming = Object.values(consumers).some(c => c.producerId === producerId);
|
||||
if (!alreadyConsuming) {
|
||||
await consumeProducer(producerId, kind);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
broadcasterPeerId = null;
|
||||
});
|
||||
|
||||
// Broadcaster disconnected
|
||||
socket.on('broadcasterDisconnected', () => {
|
||||
// Close all consumers
|
||||
Object.values(consumers).forEach(consumer => {
|
||||
consumer.close();
|
||||
});
|
||||
consumers = {};
|
||||
|
||||
remoteVideo.classList.remove('active');
|
||||
remoteVideo.srcObject = null;
|
||||
|
||||
|
||||
overlay.classList.remove('hidden');
|
||||
overlay.querySelector('h1').innerText = 'Stream Ended';
|
||||
overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...';
|
||||
});
|
||||
|
||||
// Auto-unmute when the user interacts with the document
|
||||
document.addEventListener('click', () => {
|
||||
remoteVideo.muted = false;
|
||||
remoteVideo.volume = 1.0;
|
||||
}, { once: true });
|
||||
|
||||
// Initialize on connect
|
||||
socket.on('connect', () => {
|
||||
socket.emit('viewer');
|
||||
init();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user