Hugging Face's logo

Spaces:
everydaycats
/
plugin_server
Sleeping

App Files Community
1
Pepguy commited on
Commit
1b905d9
·
verified ·
1 Parent(s): 2d34f28

Delete public

Browse files
Files changed (4) hide show
  1. public/index.html +0 -49
  2. public/index.js +0 -39
  3. public/viewer.html +0 -44
  4. public/viewer.js +0 -41
public/index.html DELETED
@@ -1,49 +0,0 @@
1
- <!-- producer.html -->
2
- <!DOCTYPE html>
3
- <html>
4
- <body>
5
- <h3>Broadcaster</h3>
6
- <p>Hello </p>
7
- <video id="localVideo" autoplay muted></video>
8
- <script>
9
- const ws = new WebSocket('ws://pepguy-swarming-1.hf.space');
10
- let transport, producer;
11
-
12
- ws.onmessage = async ({ data }) => {
13
- const { action, data: d } = JSON.parse(data);
14
-
15
- if (action === 'producerTransportCreated') {
16
- transport = device.createSendTransport(d);
17
- transport.on('connect', ({ dtlsParameters }, cb) =>
18
- ws.send(JSON.stringify({ action: 'connectProducerTransport', data: { dtlsParameters } })), cb()
19
- );
20
- transport.on('produce', ({ kind, rtpParameters }, cb) =>
21
- ws.send(JSON.stringify({ action: 'produce', data: { kind, rtpParameters } })), cb({ id: '' })
22
- );
23
- }
24
-
25
- if (action === 'produced') {
26
- console.log('Producer ready:', d.producerId);
27
- }
28
- };
29
-
30
- async function start() {
31
- // 1) getUserMedia
32
- const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
33
- document.getElementById('localVideo').srcObject = stream;
34
-
35
- // 2) load device RTP capabilities
36
- ws.send(JSON.stringify({ action: 'createProducerTransport' }));
37
- const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json();
38
- device = new mediasoupClient.Device();
39
- await device.load({ routerRtpCapabilities: rtpCapabilities });
40
-
41
- // 3) wait for transport then produce
42
- stream.getTracks().forEach(track => transport.produce({ track }));
43
- }
44
-
45
- start();
46
- </script>
47
- <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script>
48
- </body>
49
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public/index.js DELETED
@@ -1,39 +0,0 @@
1
- window.onload = () => {
2
- document.getElementById('my-button').onclick = () => {
3
- init();
4
- }
5
- }
6
-
7
- async function init() {
8
- const stream = await navigator.mediaDevices.getUserMedia({ video: true });
9
- document.getElementById("video").srcObject = stream;
10
- const peer = createPeer();
11
- stream.getTracks().forEach(track => peer.addTrack(track, stream));
12
- }
13
-
14
-
15
- function createPeer() {
16
- const peer = new RTCPeerConnection({
17
- iceServers: [
18
- {
19
- urls: "stun:stun.stunprotocol.org"
20
- }
21
- ]
22
- });
23
- peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer);
24
-
25
- return peer;
26
- }
27
-
28
- async function handleNegotiationNeededEvent(peer) {
29
- const offer = await peer.createOffer();
30
- await peer.setLocalDescription(offer);
31
- const payload = {
32
- sdp: peer.localDescription
33
- // , roomId: "gods"
34
- };
35
-
36
- const { data } = await axios.post('/broadcast', payload);
37
- const desc = new RTCSessionDescription(data.sdp);
38
- peer.setRemoteDescription(desc).catch(e => console.log(e));
39
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public/viewer.html DELETED
@@ -1,44 +0,0 @@
1
- <!-- consumer.html -->
2
- <!DOCTYPE html>
3
- <html>
4
- <body>
5
- <h3>Viewer</h3>
6
- <video id="remoteVideo" autoplay></video>
7
- <script>
8
- const ws = new WebSocket('ws://pepguy-swarming-1.hf.space');
9
- let transport, consumer;
10
-
11
- ws.onmessage = async ({ data }) => {
12
- const { action, data: d } = JSON.parse(data);
13
-
14
- if (action === 'consumerTransportCreated') {
15
- transport = device.createRecvTransport(d);
16
- transport.on('connect', ({ dtlsParameters }, cb) =>
17
- ws.send(JSON.stringify({ action: 'connectConsumerTransport', data: { dtlsParameters } })), cb()
18
- );
19
- // once connected, ask to consume
20
- ws.send(JSON.stringify({ action: 'consume' }));
21
- }
22
-
23
- if (action === 'consumed') {
24
- consumer = await transport.consume(d);
25
- const stream = new MediaStream([consumer.track]);
26
- document.getElementById('remoteVideo').srcObject = stream;
27
- }
28
- };
29
-
30
- async function start() {
31
- // load device
32
- const { rtpCapabilities } = await (await fetch('/rtpCapabilities')).json();
33
- device = new mediasoupClient.Device();
34
- await device.load({ routerRtpCapabilities: rtpCapabilities });
35
-
36
- // create transport
37
- ws.send(JSON.stringify({ action: 'createConsumerTransport' }));
38
- }
39
-
40
- start();
41
- </script>
42
- <script src="https://unpkg.com/mediasoup-client@3/lib/index.js"></script>
43
- </body>
44
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public/viewer.js DELETED
@@ -1,41 +0,0 @@
1
- window.onload = () => {
2
- document.getElementById('my-button').onclick = () => {
3
- init();
4
- }
5
- }
6
-
7
- async function init() {
8
- const peer = createPeer();
9
- peer.addTransceiver("video", { direction: "recvonly" })
10
- }
11
-
12
- function createPeer() {
13
- const peer = new RTCPeerConnection({
14
- iceServers: [
15
- {
16
- urls: "stun:stun.stunprotocol.org"
17
- }
18
- ]
19
- });
20
- peer.ontrack = handleTrackEvent;
21
- peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer);
22
-
23
- return peer;
24
- }
25
-
26
- async function handleNegotiationNeededEvent(peer) {
27
- const offer = await peer.createOffer();
28
- await peer.setLocalDescription(offer);
29
- const payload = {
30
- sdp: peer.localDescription
31
- // , roomId: "gods"
32
- };
33
-
34
- const { data } = await axios.post('/consumer', payload);
35
- const desc = new RTCSessionDescription(data.sdp);
36
- peer.setRemoteDescription(desc).catch(e => console.log(e));
37
- }
38
-
39
- function handleTrackEvent(e) {
40
- document.getElementById("video").srcObject = e.streams[0];
41
- };