david/ota-tv-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial app + gitea action #1

Merged
david merged 15 commits from dev into main 2025-04-03 21:32:59 -07:00
Conversation 0 Commits 15 Files Changed 15 +74 -40
4 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b98717201e - Show all commits

14
src/static/css/index.scss
View File

@ -33,6 +33,20 @@ body {
width: 20em;
border-radius: 50%;
}
.content{
display: flex;
flex-direction: column;
gap: 1em;
.player{
.channel-group{
display: flex;
align-self: center;
justify-self: center;
}
}
}
}

17
src/static/index.html
View File

@ -9,12 +9,23 @@
</head>
<body>
<header></header>
<main>
<h1>Video streams</h1>
<h2>WebRTC</h2>
<div class="content">
<div class="player">
<video id="video" autoplay playsinline controls></video>
<div id="channel-group" class="channel-group" ></div>
<button onClick="tune()">Tune</button>
<video id="video0" autoplay playsinline controls></video>
<div id="channel-container-0" class="channel-group"></div>
<button onClick="tune(0)">Tune</button>
</div>
<div class="player">
<video id="video1" autoplay playsinline controls></video>
<div id="channel-container-1" class="channel-group"></div>
<button onClick="tune(1)">Tune</button>
</div>
</main>
</div>
<script src="js/video.js"></script>

25
src/static/js/doc.ts
View File

@ -1,17 +1,22 @@
const getChannels = () => {
const PLAYERS = 2;
const populateChannels = (players:number) => {
fetch('/api/list').then(async (res) => {
const channelNames: string[] = await res.json()
const radioGroup = document.getElementById('channel-group');
for(let i = 0; i < players; ++i){
const radioGroup = document.getElementById(`channel-container-${i}`);
if (!radioGroup) {
throw new Error("Radio group not found")
}
radioGroup.innerHTML = ''
channelNames.forEach((channelName,index) => {
const id = `radio-${index}`;
channelNames.forEach((channelName,_) => {
const id = `radio-${channelName}`;
const input = document.createElement('input');
input.type = "radio"
input.name = 'grp';
input.name = `channel-radio-${i}`;
input.value = channelName;
input.id = id
@ -29,18 +34,20 @@ const getChannels = () => {
radioGroup.appendChild(wrapper)
})
}
}).catch(err => {
console.log("nope ",err)
})
}
const tune = () =>{
const choice = document.querySelector<HTMLInputElement>('input[name="grp"]:checked')
const tune = (adapter=0) =>{
const choice = document.querySelector<HTMLInputElement>(`input[name="channel-radio-${adapter}"]:checked`)
const channel = choice?.value;
if(channel){
fetch(`/api/tune/${channel}`, {method:'PUT'})
fetch(`/api/tune/${channel}?adapter=${adapter}`, {method:'PUT'})
}
}
getChannels();
populateChannels(PLAYERS);

6
src/static/js/video.ts
View File

@ -1,7 +1,8 @@
const host = window.location.hostname
const ws = new WebSocket(`ws://${host}:3001`);
const pc = new RTCPeerConnection({ iceServers: [] });
const video = document.getElementById('video') as HTMLVideoElement;
const video0 = document.getElementById('video0') as HTMLVideoElement;
const video1 = document.getElementById('video1') as HTMLVideoElement;
pc.onconnectionstatechange = (event) => {
console.log("onconnectionstatechange ", event)
@ -13,7 +14,8 @@ pc.ondatachannel = (event) => {
pc.ontrack = (event) => {
console.log("Received track event", event.streams);
video.srcObject = event.streams[0];
video0.srcObject = event.streams[0];
video1.srcObject = event.streams[0];
};
pc.onicecandidate = ({ candidate }) => {