|
|
class WebRTCStreamerAlgoElement extends HTMLElement {
|
static get observedAttributes() {
|
return ['selected'];
|
}
|
constructor() {
|
super();
|
this.shadowDOM = this.attachShadow({mode: 'open'});
|
this.shadowDOM.innerHTML = `
|
<style>@import "styles.css"</style>
|
<h2>
|
<select id="algoList">
|
<option value="none">none</option>
|
<option value="cocossd">cocossd</option>
|
<option value="posenet">posenet</option>
|
<option value="deeplab">deeplab</option>
|
<option value="bodyPix">bodyPix</option>
|
<option value="blazeface">blazeface</option>
|
</select>
|
</h2>
|
`;
|
}
|
connectedCallback() {
|
this.fillList();
|
}
|
|
attributeChangedCallback(attrName, oldVal, newVal) {
|
if (attrName === "selected") {
|
this.selected = newVal;
|
let mediaList = this.shadowDOM.getElementById("algoList");
|
for (const option of mediaList.getElementsByTagName('option')) {
|
if (option.value === newVal) {
|
option.selected = true;
|
}
|
}
|
}
|
}
|
|
fillList() {
|
let algoList = this.shadowDOM.getElementById("algoList");
|
algoList.onchange = (event) => {
|
this.dispatchEvent(new CustomEvent('change', {
|
detail: {
|
algo: algoList.selectedOptions[0].value,
|
}
|
}));
|
}
|
}
|
}
|
|
customElements.define('webrtc-streamer-algo', WebRTCStreamerAlgoElement);
|
