str0m 0.18.0

WebRTC library in Sans-IO style
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!DOCTYPE html>
<html>

<head>
    <title>WebRTC Post example</title>
    <style>
        body {
            background: black;
            color: white;
        }
    </style>
</head>

<body>
    Enable
    <button id="cam" onClick="startCam()">Cam</button>
    <button id="mic" onClick="startMic()">Mic</button>
    <button id="data" onClick="startDataChannel()">Data</button>
    Start
    <button id="rtc" onClick="startRtc()">Connect</button>
    <script>
        let streamCam;
        let streamMic;
        let startChannel = false;
        let dataChannel;
        let rtc = new RTCPeerConnection();
        const byId = (id) => document.getElementById(id);
        const byTag = (tag) => [].slice.call(document.getElementsByTagName(tag));
        async function startCam() {
            byId('cam').disabled = true;
            byId('rtc').disabled = true;
            streamCam = await navigator.mediaDevices.getUserMedia({
                video: true,
            });
            byId('rtc').disabled = false;
        }
        async function startMic() {
            byId('mic').disabled = true;
            byId('rtc').disabled = true;
            streamMic = await navigator.mediaDevices.getUserMedia({
                audio: true,
            });
            byId('rtc').disabled = false;
        }
        async function startDataChannel() {
            byId('data').disabled = true;
            startChannel = true;
        }
        async function startRtc() {
            byTag('button').forEach(b => b.disabled = true);
            if (startChannel) {
                dataChannel = rtc.createDataChannel("myChannel");
                dataChannel.onopen = () => {
                    console.log("datachannel open");
                };
                dataChannel.onclose = () => {
                    console.log("datachannel close");
                };
                let counter = 0;
                setInterval(() => {
                    if (dataChannel.readyState != 'open') {
                        return;
                    }
                    dataChannel.send(`Counter ${counter}`);
                    counter++;
                }, 1000);
            }
            if (streamCam) {
                rtc.addTrack(streamCam.getTracks()[0], streamCam);
            }
            if (streamMic) {
                rtc.addTrack(streamMic.getTracks()[0], streamMic);
            }
            const offer = await rtc.createOffer();
            rtc.setLocalDescription(offer);
            console.log(offer.sdp.split('\r\n'));

            const res = await fetch('', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(offer),
            });

            const answer = await res.json();
            rtc.setRemoteDescription(answer);
            console.log(answer.sdp.split('\r\n'));


        }
    </script>
</body>

</html>