Spaces:
Sleeping
Sleeping
| <!-- consumer.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() | |
| ); | |
| // once connected, ask to consume | |
| 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() { | |
| // load device | |
| const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json(); | |
| device = new mediasoupClient.Device(); | |
| await device.load({ routerRtpCapabilities: rtpCapabilities }); | |
| // create transport | |
| ws.send(JSON.stringify({ action: 'createConsumerTransport' })); | |
| } | |
| start(); | |
| </script> | |
| <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script> | |
| </body> | |
| </html> |