Spaces:
Sleeping
Sleeping
| <!-- producer.html --> | |
| <html> | |
| <body> | |
| <h3>Broadcaster</h3> | |
| <p>Hello </p> | |
| <video id="localVideo" autoplay muted></video> | |
| <script> | |
| const ws = new WebSocket('ws://pepguy-swarming-1.hf.space'); | |
| let transport, producer; | |
| ws.onmessage = async ({ data }) => { | |
| const { action, data: d } = JSON.parse(data); | |
| if (action === 'producerTransportCreated') { | |
| transport = device.createSendTransport(d); | |
| transport.on('connect', ({ dtlsParameters }, cb) => | |
| ws.send(JSON.stringify({ action: 'connectProducerTransport', data: { dtlsParameters } })), cb() | |
| ); | |
| transport.on('produce', ({ kind, rtpParameters }, cb) => | |
| ws.send(JSON.stringify({ action: 'produce', data: { kind, rtpParameters } })), cb({ id: '' }) | |
| ); | |
| } | |
| if (action === 'produced') { | |
| console.log('Producer ready:', d.producerId); | |
| } | |
| }; | |
| async function start() { | |
| // 1) getUserMedia | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }); | |
| document.getElementById('localVideo').srcObject = stream; | |
| // 2) load device RTP capabilities | |
| ws.send(JSON.stringify({ action: 'createProducerTransport' })); | |
| const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json(); | |
| device = new mediasoupClient.Device(); | |
| await device.load({ routerRtpCapabilities: rtpCapabilities }); | |
| // 3) wait for transport then produce | |
| stream.getTracks().forEach(track => transport.produce({ track })); | |
| } | |
| start(); | |
| </script> | |
| <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script> | |
| </body> | |
| </html> |