added frontend tuning ability
This commit is contained in:
parent
3dbf27e149
commit
6f1faf2753
@ -11,9 +11,14 @@
|
|||||||
<body>
|
<body>
|
||||||
<h1>Video streams</h1>
|
<h1>Video streams</h1>
|
||||||
<h2>WebRTC</h2>
|
<h2>WebRTC</h2>
|
||||||
<video id="video" autoplay playsinline controls></video>
|
<div class="player">
|
||||||
|
<video id="video" autoplay playsinline controls></video>
|
||||||
|
<div id="channel-group" class="channel-group" ></div>
|
||||||
|
<button onClick="tune()">Tune</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="js/video.js"></script>
|
<script src="js/video.js"></script>
|
||||||
|
<script src="js/doc.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
46
src/static/js/doc.ts
Normal file
46
src/static/js/doc.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
const getChannels = () => {
|
||||||
|
fetch('/api/list').then(async (res) => {
|
||||||
|
const channelNames: string[] = await res.json()
|
||||||
|
const radioGroup = document.getElementById('channel-group');
|
||||||
|
if (!radioGroup) {
|
||||||
|
throw new Error("Radio group not found")
|
||||||
|
}
|
||||||
|
radioGroup.innerHTML = ''
|
||||||
|
channelNames.forEach((channelName,index) => {
|
||||||
|
const id = `radio-${index}`;
|
||||||
|
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = "radio"
|
||||||
|
input.name = 'grp';
|
||||||
|
input.value = channelName;
|
||||||
|
input.id = id
|
||||||
|
|
||||||
|
|
||||||
|
const lbl = document.createElement("label");
|
||||||
|
lbl.htmlFor = id;
|
||||||
|
lbl.textContent = channelName;
|
||||||
|
|
||||||
|
// Wrap in a div or line
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.appendChild(input);
|
||||||
|
wrapper.appendChild(lbl);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
radioGroup.appendChild(wrapper)
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
console.log("nope ",err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const tune = () =>{
|
||||||
|
const choice = document.querySelector<HTMLInputElement>('input[name="grp"]:checked')
|
||||||
|
const channel = choice?.value;
|
||||||
|
if(channel){
|
||||||
|
fetch(`/api/tune/${channel}`, {method:'PUT'})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
getChannels();
|
Loading…
Reference in New Issue
Block a user