ktrtc/client.js at main · mingjun97/ktrtc · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
var pc = null;
var started = false;
function negotiate() {
    pc.addTransceiver('video', {direction: 'recvonly'});
    pc.addTransceiver('audio', {direction: 'recvonly'});
    dc = pc.createDataChannel('info', {ordered: true});
    dc.onmessage = handle_msg;

    return pc.createOffer().then(function(offer) {
        return pc.setLocalDescription(offer);
    }).then(function() {
        // wait for ICE gathering to complete
        return new Promise(function(resolve) {
            if (pc.iceGatheringState === 'complete') {
                resolve();
            } else {
                function checkState() {
                    if (pc.iceGatheringState === 'complete') {
                        pc.removeEventListener('icegatheringstatechange', checkState);
                        resolve();
                    }
                }
                pc.addEventListener('icegatheringstatechange', checkState);
            }
        });
    }).then(function() {
        var offer = pc.localDescription;
        return fetch('/offer', {
            body: JSON.stringify({
                sdp: offer.sdp,
                type: offer.type,
            }),
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST'
        });
    }).then(function(response) {
        return response.json();
    }).then(function(answer) {
        return pc.setRemoteDescription(answer);
    }).catch(function(e) {
        alert(e);
    });
}

function start() {
    if (started) {
        return;
    }
    started = true;
    var config = {
        sdpSemantics: 'unified-plan'
    };
    // config.iceServers = [{urls: ['stun:stun.l.google.com:19302']}];

    // if (document.getElementById('use-stun').checked) {
    //     config.iceServers = [{urls: ['stun:stun.l.google.com:19302']}];
    // }

    pc = new RTCPeerConnection(config);

    // connect audio / video
    pc.addEventListener('track', function(evt) {
        if (evt.track.kind == 'video') {
            document.getElementById('video').srcObject = evt.streams[0];
        } else {
            document.getElementById('audio').srcObject = evt.streams[0];
        }
    });

    // document.getElementById('start').style.display = 'none';
    negotiate();
    // document.getElementById('stop').style.display = 'inline-block';
}

function stop() {
    document.getElementById('stop').style.display = 'none';

    // close peer connection
    setTimeout(function() {
        pc.close();
    }, 500);
}

function handle_msg(evt) {
    var msg = JSON.parse(evt.data);
    if (msg.type === 'info') {

        var text = `当前播放：`
        if (msg.data[0]) {
            text += `${msg.data[0][1]}-${msg.data[0][2]}`
        } else {
            text += '无'
        }
        text += `, 下一首： `;
        if (msg.data[1]) {
            text += `${msg.data[1][1]}-${msg.data[1][2]}`
        } else {
            text += '无'
        }
        text += ', 队列长度：' + msg.data.length + '首';
        document.getElementById('marquee').innerHTML = text;
    } else if (msg.type === 'op') {
        console.log(msg.data);
        document.getElementById(msg.data).style.display = 'inherit';
        setTimeout(function() {
            document.getElementById(msg.data).style.display = 'none';
        }, 1000);
    }
}