ATD
/
jitsi-stream-client
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

feat: configurable video size and rows / cols

This commit is contained in:
henne 2020-12-26 21:03:14 +01:00
parent 7b49de97e9
commit 698b3b1d58
2 changed files with 57 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
index.html
View File

@ -58,127 +58,18 @@
<div id="room-selector">
<form onsubmit="connect(event)">
<input type="text" id="room-name" placeholder="Room name"/><br />
<input type="text" id="room-password" placeholder="Room Password" />
<input type="checkbox" id="use-local-video" /> Use local Video
<input type="text" id="room-password" placeholder="Room Password" /><br />
<input type="checkbox" id="use-local-video" /> Use local Video<br />
<input type="text" id="width" value="624" /> Width of video elements<br />
<input type="text" id="height" value="351" /> Height of video elements<br />
<input type="text" id="cols" value="3" /> Column count<br />
<input type="text" id="rows" value="3" /> Row count<br />
<button disabled id="room-name-button">Connect</button>
</form>
</div>
<div style="display: none" id="room">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 video video-0">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-1">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-2">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
</div>
<div class="row">
<div class="col-md-4 video video-3">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-4">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-5">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
</div>
<div class="row">
<div class="col-md-4 video video-6">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-7">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
<div class="col-md-4 video video-8">
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
</div>
</div>
<div class="container-fluid" id="video-container">
</div>
<div class="row">
<div class="volume-slider volume-0 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(0, this.value)">
<input type="text" onchange="setName(0, this.value)" placeholder="username1">
<button onclick="reload(0)">Reload</button>
</div>
<div class="volume-slider volume-1 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(1, this.value)">
<input type="text" onchange="setName(1, this.value)" placeholder="username2">
<button onclick="reload(1)">Reload</button>
</div>
<div class="volume-slider volume-2 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(2, this.value)">
<input type="text" onchange="setName(2, this.value)" placeholder="username3">
<button onclick="reload(2)">Reload</button>
</div>
</div>
<div class="row">
<div class="volume-slider volume-3 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(3, this.value)">
<input type="text" onchange="setName(3, this.value)" placeholder="username4">
<button onclick="reload(3)">Reload</button>
</div>
<div class="volume-slider volume-4 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(4, this.value)">
<input type="text" onchange="setName(4, this.value)" placeholder="username5">
<button onclick="reload(4)">Reload</button>
</div>
<div class="volume-slider volume-5 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(5, this.value)">
<input type="text" onchange="setName(5, this.value)" placeholder="username6">
<button onclick="reload(5)">Reload</button>
</div>
</div>
<div class="row">
<div class="volume-slider volume-6 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(6, this.value)">
<input type="text" onchange="setName(6, this.value)" placeholder="username7">
<button onclick="reload(6)">Reload</button>
</div>
<div class="volume-slider volume-7 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(7, this.value)">
<input type="text" onchange="setName(7, this.value)" placeholder="username8">
<button onclick="reload(7)">Reload</button>
</div>
<div class="volume-slider volume-8 col">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(8, this.value)">
<input type="text" onchange="setName(8, this.value)" placeholder="username9">
<button onclick="reload(8)">Reload</button>
</div>
</div>
<button onclick="leave()">Leave Conference</button>
<p class="available-users"></p>
</div>

50
script.js
View File

@ -28,6 +28,53 @@ let tracks = {};
let useLocalVideo = false;
let isJoined = false;
/**
* HTML Builder
* a bit hacky.. but hey, i needed it fast.
*/
function initHtml(rows, cols) {
let rootElem = $('#video-container')
rootElem.empty();
let elemCounter = 0
for(let i = 0; i < rows; i++) {
let rowElem = $(document.createElement("div"))
rowElem.addClass("row");
for(let j = 0; j < cols; j++) {
let colElem = $(document.createElement("div"))
colElem.addClass(`col-md-${Math.floor(12/cols)} video video-${elemCounter++}`);
colElem.append(`
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span class="name"></span>
`)
rowElem.append(colElem)
}
rootElem.append(rowElem)
}
elemCounter = 0;
for(let i = 0; i < rows; i++) {
let rowElem = $(document.createElement("div"))
rowElem.addClass("row");
for(let j = 0; j < cols; j++) {
let colElem = $(document.createElement("div"))
colElem.addClass("volume-slider col volume-" + elemCounter);
colElem.append(`
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(${elemCounter}, this.value)">
<input type="text" onchange="setName(${elemCounter}, this.value)" placeholder="username1">
<button onclick="reload(${elemCounter})">Reload</button>
`)
elemCounter++;
rowElem.append(colElem);
}
rootElem.append(rowElem);
}
rootElem.append(`
<button onclick="leave()">Leave Conference</button>
<p class="available-users"></p>
`)
}
/**
*
* MIDI SECTION
@ -273,6 +320,9 @@ function connect(e) {
} else {
useLocalVideo = false
}
initHtml($('#rows').val(), $('#cols').val())
videoSize.height = $('#height').val();
videoSize.width = $('#width').val();
room = connection.initJitsiConference(roomName, confOptions);
room.setDisplayName("Streamer");