| |
| <!DOCTYPE html> |
| <html> |
| <body> |
| <h3>Viewer</h3> |
| <video id="remoteVideo" autoplay></video> |
| <script> |
| const ws = new WebSocket('ws://pepguy-swarming-1.hf.space'); |
| let transport, consumer; |
| |
| ws.onmessage = async ({ data }) => { |
| const { action, data: d } = JSON.parse(data); |
| |
| if (action === 'consumerTransportCreated') { |
| transport = device.createRecvTransport(d); |
| transport.on('connect', ({ dtlsParameters }, cb) => |
| ws.send(JSON.stringify({ action: 'connectConsumerTransport', data: { dtlsParameters } })), cb() |
| ); |
| |
| ws.send(JSON.stringify({ action: 'consume' })); |
| } |
| |
| if (action === 'consumed') { |
| consumer = await transport.consume(d); |
| const stream = new MediaStream([consumer.track]); |
| document.getElementById('remoteVideo').srcObject = stream; |
| } |
| }; |
| |
| async function start() { |
| |
| const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json(); |
| device = new mediasoupClient.Device(); |
| await device.load({ routerRtpCapabilities: rtpCapabilities }); |
| |
| |
| ws.send(JSON.stringify({ action: 'createConsumerTransport' })); |
| } |
| |
| start(); |
| </script> |
| <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script> |
| </body> |
| </html> |
