增加webrt流媒体随程序启动 修复用户添加报错的bug

‘liusuyi’

2023-07-27 e279e456850734349842edd8ce52dc16fc5cdea7

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
 
class WebRTCStreamerMenuElement extends HTMLElement {
    static get observedAttributes() {
        return ['selected', 'webrtcurl'];
    }
    constructor() {
        super();
        this.shadowDOM = this.attachShadow({ mode: 'open' });
        this.shadowDOM.innerHTML = `
                    <style>@import "styles.css"</style>
                    <nav id="mediaList"></nav>
                    `;
    }
    connectedCallback() {
        this.fillList();
    }
 
    attributeChangedCallback(attrName, oldVal, newVal) {
        if (attrName === "selected") {
            this.selected = newVal;
            let mediaList = this.shadowDOM.getElementById("mediaList");
            let newValjson = JSON.parse(newVal);
            for (const option of mediaList.getElementsByTagName('a')) {
                let optionjson = JSON.parse(option.value);
                if (optionjson.video === newValjson.video) {
                    option.selected = true;
                    option.className = "active";
                }
            }
 
        } else if (attrName === "webrtcurl") {
            this.fillList();
        }
    }
 
    fillList() {
        let mediaList = this.shadowDOM.getElementById("mediaList");
        const webrtcurl = this.getAttribute("webrtcurl") || "";
        fetch(webrtcurl + "/api/getMediaList").then(r => r.json()).then((response) => {
            response.forEach((media) => {
                var option = document.createElement("a");
                option.text = media.video;
                option.value = JSON.stringify(media);
                if (this.selected && (this.selected === option.text)) {
                    option.className = "active";
                }
                option.onclick = () => {
                    if (option.className === "active") {
                        option.className = "";
                        this.dispatchEvent(new CustomEvent('change', {
                            detail: { url: "" }
                        }));
                    } else {
                        for (const opt of mediaList.getElementsByTagName('a')) {
                            opt.className = "";
                        }
                        this.dispatchEvent(new CustomEvent('change', {
                            detail: { url: option.value }
                        }));
                        option.className = "active";
                    }
                }
                mediaList.appendChild(option);
            });
            this.dispatchEvent(new CustomEvent('init', {
                detail: response
            }));
 
 
            var settings = document.createElement("a");
            settings.onclick = () => {
                if (settings.className === "active") {
                    settings.className = "";
                    this.dispatchEvent(new CustomEvent('settings', {
                        detail: "off"
                    }));
                } else {
                    settings.className = "active";
                    this.dispatchEvent(new CustomEvent('settings', {
                        detail: "on"
                    }));
                }
            }
            var img = document.createElement("img");
            img.src = "webrtc.png"
            settings.appendChild(img);
            mediaList.appendChild(settings);
 
 
            for (const option of mediaList.getElementsByTagName('a')) {
                if (option.className === "active") {
                    this.dispatchEvent(new CustomEvent('change', {
                        detail: { url: option.value }
                    }));
                }
            }
        });
    }
}
 
customElements.define('webrtc-streamer-menu', WebRTCStreamerMenuElement);