9 videos, also midi test
This commit is contained in:
Henne
parent
3e22f5483a
commit
db6d963e3f
98
index.html
98
index.html
|
|
@ -25,6 +25,9 @@
|
|||
margin: 0 auto;
|
||||
border: 1px dotted grey;
|
||||
}
|
||||
.volume-slider {
|
||||
text-align: center;
|
||||
}
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -88,36 +91,77 @@
|
|||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 video video-6">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<input type="text" onchange="setName(6, this.value)">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-7">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<input type="text" onchange="setName(7, this.value)">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="col-md-4 video video-8">
|
||||
<video autoplay='autoplay'></video>
|
||||
<audio autoplay='autoplay'></audio>
|
||||
<input type="text" onchange="setName(8, this.value)">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="volume-slider volume-0">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(0, this.value)">
|
||||
<span class="name"></span>
|
||||
<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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="volume-slider volume-1">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(1, this.value)">
|
||||
<span class="name"></span>
|
||||
<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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="volume-slider volume-2">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(2, this.value)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
<div class="volume-slider volume-3">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(3, this.value)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
<div class="volume-slider volume-4">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(4, this.value)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
<div class="volume-slider volume-5">
|
||||
<span class="volume">70%</span>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(5, this.value)">
|
||||
<span class="name"></span>
|
||||
<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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</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)">
|
||||
<span class="name"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
60
script.js
60
script.js
|
|
@ -21,8 +21,9 @@ let room = null;
|
|||
|
||||
// zu mappende namen.
|
||||
let remoteMappingName = [
|
||||
'alpha', 'beta', 'henne',
|
||||
'delta', 'soeren', 'klaus'
|
||||
'speaker1', 'speaker2', 'speaker3',
|
||||
'speaker4', 'speaker5', 'speaker6',
|
||||
'speaker7', 'speaker8', 'speaker9'
|
||||
];
|
||||
// track mapping participant id -> position
|
||||
let trackMapping = {};
|
||||
|
|
@ -31,6 +32,44 @@ let tracks = {};
|
|||
// name -> id
|
||||
let nameMapping = {};
|
||||
|
||||
/**
|
||||
*
|
||||
* MIDI SECTION
|
||||
*/
|
||||
let midi, data;
|
||||
// start talking to MIDI controller
|
||||
if (navigator.requestMIDIAccess) {
|
||||
navigator.requestMIDIAccess({
|
||||
sysex: false
|
||||
}).then(onMIDISuccess);
|
||||
} else {
|
||||
console.warn("No MIDI support in your browser")
|
||||
}
|
||||
|
||||
// on success
|
||||
function onMIDISuccess(midiData) {
|
||||
// this is all our MIDI data
|
||||
midi = midiData;
|
||||
let allInputs = midi.inputs.values();
|
||||
// loop over all available inputs and listen for any MIDI input
|
||||
for (let input = allInputs.next(); input && !input.done; input = allInputs.next()) {
|
||||
// when a MIDI value is received call the onMIDIMessage function
|
||||
input.value.onmidimessage = (messageData ) => {
|
||||
midiSetLevel(messageData.data[0]-176, Math.round(messageData[2]/127))
|
||||
console.log(messageData.data);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* END MIDI SECTION
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Selects all shown participants to receive high quality video. Otherwise Jitsi will only show thumbnail size video to the Streamer
|
||||
*/
|
||||
function selectParticipants() {
|
||||
let part = [];
|
||||
for(let i in trackMapping) {
|
||||
|
|
@ -165,10 +204,10 @@ function onUserLeft(id) {
|
|||
function detachUser(id) {
|
||||
if (trackMapping[id] != null) {
|
||||
console.log("detaching user " + id);
|
||||
if(tracks[id].video) {
|
||||
if(tracks[id] && tracks[id].video) {
|
||||
tracks[id].video.detach($(`.video-${trackMapping[id]} video`)[0]);
|
||||
}
|
||||
if(tracks[id].audio) {
|
||||
if(tracks[id] && tracks[id].audio) {
|
||||
tracks[id].audio.detach($(`.video-${trackMapping[id]} audio`)[0]);
|
||||
}
|
||||
delete trackMapping[id]
|
||||
|
|
@ -281,6 +320,19 @@ function setLevel(id, level) {
|
|||
volumeLabel.text(Math.round(level*100) + "%")
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the volume level coming from MIDI input, also sets correct fader position to audio slider
|
||||
* @param id
|
||||
* @param level
|
||||
*/
|
||||
function midiSetLevel(id, level) {
|
||||
if(id >= remoteMappingName.length) {
|
||||
return;
|
||||
}
|
||||
setLevel(id, level);
|
||||
$('.volume-' + id + ' input').val(level);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the name of a position
|
||||
* @param position
|
||||
|
|
|
|||
Loading…
Reference in New Issue